Details

В ходе работы был проведён анализ предметной области, рассмотрены существующие решения на рынке маркетплейсов, а также определены их преимущества и ограничения. На основе полученных данных была спроектирована архитектура клиентской части, включающая в себя три независимых веб-приложения: Builder (приложение для создания и настройки магазинов), Storefront (приложение магазина, ориентированное на покупателей) и Marketplace (каталог всех магазинов с функцией поиска, фильтрации и отзывов). При реализации проекта был использован современный технологический стек: React, TypeScript, Vite, Next.js, Zustand, axios и Tailwind CSS. Особое внимание было уделено разработке UI-библиотеки, стилизованной под интерфейс Telegram. Также обеспечена поддержка тёмной/светлой темы, адаптивности и нативных Telegram-функций (авторизация, уведомления, оплата через Telegram Stars и др.). Все приложения реализованы по принципу mobile-first и оптимизированы под работу в среде Telegram WebView. Кроме того, были проведены модульные и E2E-тестирования компонентов и бизнес-логики с использованием Jest и React Testing Library. В результате была создана функциональная и масштабируемая система клиентских приложений, позволяющая любому пользователю Telegram без усилий создать собственный магазин, управлять товарами, принимать заказы и взаимодействовать с покупателями. Разработка демонстрирует практическую применимость Telegram Mini Apps как основы для современных маркетплейсов и обладает потенциалом дальнейшего коммерческого развития.

During the project, an analysis of the subject area was conducted, existing marketplace solutions were reviewed, and their advantages and limitations were identified. Based on the collected data, a client-side architecture was designed, consisting of three independent web applications: Builder (an app for creating and configuring stores), Storefront (a customer-facing store interface), and Marketplace (a catalog of all stores with search, filtering, and review functionality). The implementation utilized a modern technology stack, including React, TypeScript, Vite, Next.js, Zustand, axios, and Tailwind CSS. Special attention was given to the development of a custom UI library styled to match the Telegram interface. Additionally, support for light/dark themes, adaptive layouts, and native Telegram features (such as authentication, notifications, payments via Telegram Stars, and more) was ensured. All applications were developed following a mobile-first approach and optimized for use within the Telegram WebView environment. Furthermore, both unit and E2E-testing of components and business logic were conducted using Jest and React Testing Library. As a result, a functional and scalable system of client applications was created, enabling any Telegram user to easily launch their own store, manage products, process orders, and interact with customers. The project demonstrates the practical viability of Telegram Mini Apps as a foundation for modern marketplaces and has strong potential for further commercial development.

• ВВЕДЕНИЕ
• АНАЛИЗ ПРЕДМЕТНОЙ ОБЛАСТИ И СУЩЕСТВУЮЩИХ РЕШЕНИЙ
  • Интеграция в мессенджер посредством мини-приложений
  • Анализ аналогов и конкурентов
  • Выводы по главе
• ИСПОЛЬЗУЕМЫЕ ТЕХНОЛОГИИ И СРАВНЕНИЕ АНАЛОГОВ
  • Сравнение JavaScript и TypeScript
  • Технологии рендеринга
    • Client-Side Rendering (CSR)
    • Server-Side Rendering (SSR)
    • Static Site Generation (SSG)
  • Выбор фреймворка
  • Выбор сопутствующих библиотек
    • Управление состоянием
    • Работа с сервером
    • Стилизация
  • Выводы по главе
• ПРОЕКТИРОВАНИЕ КЛИЕНТСКОЙ ЧАСТИ
  • Описание требований к системе
  • Описание архитектуры системы
  • Функциональность приложений
• РЕАЛИЗАЦИЯ КЛИЕНТСКОЙ ЧАСТИ
  • Жизненный цикл приложений и выбор фреймворков
  • Библиотека компонентов
    • Описание библиотеки
    • Устройство библиотеки
    • Пример реализации компонентов
  • Приложение для создания магазинов (Builder)
  • Приложение магазина (Storefront)
  • Приложение маркетплейса (Marketplace)
• ТЕСТИРОВАНИЕ ПРИЛОЖЕНИЯ
  • Модульное тестирование
  • Системное тестирование
  • Выводы по главе
• ЗАКЛЮЧЕНИЕ
• СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