6 часов вайбкодинга
| Результат

В прошлый раз я написал о том, шо такое вайбкодинг и с чего начать изучение одного из его инструментов — Cursor. Сегодня хочу поделиться тем, что получилось сделать за 6 часов работы в Курсоре без определенного плана действий, просто с целью познакомиться с прилой. Я решил сделать наброски сервиса по сдаче недвижимости в аренду

Карточки объектов
На главной есть карточки объектов, информация для которых тянется с таблицы в Airtable, которую я подключил по API. Фотографии в галерее переключаются при наведении курсора. При клике карточка открывается в модальном окне с формой заявки — после отправки появляется тост с подтверждением успешной операции.

Избранное
Объект можно добавить в Избранное и можно затем просматривать этот список. У иконки Избранного есть каунтер, который показывает кол-во добавленных объектов. Избранное раскрывается в шторке, где карточки уже имеют горизонтальную верстку

Форма обратной связи
Сделана форма с помощью которой можно предложить объект для сдачи. При отправке формы появляется тост с сообщением об успехе

Поиск
Сделал инпут text_autocomplete на главной странице, который при вводе значения показывает доступные из списка

Адаптация под мобилку
Полностью адаптировал под мобильную версию: хедер сворачивается в бургер-меню, модалки превращаются в bottom_sheet, тосты появляются сверху (на видео нет, но просто поверьте)

P.S. Я не заходил 2 недели в проект и когда зашел сегодня, то увидел, что карточки перестали выводиться, а когда исправил ошибку, то они начали выводиться на весь экран и наклыдываться друг на друг, в общем, цирк какой-то. Пришлось около часа ругаться с курсором и получилось восстановить прошлый прогресс, но в модалке не получилось пока победить верхний контейнер с фото и он все равно имеет внутренний пэддинг, но сейчас нет времени исправлять, поэтому залил как есть)

Гайд по эффективной работе с Cursor

Основное
Всегда советуйтесь с ИИ-агентом — что делать дальше и как лучше реализовать. Просите подробных объяснений непонятных моментов.
Используйте дизайн-систему с самого начала — это обеспечит консистентность интерфейса.
Избегайте Chat GPT — очень тупой. Используйте Gemini или Claude (доступен на платной версии).
Разделяйте архитектуру — делите большие проекты на Frontend и Backend части.

Обязательные файлы для проекта
В начале разработки создайте три ключевых файла:
scratchpad — для тестирования кусков кода без добавления в основной проект
memorybank — актуальная база знаний по проекту
Для создания: напишите "Инициализируй memory bank"
Для обновления: "Актуализируй memory bank" в конце чата
Для загрузки: "Изучи memory bank" чтобы ИИ был в курсе всего проекта
lessons_learned — для фиксации ошибок и предотвращения их повторения

Настройка правил проекта
Задайте Rules — правила работы ИИ с вашим проектом:
"Всегда используй TypeScript вместо JavaScript"
"Пиши краткие и понятные комментарии к функциям"
"Не используй сторонние библиотеки без моего разрешения"

Организация работы
Создавайте новый чат для каждой фичи — это предотвратит путаницу модели (не забывайте указывать контекст из предыдущих чатов).
Интегрируйте Context7 — это mcp сервер, который предоставляет актуальную документацию кода для лучшего понимания проекта
Репозиторий: github.com/upstash/context7
Можно кинуть ссылку и написать "use context7"

Дополнительные возможности
Изучите плагины Cursor — они значительно расширяют функциональность.
Подгружайте документацию — добавляйте ссылки на нужную документацию API и других инструментов.
Используйте .env файлы — для безопасного хранения API-ключей и других чувствительных данных.
Прикрепляйте документы — добавляйте ссылки на документы для последующих обращений.
MCP интеграция — используйте подключение MCP, это поможет воссоздать макеты прямо из Figma. (точность не 100%)

Был ли у кого-то опыт вайбкоддинга и какие остались впечатления? 👀

💬 Тултип