Onlys: личный кабинет инвестора, фронтенд и бэкенд
Клиент:
Onlys, токены проектов с AI-инфлюенсерами
Сегмент:
Web3, AI-инфлюенсеры
Результат:
Кабинет и API запущены
Направление:
Разработка веб-сервисов
Стек:
React, Node.js, Fastify, Docker
Задача
Onlys выпускает токены проектов с AI-инфлюенсерами: держатели получают долю выручки проекта. Лендинг onlys.fun уже работал, а личного кабинета у инвесторов не было.
Нужен был кабинет, где инвестор входит без пароля, выбирает проект, покупает токены и видит портфель и выплаты. Дизайн должен был продолжать лендинг, а данные идти из собственного бэкенда.
Что сделали
- Спроектировали фронтенд по Feature-Sliced Design: страницы, виджеты, действия пользователя и сущности лежат отдельными слоями, новый раздел добавляется без правки старых.
- Сверстали кабинет на React 18 и Vite: каталог проектов с фильтром, раздел пресейла, карточка проекта с галереей и прогрессом сбора, раздел выплат с графиком по месяцам и выгрузкой в CSV.
- Перенесли в кабинет стиль лендинга: шрифты, салатовый акцент, анимации на Framer Motion. Графики нарисовали на SVG, без тяжёлых библиотек.
- Перевели фотографии в WebP: вес картинок кабинета снизился с 9,3 до 0,3 МБ.
- Написали бэкенд на Node.js и Fastify: API каталога, портфеля и истории выплат на api.onlys.fun.
- Сделали вход через Google: кабинет не спрашивает пароль и хранит только email и публичное имя, сессия живёт в защищённой cookie.
- Подключили покупку токенов: кабинет выставляет счёт и переводит инвестора на страницу оплаты.
- Настроили выкладку: Docker и Traefik на сервере, GitHub Actions выкатывает обновления после каждого пуша в основную ветку.
Итог
Кабинет работает на app.onlys.fun, API на api.onlys.fun. Инвестор входит через Google, выбирает проект, оплачивает токены и видит портфель и выплаты в одном месте.
Фронтенд и бэкенд разделены: новые проекты и данные появляются через API без пересборки интерфейса, а обновления выходят сами после пуша в репозиторий.
