Фронтенд MVP модного сервиса с ИИ-стилистом и цифровым гардеробом

Заказчик это технологический стартап в сфере моды и онлайн-шопинга. Он делал MVP сервиса, который помогает подбирать одежду под тренды и личный стиль.

Как устроен продукт. Пользователь заходит через бота, регистрируется автоматически и заполняет анкету о себе. Дальше он с помощью ИИ-стилиста собирает личный цифровой гардероб и может его редактировать. Каждый день ИИ-стилист присылает новую подборку образов под погоду и сезон, а пользователь может оценить образ. Интерфейс переведён на несколько языков, а при первом входе пользователь проходит интерактивный тур по основным функциям.

Фронтенд-разработчик Фортех работал на проекте с августа по декабрь 2024 года, около четырёх месяцев. В команде заказчика были бэкенд-разработчик, дизайнер и руководитель продукта.

Задача

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

Ограничения задачи

Код достался от предыдущей команды, и проект не собирался: в нём были конфликты, которые появились ещё до нас.

Это MVP, поэтому ошибки нужно было закрывать быстро, а новые экраны делать параллельно с исправлениями.

Решение

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

Вход и анкета. Разработчик исправил авторизацию: пользователи снова могут войти и открыть закрытые страницы. Заработала кнопка на странице регистрации, на экране анкеты появилась кнопка «Continue», а ошибки в первой части анкеты исправлены.

Лендинг. Исправил ошибки на лендинге и адаптивную вёрстку первых двух секций, поправил шапку и прокрутку сайта, добавил метаинформацию для страниц.

Новые экраны. Сверстал экраны профиля, деталей образа и избранных образов, создавал новые интерфейсные компоненты и дорабатывал существующие, делал адаптивную вёрстку страниц.

Мини-приложение. Разработал мини-приложение в Telegram, через которое пользователь работает с сервисом.

Код. Работал с серверными компонентами Next.js, подключал фронтенд к бэкенду через REST API, занимался рефакторингом и оптимизацией кода.

Сайт сервиса работает на своём домене: проект, который не собирался после прошлой команды, снова собирается и разворачивается.

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

Частые вопросы

Что делать, если проект после прежней команды не собирается?
Найти и разрешить конфликты в коде и зависимостях, которые мешают сборке, и только потом браться за новые задачи. В этом проекте с этого и начали, иначе сайт нельзя было развернуть.

Сколько людей нужно, чтобы довести MVP до рабочего состояния?
Здесь фронтенд вёл один разработчик Фортех вместе с бэкенд-разработчиком, дизайнером и руководителем продукта заказчика.

Можно ли добавить к веб-сервису мини-приложение в Telegram?
Да. Здесь у сервиса есть и сайт, и мини-приложение в Telegram, и фронтенд работает с бэкендом продукта через REST API.

Делает ли Фортех фронтенд для стартапов?
Да. В этом проекте наш разработчик подключился к MVP модного сервиса и за четыре месяца поднял сайт, починил ключевые экраны и сверстал новые.