Сайт: 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/

Но многие предприниматели совершают одну и ту же ошибку — экономят на визуальном образе бренда.

В итоге получается типичная ситуация:
у компании есть продукт, есть реклама, есть трафик…
но конверсии и продажи ниже, чем могли бы быть.

Причина часто кроется в том, что у бизнеса нет сильного бренда

Люди покупают глазами

Первое впечатление формируется буквально за несколько секунд.

Когда человек видит компанию впервые, он оценивает:

• логотип
• цвета
• стиль дизайна
• сайт или страницу
• упаковку или карточку товара

И именно в этот момент подсознательно возникает ощущение:

«Это серьёзная компания»
или
«Какая-то кустарщина»

Даже если продукт хороший.

Плохой дизайн автоматически снижает доверие.

Брендинг — это не просто логотип

Многие думают, что брендинг — это просто красивая картинка.

На самом деле это целая система визуальной коммуникации.

Она включает:

• логотип
• фирменные цвета
• типографику
• графические элементы
• стиль изображений
• дизайн сайта и рекламы
• единый визуальный язык бренда

Когда всё это работает вместе, компания начинает выглядеть дороже и профессиональнее.

Как брендинг влияет на продажи

1. Повышает доверие

Люди покупают у тех, кому доверяют.

Когда бренд выглядит профессионально, пользователь автоматически думает:

«Эти ребята знают, что делают»

И вероятность покупки возрастает.

2. Увеличивает конверсию

Хороший дизайн помогает:

• лучше донести ценность продукта
• сделать интерфейс понятнее
• выделить ключевые элементы
• правильно направить внимание пользователя

В результате один и тот же трафик начинает приносить больше продаж.

3. Делает компанию запоминающейся

Большинство компаний выглядят одинаково.

Типовой логотип
типовые цвета
типовой сайт

Сильный брендинг решает эту проблему.

Когда визуальный стиль уникален, люди начинают узнавать компанию среди конкурентов.

4. Позволяет продавать дороже

Это один из самых недооценённых факторов.

Бренд влияет на восприятие цены.

Например:

• два одинаковых продукта
• одинаковые характеристики
• одинаковая реклама

Но один бренд выглядит дешево, а второй премиально.

Угадайте, у кого будут покупать дороже.

Когда бизнесу особенно нужен брендинг

Хороший брендинг критически важен если:

• вы запускаете новый продукт
• выходите на конкурентный рынок
• планируете масштабировать рекламу
• работаете с маркетплейсами
• хотите увеличить средний чек

Фактически брендинг — это фундамент всей маркетинговой системы.

Итог

Логотип и брендинг — это не просто дизайн.

Это инструмент, который:

• повышает доверие
• увеличивает конверсию
• делает бренд узнаваемым
• позволяет продавать дороже

Поэтому компании, которые инвестируют в визуальный образ, почти всегда выигрывают у конкурентов.

Если вы планируете запускать новый проект или обновить визуальный стиль —
правильный брендинг может стать одним из самых прибыльных вложений.

Разберём основные ошибки 👇

1. Сайт есть, но нет воронки

Многие сайты выглядят красиво, но не ведут пользователя к действию.
Нет логики, нет понятного пути, нет чёткого предложения.

Вопрос:
Понимает ли клиент за 5 секунд, что вы предлагаете и почему должен выбрать вас?

Если нет — он уходит.

2. Дизайн не вызывает доверия

Устаревший визуал, перегруженные блоки, странные шрифты, кривые отступы —
всё это снижает доверие к бизнесу.

Сайт — это первое впечатление.
И если он выглядит дешёво — клиент считает дешёвой и компанию.

3. Плохой пользовательский опыт (UX)

Если:
— сайт долго грузится
— неудобно оставить заявку
— кнопки теряются
— форма сложная

Заявок не будет.

Современный сайт должен быть быстрым, логичным и максимально простым.

4. Нет смысла в трафике

Можно лить рекламу бесконечно.
Но если страница не конвертирует — деньги просто сгорают.

