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

Шаг 1. Заглушки и моки

Сначала просим нейросеть сделать заглушки страниц вообще без логики, с мок-данными.

Смотрим, что получилось и дорабатываем страницы.
Высокая вероятность, что на этом этапе вы увидите, чего вам не хватает.

Реальный пример:

Когда я делал страницу поиска по госномеру с моками, понял: хорошо бы прикрутить механизм обратной связи, верно ли указан номер телефона для этого авто в базе.

Если бы сразу подключал API, пришлось бы переделывать и фронт, и бэкенд.

С моками доработал схему БД и роуты за 10 минут, до подключения фронта к реальным данным.

Шаг 2. Только теперь — подключаем API

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

Порядок простой:

+ общий API-клиент с baseURL и хранением токенов,
+ авторизация,
+ реальные запросы: поиск машин, поиск квартир, логи, админ-раздел.

Для того, чтобы проще было тестировать, можно попросить нейросеть наполнить БД тестовыми данными.

Шаг 3. Чиним то, что ломается

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

Шаг 4. Стили в самом конце

И вот только теперь, когда всё работает, я попросил нейросеть поработать над UI.

Почему стили в конце:

Если делать UI сразу, нейросеть будет ломать вёрстку при каждом изменении логики при работе со страницами.

Когда логика стабильна — UI делается один раз и не ломается.

Важное наблюдение

В бэкенде ошибок было много — нужен был 06-ai-rules.md и ревью второй нейросетью.

При работе с фронтендом ошибок гораздо меньше и они проще исправляются.

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

--

И вот вёрстка оживает. Идея превращается в работающее решение.

Без погружения в специфику языка.
Без чтения документации.
С опорой на логику, правила и последовательный процесс.
Используя бесплатные тарифы нейросетей.
Мы собрали реальное, рабочее приложение!

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

--

0️⃣ серия: идея и формат
1️⃣ серия: схема БД
2️⃣ серия: выбор инструментов
3️⃣ серия: вайбкодим бэкенд
4️⃣ серия: вайбкодим фронтенд
5️⃣ серия: итоги