Ordify — SaaS-платформа для приёма заказов через Telegram и Max (React 18 Next.js)

Ordify — это готовая система для приёма заказов через мессенджеры Telegram и Max (VK). Кофейни, рестораны, барбершопы и другие бизнесы получают собственное Mini App для клиентов, веб-админку для управления заказами и личный кабинет на app.ordify.ru для мониторинга.

Сайт: ordify.ru

Личный кабинет: app.ordify.ru

Демо-бот: https://t.me/dodotestordify_bot

Стек технологий

Mini App (клиент)

React 18, Vite, TypeScript, Tailwind CSS, Zustand

Админ-панель

React 18, Vite, TypeScript, Tailwind CSS, Socket.IO

Лендинг

Next.js 14 App Router, Tailwind CSS, Framer Motion

Личный кабинет (SaaS)

Next.js 14 App Router, Prisma ORM, JWT (jose)

Backend

Express, TypeScript, Prisma v5, PostgreSQL, Socket.IO

Инфраструктура

Ubuntu VPS, Nginx, PM2, Let's Encrypt, shell-скрипты

Архитектура

Монорепозиторий из 5 приложений:

ordify/
├── apps/backend/      — API + WebSocket сервер
├── apps/mini-app/     — Telegram/Max Mini App (React SPA)
├── apps/admin/        — Веб-админка (React SPA)
├── apps/landing/      — Маркетинговый сайт (Next.js SSR)
├── apps/app/          — SaaS-платформа (Next.js SSR)
└── deploy/            — Скрипты автодеплоя

Мультитенантная модель: каждый клиент получает изолированную базу данных, собственный PM2-процесс бэкенда и поддомен {slug}.ordify.ru. Фронтенды (mini-app, admin) — статика, раздаётся Nginx напрямую.

Ключевые фичи

1. Dual-platform: Telegram + Max

Mini App работает одновременно в Telegram и Max (мессенджер VK). Платформа определяется по URL-хэшу при первом запуске и сохраняется в sessionStorage. Единый интерфейс usePlatform.ts абстрагирует различия SDK:

Telegram: Telegram.WebApp, контакт через requestContact() + polling
Max: WebApp (другой SDK), контакт через requestContact() → Promise

Аккаунты Max и Telegram привязываются по номеру телефона — единый баланс бонусов, единая история заказов.

2. Real-time заказы через Socket.IO

Новый заказ из Mini App мгновенно появляется в админке с push-уведомлением, звуковым сигналом и бейджем. Смена статуса заказа в админке сразу отражается в Mini App клиента.

3. Система модификаторов

Гибкая система дополнений к товарам: группы модификаторов (радио/чекбокс) с привязкой на уровне категории или конкретного продукта. Обязательные группы, лимит выбора, наценки — всё через bottom sheet в Mini App.

4. Бонусная система

Начисление, списание и возврат бонусов. Баланс синхронизирован между Telegram и Max через resolveCanonicalId() — все операции идут на каноничную TG-запись. Бонусы доступны только на тарифе Business, автоотключаются при понижении.

5. Автоматический провижнинг

Создание нового магазина из SaaS-дашборда запускает полностью автоматический процесс: git clone, создание PostgreSQL базы, генерация .env, настройка Nginx с SSL (Let's Encrypt), запуск PM2-процесса. Через 30-60 секунд магазин доступен по {slug}.ordify.ru.

6. OAuth авторизация (Google, Яндекс, VK ID)

Личный кабинет поддерживает вход через Google, Яндекс и VK ID. VK ID использует PKCE flow. Если провайдер не отдаёт email — двухшаговая верификация: ввод email → 6-значный код на почту.

7. Биллинг и тарифы

Три тарифа: Start (990 ₽/мес), Pro (3990 ₽/мес), Business (7490 ₽/мес). 14-дневный бесплатный пробный период Business. Автопродление с баланса, SMTP-уведомления о приближении конца подписки, автопонижение при нехватке средств.

8. Маркетинговый лендинг

Лендинг на Next.js 14 с SSR, анимациями Framer Motion, полной SEO-оптимизацией (10 SEO-страниц по городам и нишам, JSON-LD, sitemap, robots). Контактная форма отправляет заявки в Telegram-бот. Cookie consent и 6 юридических документов (пользовательское соглашение, политика конфиденциальности и др.).

9. Рассылки

Массовые рассылки клиентам через Telegram и Max с поддержкой изображений, кнопок-ссылок, фильтрацией по аудитории (все / активные за 30 дней), прогресс-баром и статистикой доставки.

10. Аналитика

Встроенные SVG-графики (line chart, bar chart, donut chart) без внешних библиотек. KPI-карточки, топ товаров по количеству и выручке, почасовая тепловая карта, динамика за 7/14/30 дней, распределение доставка/самовывоз и наличные/карта.

Инфраструктура и DevOps

Деплой одной командой: bash update-all.sh — фронтенд собирается один раз, бэкенды обновляются параллельно (до 30 клиентов одновременно через xargs -P), лендинг и платформа отдельными шагами
Canary-деплой: поддержка DEPLOY_GROUP=canary для поэтапного раскатывания
SSL: автоматическая выдача и продление через Certbot
Nginx: раздача статики, проксирование API и WebSocket, кэширование assets с immutable-хэшами
PM2: процесс-менеджер для всех Node.js-сервисов с авторестартом

Мобильная адаптация

Все интерфейсы полностью адаптивны:

Mini App — нативный Telegram/Max look-and-feel
Админка — мобильные карточки вместо таблиц (hidden md:block / md:hidden), полноэкранное боковое меню, адаптивные модалки
Лендинг — отключение тяжёлых анимаций на мобилке, полноэкранное меню, next/font вместо внешних запросов к Google Fonts
Личный кабинет — стекаемые формы, адаптивные сетки

Производительность

Шрифты: next/font/google — скачиваются при билде, отдаются с собственного домена
Анимации: отключаются на мобильных устройствах (< 768px) для плавного скролла
CSS: transition-[property] вместо transition-all — перерисовываются только нужные свойства
Backdrop-filter: отключен на мобилке через CSS media query
Socket.IO: переподключение с exponential backoff

Цифры

2 мессенджера (Telegram + Max)
Автодеплой за 30-60 секунд
Параллельное обновление до 30 клиентов одновременно
6 юридических документов, 10 SEO-страниц
3 OAuth-провайдера (Google, Яндекс, VK ID)
3 тарифных плана с автопродлением

Проект разработан с нуля — от дизайна и фронтенда до серверной инфраструктуры и автоматического деплоя. Дизайн и разработка - https://vasilyev.design/