Сначала — структура и логика.
Потом — масштабирование.

Что делать?

Не «добавить блок».
Не «поменять цвет кнопки».
А пересобрать систему:

— продумать бизнес-логику
— сделать понятную структуру
— усилить оффер
— обновить дизайн
— оптимизировать UX

Сайт — это инструмент продаж, а не визитка.

Если ваш сайт не приносит прибыль —
его нужно не поддерживать, а усиливать.

Vasilyev — дизайн, веб-разработка, видео.
Создаём digital-продукты, которые работают на бизнес.

Фраза «у нас есть сайт, но заявок с него нет» — одна из самых частых, которую слышат разработчики и маркетологи.

При этом в большинстве случаев проблема не в нише, не в рекламе и даже не в конкуренции.

Проблема — в ошибках, допущенных на этапе разработки сайта.

В этой статье разберём 7 ключевых ошибок, из-за которых сайты не приносят клиентов, и объясним, как их избежать.

Ошибка №1. Сайт делают «просто чтобы был»

Одна из самых распространённых причин.

Сайт создаётся без чёткого ответа на вопросы:

• что именно он должен продавать;
• какое действие должен совершить пользователь;
• зачем клиенту оставлять заявку именно здесь.

В результате получается набор страниц:

• «О нас»;
• «Услуги»;
• «Контакты».

Формально сайт есть, но бизнес-задачи он не решает.

Ошибка №2. Дизайн ради красоты, а не ради результата

Красивый сайт ≠ эффективный сайт.

Очень часто дизайн делается:

• по трендам;
• «как у конкурентов»;
• «чтобы было вау».

Но при этом:

• пользователь не понимает, куда нажать;
• ключевая информация теряется;
• путь к заявке перегружен.

Ошибка №3. Отсутствие внятной структуры и логики

Даже хороший контент не работает, если структура сайта хаотична.

Частые проблемы:

• слишком много услуг без пояснений;
• одинаковые страницы с разным названием;
• нет логики переходов;
• пользователь «теряется».

Ошибка №4. Сайт не адаптирован под мобильные устройства

Несмотря на то, что мобильный трафик часто составляет 60–80%, многие сайты всё ещё:

• плохо читаются на телефоне;
• имеют мелкие кнопки;
• ломают вёрстку;
• загружаются медленно.

Пользователь с телефона:

• менее терпелив;
• быстрее принимает решение;
• чаще закрывает сайт при дискомфорте.

Ошибка №5. Нет доверия к сайту и компании

Даже если предложение хорошее, пользователь не оставит заявку, если:

• непонятно, кто стоит за проектом;
• нет кейсов или примеров работ;
• отсутствуют отзывы;
• сайт выглядит «сырым».

Ошибка №6. Сайт не автоматизирует процессы

Многие сайты до сих пор:

• не принимают оплату;
• требуют ручной обработки заявок;
• зависят от переписок в мессенджерах;
• не имеют личных кабинетов.

В результате:

• клиент ждёт ответа;
• теряется часть заявок;
• бизнес тратит время на рутину.

Ошибка №7. Нет аналитики и понимания, что работает

Последняя, но не менее важная ошибка — отсутствие анализа.

Если вы не знаете:

• откуда приходят пользователи;
• где они уходят;
• какие страницы работают,
  то сайт невозможно улучшать.

Итог

Сайт становится «чёрным ящиком»:

• заявок нет;
• причины непонятны;
• решения принимаются наугад.

Почему большинство сайтов не приносят клиентов

Если собрать всё вместе, получается простой вывод:

Сайт не приносит клиентов не потому, что «он плохой»,
а потому, что он не задуман как бизнес-инструмент.

Чаще всего это:

• набор страниц;
• красивый дизайн;
• отсутствие логики и автоматизации.

Что делать, если сайт не работает

Перед переделкой сайта важно задать себе вопросы:

• какую задачу он решает;
• что должен сделать пользователь;
• где он теряется;
• что можно автоматизировать.

