Альтернатива сайтам и приложениям: Как мы построили маркетплейс услуг, без привязки к региону, внутри Telegram Mini App на React и Node.js
Ещё несколько лет назад бизнес за пределами мессенджеров казался незыблемым. Каждая уважающая себя компания стремилась разработать отдельное нативное мобильное приложение и загрузить его в App Store или Google Play. В 2026 году этот подход всё чаще выглядит как неоправданная трата денег и времени.
Пользователи больше не хотят скачивать десятки тяжелых программ, проходить сложные регистрации и засорять память смартфонов ради разовой услуги. Они хотят получать всё здесь и сейчас, в один клик. Средой, которая решает эти проблемы стал Telegram.
В этой статье мы разберем реальный технический кейс: как мы спроектировали, написали и упаковали в Docker полноценный маркетплейс строительных услуг «СТРОЙЛИНК», для любого региона, работающий прямо внутри Telegram Mini App (TMA).
Мы расскажем о технологическом стеке, архитектуре, монетизации, как сделать из этого продукта прибыльный бизнес.
1. Архитектура и технологический стек проектаМы сразу отказались от конструкторов и простых скриптов на коленке. Для создания долговечного цифрового актива требовался производительный, гибкий и масштабируемый стек промышленного уровня.
Клиентская часть (Frontend)Интерфейс приложения должен работать плавно, имитируя поведение нативного мобильного приложения. Для этого мы использовали:
Runtime и сборка: Node.js 20 и Vite 5 с модульной системой ES modules. Это обеспечивает моментальную сборку и высокую скорость загрузки интерфейса.
Библиотека UI: React 18. Компонентный подход позволил легко реализовать динамическое переключение ролей пользователя (Заказчик ↔ Исполнитель) прямо внутри одного экрана.
Стилизация и UX: Tailwind CSS 3 с глубокой интеграцией системных тем мессенджера через CSS-переменные (--tg-theme-*).
Менеджмент данных: TanStack React Query 5. С его помощью реализованы умные бесконечные ленты заказов (infinite queries) и автоматическое обновление (инвалидация) данных при переключении табов на панели управления.
Среда и API: Node.js 20 и Express 4. Бэкенд обрабатывает запросы быстро и эффективно, используя сжатие данных (compression) для экономии трафика.
База данных: Реляционная СУБД PostgreSQL 15 (в продакшене) под управлением Prisma 5 ORM. Все миграции и структуры таблиц строго типизированы.
Авторизация и безопасность: Никаких форм с логинами и паролями. Безопасность обеспечивается нативным скриптом валидации verifyInitData.js, который проверяет криптографическую подпись строки Telegram WebApp initData на стороне бэкенда при каждом входе. Подделать сессию или украсть чужой аккаунт технически невозможно.
При создании маркетплейса в реальном секторе экономики (строительство и ремонт) мы столкнулись с тремя серьезными задачами. Вот как они были решены на уровне кода.
Вызов1. Легальный прием платежей по всему миру (Telegram Stars)
Прием классических платежей по картам внутри мессенджеров часто упирается в региональные ограничения и санкции. Мы полностью перевели экономику приложения на официальную внутреннюю валюту Telegram Stars (XTR).
Как устроена математика токенов в коде: Пользователь заходит в кошелек, видит баланс, соглашается со встроенной публичной офертой и дисклеймером (LegalDocumentModal) и выбирает пакет токенов (100 / 250 / 500). Фронтенд делает запрос к API POST/api/payments/create-invoice. Бэкенд генерирует инвойс-ссылку через метод createInvoiceLink бота (на базе фреймворка Telegraf 4).
На клиенте вызывается нативное окно WebApp.openInvoice. Пользователь оплачивает Stars в 1 клик через Apple Pay, Google Pay или привязанную к Telegram карту. Бот обрабатывает вебхуки pre_checkout_query и successful_payment, после чего бэкенд идемпотентно (без риска дублирования) фиксирует транзакцию и начисляет токены на баланс профиля.
Внутри системы токены работают как внутренняя валюта: списание 25 токенов за отклик на заказ, 125 токенов за открытие прямых контактов и 500 токенов за покупку подписки S-Pro на 30 дней.
Вызов2. Умная геолокация и мультивалютность без внешних тяжелых карт
Строительный маркетплейс обязан работать точечно: мастер из Минска не должен видеть заказы из Варшавы или Астаны. При этом база данных должна автоматически расширяться.
Для этого мы спроектировали независимый модуль GeoSelectors:
GPS-кнопка: При клике приложение запрашивает геолокацию у Telegram и передает широту и долготу бэкенду. Бэкенд делает быстрый reverse geocode через бесплатный гео-справочник OpenStreetMap Nominatim, определяя страну и город.
Умная строка поиска (Autocomplete): Если пользователь вводит город вручную, система запускает локальный поиск по нашей базе данных PostgreSQL. Если города там нет, бэкенд мгновенно опрашивает Nominatim, находит нужный город и с помощью метода findOrCreateCity динамически создает новую запись в таблице cities прямо на лету.
Привязка валют: Каждая страна имеет жестко заданную валюту по умолчанию (ISO 4217), но модуль позволяет гибко менять валюту в профиле заказа или мастера независимо от географии. Фильтрация лент заказов происходит строго по ID города (cityId).
3. Оптимизация серверного хранилища медиафайлов
Строители и заказчики ежедневно загружают сотни фотографий объектов, договоров и примеров из портфолио. Если принимать файлы как есть, дисковое пространство сервера забьется за неделю, а трафик убьет скорость работы.
Решение: На фронтенде мы внедрили библиотеку browser-image-compression. Любое загружаемое изображение (лимит до 15 МБ) предварительно сжимается прямо на устройстве пользователя до оптимизированного формата JPEG объемом около ~800 КБ с максимальным разрешением до 1920px.
Хранение: На бэкенде с помощью модуля multer файлы принимаются в оперативную память и мгновенно пересылаются по протоколу AWS S3 SDK (@aws-sdk/client-s3) в ультрадешевое и быстрое объектное хранилище Cloudflare R2. Наружу отдаются только готовые публичные HTTPS URL-ссылки через CDN.
Продукт полностью готов к отчуждению и развертыванию на любом независимом сервере. Архитектура проекта упакована в контейнеры, что исключает проблему «на моем компьютере работало, а на сервере сломалось».
Компонент | Технологическое решение |
|---|---|
Контейнеризация | Весь проект описан в docker-compose.yml (отдельные изолированные контейнеры под Nginx фронтенда, Node.js бэкенда и базу данных Postgres). |
CI/CD Автодеплой | Настроен цикл через GitHub Actions. При пуше в ветку main проект автоматически пересобирается и разворачивается на сервере через современную self-hosted платформу Coolify. |
Bootstrap при старте | При запуске Docker-контейнера скрипт entrypoint.sh автоматически применяет новые миграции Prisma к PostgreSQL, запускает патчи проверки гео-схем, импортирует JSON-базу строительных категорий и наполняет справочники стран и валют. Процесс полностью автоматизирован. |
Разрабатывая «СТРОЙЛИНК», мы создали не просто локального бота, а готовое B2B-ядро маркетплейса высокой готовности. Эта архитектура открывает перед нами и нашими клиентами два мощных направления монетизации:
Продажа готового IT-актива (SaaS-шаблон): Этот программный комплекс можно за 7 дней адаптировать под любой регион мира, изменить цветовую гамму, логотипы и запустить аналогичный маркетплейс в любой другой нише — от клининга и ремонта авто до бьюти-сферы и аренды спецтехники. Бизнес получает готовый цифровой продукт, экономя месяцы работы команды разработчиков и тысячи долларов бюджета.
Кастомная разработка под ключ: Данный кейс наглядно демонстрирует наши стандарты кодинга. Мы умеем проектировать отказоустойчивую бизнес-логику, внедрять легальные международные платежи, связывать интерфейсы с CRM-системами и работать со сложными гео-зависимыми структурами данных.
Мир меняется, и побеждают те бизнесы, которые умеют сокращать путь к своему клиенту. Telegram Mini Apps — это самый короткий путь в карман вашего потребителя в 2026 году.
Контакты для связи и демонстрации:
Изучить работу маркетплейса вживую (Демо-бот): @StroyConsultant_bot
Наш официальный сайт и портфолио: synexhub.com
Обсудить покупку готового решения или заказать кастомную разработку: @ValentinKuchynski