С нуля собрали Echo — эхо-сессии с ИИ, журнал, кабинет и подписки на полном стеке: Next.js, Strapi V5, OpenAI и NowPayments. Ключи и платёжные операции закрыты на сервере; продукт единый от первого экрана до оплаты.
Ключевой результат
−40% кликов до оплаты
3
Согласованных потоков (гость → пользователь → подписка)
6+
Маршрутов приложения (сессия, журнал, аккаунт, auth и др.)
5
Ролей и сценариев доступа в Strapi
6
Логических модулей продукта
Контекст
Cognitive Echo — платформа рефлексии с ИИ: эхо-сессии, журнал, кабинет, монетизация. Выполнили полную разработку для владельца: публичная зона, приложение и серверная часть; клиент никогда не получает секреты к модели и платёжному API.
Продукт хорош тогда, когда человек после сессии чувствует ясность — а не усталость от интерфейса.
Echo заточен под взрослую аудиторию, которая выделяет время одной теме без шума мессенджеров. Короткие реплики и скачки темы уступают место структурированной эхо-сессии и глубине диалога. Продукт стоит на четырёх опорах: эхо-сессия как ядро, журнал прошлых тем, аккаунт, подписка с оплатой в момент осознанной ценности; вся платёжная логика исполняется на бэкенде.
Цель — непрерывный сценарий от первого визита до регулярного использования и оплаты и ощущение одного приложения, а не набора страниц. На этапе до высоких макетов утвердили три потока — гость, пользователь, подписчик — с явными точками логина и оплаты, карту экранов, связи «экран → API», состав MVP и управляемые риски внешних сервисов (языковая модель и эквайринг) сразу в UX и в защите сервера.
Интерфейс держит тёмную тему, дизайн-токены и Inter под длинное чтение и ввод без визуальной конкуренции с текстом: реплики ассистента и поле ввода формируют одну колонку. На мобильном сохраняются те же приоритеты: крупные зоны нажатия, компактная шапка, сценарий не перестраивается при смене ширины окна.
Первый экран работает как порог в сессию: одно главное действие, без длинной ленты отвлекающих блоков; ощущение «открыл блокнот», а не маркетинговой витрины.
Узкая колонка повторяет ту же линию сценария, что и широкий экран: пользователь не переучивает продукт при смене устройства. Меняется плотность и компоновка, порядок действий остаётся прежним.
Приложение замкнуто в понятном контуре: активная эхо-сессия, архив в журнале, аккаунт, поток `/auth`, расширение collective-echo. Состояние авторизации согласовано с доступом к журналу и платёжным шагам; мёртвых веток в навигации нет. Клиент построен на Next.js (App Router), React и TypeScript; стили — Tailwind и семантические переменные для токенов; данные приходят через REST Strapi; сценарная логика сосредоточена в сервисном слое и хуках; ответы языковой модели доходят до браузера только через бэкенд. Серверная часть — Strapi V5 на TypeScript: роли, ограничение частоты запросов, аудит действий, подписки и платёжные транзакции; интеграции OpenAI и NowPayments выполняются исключительно на сервере; в разработке — SQLite, в продакшене — PostgreSQL. Для публичных страниц заданы осмысленные заголовки и описания через Metadata API, выдержана логичная иерархия заголовков; Open Graph настроен для аккуратного превью ссылки в мессенджерах; растровая графика отдаётся через next/image.
Три этапа, которые превратили задачу в работающий продукт.
Предпроектная аналитика
01Утвердили состав аудиторий и порядок сценариев: гость, зарегистрированный пользователь, подписчик — с жёстко прописанными точками логина и оплаты. Составили перечень экранов, контракт «экран → API», порядок навигации и модель сущностей для CMS. В MVP вошли эхо-сессия, журнал, аккаунт и полный цикл подписки. Требования к UX при сбоях и лимитах внешних API (модель, эквайринг) и контрмеры на бэкенде зафиксировали до финальной визуальной полировки.
Дизайн и фронтенд
02Задали визуальный язык на ограниченном наборе токенов: тёмный фон, поверхности, бренд, лавандовый акцент для действий без крика «нажми меня». Настроили типографику Inter и вертикальный ритм под длинные тексты; экран сессии читается как единая колонка диалога и ввода. Собрали клиент на Next.js (App Router) и TypeScript с Tailwind и CSS-переменными; обмен с Strapi через REST; бизнес-логику сосредоточили в сервисном слое и хуках. Публичные маршруты получили единый подход к заголовкам и описаниям через Metadata API; события аналитики ограничили измеримыми шагами воронки. Адаптив повторяет десктопный сценарий без смены модели поведения.
Бэкенд, интеграции и передача
03Развернули Strapi V5 на TypeScript: контент, роли, кастомные контроллеры вне шаблонного CRUD, аутентификация, кто видит журнал и кто инициирует оплату, rate limiting, аудит, подписки и проведённые платежи как рабочий контур. OpenAI обслуживает диалог эхо-сессии, NowPayments — оплаты; оба контура уходят из браузера на сервер с централизованным логированием и контролем нагрузки. Фронт получает согласованное состояние через внутренние эндпоинты. Разделили dev и prod; данные ведём от SQLite в разработке к PostgreSQL в продакшене. Зафиксировали сценарии развёртывания и развития тарифов в документации репозитория.
Стек
Next.jsTypeScriptReactTailwind CSSStrapiOpenAINowPaymentsНапишите на почту или в Telegram — кратко опишите задачу, сроки и контекст. Вернёмся с понятным следующим шагом: оценкой, структурой работ или предложением по запуску.