Иногда сайт нужно не «освежить», а перепроектировать.

Итог

Работающий сайт — это не шаблон и не трендовый дизайн.
Это продуманная система, которая:

• ведёт пользователя;
• вызывает доверие;
• упрощает процессы;
• работает на результат.

Если сайт не приносит клиентов — почти всегда причина кроется в одной (или нескольких) из этих ошибок.

Если вы понимаете, что вашему бизнесу нужен не просто сайт, а работающий инструмент, который приводит клиентов и автоматизирует процессы, — посмотрите наш подход и кейсы по разработке сайтов и сервисов под ключ:

👉 https://vasilyev.design

Мы проектируем сайты не «для галочки», а под реальные бизнес-задачи и рост.

📌 Задача проекта

Перед стартом разработки у клиента была чёткая цель — создать сервис, который:

• позволяет продавать услуги онлайн;
• автоматизирует процесс покупки;
• даёт пользователю удобный личный кабинет;
• обеспечивает прямое общение с исполнителем;
• масштабируется без постоянных доработок «на костылях».

Важно было сделать рабочий продукт, а не витринный сайт «для портфолио».

🎨 Дизайн: не показательный, а функциональный

Дизайн в этом проекте — осознанно не «кричащий».

Мы реализовали:

• тёмную и светлую тему;
• минималистичный интерфейс;
• фокус на удобстве и логике, а не визуальных эффектах.

Дизайн создавался по хотелкам клиента и под его целевую аудиторию.
Он не про демонстрацию трендов, а про комфортную ежедневную работу пользователей внутри сервиса.

⚙️ Фронтенд и бэкенд: полноценный сервис на Laravel

Проект реализован как полноценное веб-приложение:

• фронтенд — адаптивный интерфейс для всех устройств;
• бэкенд — Laravel, как надёжная основа для логики сервиса;
• продуманная архитектура под рост и доработки.

Мы сразу закладывали логику так, чтобы:

• добавлять новые функции без переписывания ядра;
• масштабировать сервис;
• поддерживать стабильную работу при росте нагрузки.

🛒 Магазин услуг и товаров

На сайте реализован магазин, где пользователь может:

• выбрать нужную услугу / товар;
• оплатить покупку;
• получить доступ к дальнейшему взаимодействию автоматически.

👤 Личный кабинет пользователя

Ключевой элемент проекта — личный кабинет.

В нём пользователь может:

• управлять своим аккаунтом;
• пополнять баланс (через онлайн-кассу и PayPal);
• видеть историю покупок;
• получать доступ к купленным услугам;
• общаться с исполнителем прямо на сайте.

Все процессы автоматизированы — без ручных подтверждений и сообщений «в поддержку».

💬 Онлайн-чат после покупки

Одна из ключевых фич проекта — онлайн-чат, который открывается автоматически после покупки услуги.

Это позволяет:

• сразу начать общение с исполнителем;
• вести диалог внутри сервиса;
• не переходить в сторонние мессенджеры.

Таким образом, сервис удерживает пользователя внутри платформы и контролирует весь процесс взаимодействия.

🔐 Авторизация и уведомления через VK и Telegram

Для удобства пользователей мы реализовали:

• привязку ВКонтакте и Telegram;
• быструю авторизацию через соцсети;
• получение уведомлений о событиях на сайте.

Например:

• пришло новое сообщение в чате;
• изменился статус заказа;
• появилось обновление по услуге.

Это снижает количество пропущенных сообщений и повышает вовлечённость пользователей.

🧩 Админ-панель: управление сервисом

Со стороны администратора реализована полноценная админка.

Через неё можно:

• управлять товарами и услугами;
• открывать и контролировать чаты;
• получать уведомления о новых заказах в Telegram и VK;
• модерировать отзывы;
• управлять разделами сайта;
• контролировать работу сервиса без вмешательства разработчиков.

Админ-панель создавалась с прицелом на ежедневную работу, а не «для галочки».

🚀 Результат

В итоге клиент получил полноценный интернет-сервис, который:

