Ordify - SaaS platform for accepting orders via Telegram and Max (React 18 Next.js)

Ordify - SaaS platform for accepting orders via Telegram and Max (React 18 Next.js)

Ordifyis a ready-made system for receiving orders through Telegram and Max (VK) messengers. Coffee shops, restaurants, barbershops and other businesses receive their own Mini App for clients, a web admin panel for managing orders and a personal account on app.ordify.ru for monitoring.

Website: ordify.ru

Personal account: app.ordify.ru

Demo bot: https://t.me/dodotestordify_bot

Technology stack

Mini App (client)

React 18, Vite, TypeScript, Tailwind CSS, Zustand

Admin panel

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

Landing

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

Personal account (SaaS)

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

Backend

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

Infrastructure

Ubuntu VPS, Nginx, PM2, Let's Encrypt, shell scripts

Architecture

Monorepository of 5 applications:

ordify/
├── apps/backend/ - API + WebSocket server
├── apps/mini-app/ — Telegram/Max Mini App (React SPA)
├── apps/admin/ — Web admin panel (React SPA)
├── apps/landing/ — Marketing site (Next.js SSR)
├── apps/app/ - SaaS platform (Next.js SSR)
└── deploy/ — Autodeploy scripts

Multi-tenant model:each client receives an isolated database, its own backend PM2 process and a {slug}.ordify.ru subdomain. Frontends (mini-app, admin) - static, distributed directly by Nginx.

Key features

1. Dual-platform: Telegram + Max

Mini App works simultaneously in Telegram and Max (VK messenger). The platform is determined by the URL hash on first launch and stored in sessionStorage. A single usePlatform.ts interface abstracts the SDK differences:

• Telegram: Telegram.WebApp, contact via requestContact() + polling
• Max: WebApp (other SDK), contact via requestContact() → Promise

Max and Telegram accounts are linked by phone number - a single bonus balance, a single order history.

2. Real-time orders via Socket.IO

A new order from the Mini App instantly appears in the admin panel with a push notification, sound signal and badge. A change in order status in the admin panel is immediately reflected in the client’s Mini App.

3. Modifier system

Flexible system of additions to products: groups of modifiers (radio/checkbox) linked at the category or specific product level. Mandatory groups, selection limit, markups - all through the bottom sheet in the Mini App.

4. Bonus system

Accrual, write-off and return of bonuses. The balance is synchronized between Telegram and Max via resolveCanonicalId() - all operations go to the canonical TG record. Bonuses are available only on the Business tariff; they are automatically disabled when downgraded.

5. Automatic provisioning

Creating a new store from a SaaS dashboard launches a fully automatic process: git clone, creating a PostgreSQL database, generating .env, setting up Nginx with SSL (Let's Encrypt), launching the PM2 process. After 30-60 seconds, the store is available at {slug}.ordify.ru.

6. OAuth authorization (Google, Yandex, VK ID)

Your personal account supports login via Google, Yandex and VK ID. VK ID uses PKCE flow. If the provider does not provide an email, two-step verification: enter email → 6-digit code by email.

7. Billing and tariffs

Three tariffs: Start (990 ₽/month), Pro (3990 ₽/month), Business (7490 ₽/month). 14-day free trial period Business. Auto-renewal from balance, SMTP notifications when the end of subscription is approaching, auto-downgrade in case of insufficient funds.

8. Marketing landing page

Landing on Next.js 14 with SSR, Framer Motion animations, full SEO optimization (10 SEO pages by city and niche, JSON-LD, sitemap, robots). The contact form sends requests to the Telegram bot. Cookie consent and 6 legal documents (user agreement, privacy policy, etc.).

9. Mailings

Mass mailings to clients via Telegram and Max with support for images, link buttons, filtering by audience (all / active for 30 days), progress bar and delivery statistics.

10. Analytics

Built-in SVG charts (line chart, bar chart, donut chart) without external libraries. KPI cards, top products by quantity and revenue, hourly heat map, dynamics for 7/14/30 days, delivery/pickup distribution and cash/card.

Infrastructure and DevOps

• Deploy with one command:bash update-all.sh - the frontend is assembled once, the backends are updated in parallel (up to 30 clients simultaneously via xargs -P), the landing page and platform are updated in separate steps
• Canary deployment:support DEPLOY_GROUP=canary for step-by-step rolling out
• SSL:automatic issuance and renewal via Certbot
• Nginx:static distribution, API and WebSocket proxying, assets caching with immutable hashes
• PM2:process manager for all Node.js services with auto-restart

Mobile adaptation

All interfaces are fully adaptive:

• Mini App— native Telegram/Max look-and-feel
• Admin— mobile cards instead of tables (hidden md:block / md:hidden), full-screen side menu, adaptive modals
• Landing- disabling heavy animations on mobile, full-screen menu, next/font instead of external requests to Google Fonts
• Personal account— stackable forms, adaptive grids

Performance

• Fonts:next/font/google - downloaded during build, served from its own domain
• Animations:are disabled on mobile devices (< 768px) для плавного скролла
• CSS:transition-[property] instead of transition-all - only the necessary properties are redrawn
• Backdrop-filter:disabled on mobile via CSS media query
• Socket.IO:reconnection with exponential backoff

Numbers

• 2 messengers(Telegram + Max)
• Autodeployin 30-60 seconds
• Parallel updateup to 30 clients simultaneously
• 6 legal documents, 10 SEO pages
• 3 OAuth providers(Google, Yandex, VK ID)
• 3 tariff planswith auto-renewal

The project was developed from scratch - from design and front-end to server infrastructure and automatic deployment.