• продаёт услуги онлайн;
• автоматизирует оплату и доступ;
• объединяет пользователей и исполнителей;
• работает как единая система;
• готов к масштабированию и развитию.

Это не просто сайт, а цифровой продукт, который можно развивать как бизнес.

🔗 Ссылки на проект

• Сайт проекта: https://tymanov.net/

✍️ Вывод

Разработка сайта под ключ — это не про шаблоны и быстрые решения.
Это про проектирование логики, автоматизацию процессов и понимание, как сервис будет жить дальше.

Мы в Vasilyev Design разрабатываем сайты и сервисы под ключ:
от дизайна и архитектуры — до сложных личных кабинетов, оплат и администрирования.

Если вам нужен не просто сайт, а рабочий онлайн-сервис — такой подход критически важен.

В этом кейсе расскажем, как мы разработали сайт под ключ для таролога Юлии Петровой и превратили её онлайн-продукт в полностью автоматизированную платформу продаж.

📌 Задача клиента

Юлия обратилась к нам с понятным, но объёмным запросом:

• создать профессиональный сайт под личный бренд;
• уйти от ручной выдачи доступов и проверки оплат;
• запустить онлайн-продажу курсов с автоматическим доступом;
• получить удобную админку без необходимости разбираться в технических деталях;
• заложить фундамент для масштабирования проекта.

Важно было не просто «сделать сайт», а выстроить рабочую систему, которая будет продавать и обслуживать клиентов без постоянного участия владельца.

🎨 Дизайн: индивидуально и в стиле эксперта

Мы начали с дизайна.

Для нишевых экспертов (тарологи, коучи, психологи) визуал — это половина доверия. Поэтому:

• разработали индивидуальный дизайн, а не шаблон;
• опирались на философию бренда и подачу Юлии;
• сделали акцент на спокойные, уверенные цвета и чистую типографику;
• адаптировали интерфейс под мобильные устройства (основной трафик).

Задача дизайна — не «удивить», а продать и удержать внимание.

⚙️ Разработка: фронтенд + бэкенд

Проект был реализован полностью под ключ:

• фронтенд — быстрый, адаптивный, с понятной навигацией;
• бэкенд — надёжная логика работы сайта и личного кабинета;
• продуманная структура страниц под маркетинг и SEO.

Мы сразу закладывали архитектуру так, чтобы сайт можно было без проблем развивать: добавлять новые курсы, продукты, форматы.

💳 Онлайн-оплата и автоматизация продаж

Один из ключевых этапов — автоматизация продаж.

Что сделали:

• подключили онлайн-кассу PayPal;
• настроили корректную обработку платежей;
• автоматизировали процесс покупки курсов;
• исключили ручную работу после оплаты.

Теперь схема выглядит так:

Покупка → Оплата → Автоматическое создание аккаунта → Мгновенный доступ к материалам

Без сообщений в директ, без «я оплатил, а где доступ?».

👤 Личный кабинет для клиентов

Мы внедрили полноценный личный кабинет, где пользователь:

• видит купленные курсы;
• получает доступ к материалам автоматически;
• использует один аккаунт для всех продуктов;
• не зависит от ручной поддержки.

Для эксперта это означает:

• меньше рутины,
• меньше ошибок,
• выше доверие клиентов.

🧩 Админ-панель для владельца проекта

Отдельное внимание — удобству управления.

Мы разработали админ-панель, в которой можно:

• добавлять и редактировать курсы;
• управлять товарами и контентом;
• просматривать историю покупок;
• анализировать продажи и активность пользователей.

Без программиста. Без сложных интерфейсов. Всё интуитивно.

🚀 Итог

В результате Юлия получила не просто сайт, а готовый цифровой продукт, который:

• продаёт курсы 24/7;
• работает в автоматическом режиме;
• масштабируется без переделок;
• усиливает личный бренд.

🔗 Ссылки на проект

• Полный кейс: https://vasilyev.design/case/utaro365
• Сайт клиента: https://www.utaro365.com