Project Knowledge: Правила работы с Bolt.new для студентов

Главная цель

Сделать работающий веб-проект, который:

• выглядит аккуратно
• не ломается при обычных действиях
• публикуется в интернет (Netlify)
• имеет базовое SEO
• может хранить данные (Supabase)

Успех: сайт открывается по ссылке, пользователь может выполнить ключевое действие (например: создать запись/отправить форму/войти).

1) Как мы работаем с Bolt (самое важное)

Правило 1: Сначала план, потом код

Перед любыми изменениями Bolt должен написать:

• план на 5–8 шагов
• какие файлы он будет менять

Только после этого — правки.

Правило 2: Минимальные изменения

• Не переписывать весь проект "по красоте".
• Исправлять ровно то, что нужно.
• Если нужно много менять — делаем по частям, шаг за шагом.

Правило 3: Ничего не удалять молча

• Нельзя удалять функционал или файлы без объяснения.
• Если что-то "лишнее" — предложить вариант, но не удалять автоматически.

2) Что можно и что нельзя менять

Можно

• добавлять новые компоненты/страницы
• исправлять баги и стили
• улучшать UX (понятнее тексты, кнопки, состояния)

Нельзя (без явной команды)

• менять структуру папок проекта
• менять стек/фреймворк
• добавлять тяжёлые зависимости "просто так"
• менять URL страниц, названия таблиц, ключевые props без миграции

3) Простая структура проекта (ориентир)

Если проект новый — используем:

• app/ или pages/ — страницы
• components/ — компоненты UI
• lib/ — утилиты и клиенты (например, supabaseClient)
• styles/ — глобальные стили (если есть)

Важно: Если структура уже другая — не перестраиваем, работаем в существующей.

4) UI правила (чтобы выглядело "как продукт")

Обязательные элементы качества

• Отступы ровные (кратны 4/8)
• Текст читаемый (не мелкий)
• Кнопки выглядят как кнопки
• У каждой формы есть:
• подписи (label)
• понятные ошибки
• состояние загрузки

Обязательные состояния

На каждой важной странице должны быть:

• loading (когда данные грузятся)
• empty (когда данных нет)
• error (когда что-то пошло не так)

5) Supabase (простые правила безопасности)

• Ключи только в env, никаких ключей в коде.
• На клиенте используем только anon ключ.
• Не показывать приватные данные всем подряд.
• Если есть личные данные пользователя — включаем RLS (если дошли до этого урока).

Env переменные (пример имён):

• NEXT_PUBLIC_SUPABASE_URL
• NEXT_PUBLIC_SUPABASE_ANON_KEY

6) GitHub (чтобы не потерять проект)

• Делать коммиты после каждого маленького шага.
• Сообщения простые:
• feat: add login page
• fix: handle empty state
• style: improve spacing

README минимум:

• что это за проект
• как запустить локально
• какие env нужны (без значений)
• ссылка на демо

7) Netlify (как деплоим)

• Деплой из GitHub
• env переменные задаём в Netlify
• После деплоя проверяем:
• сайт открывается
• основные страницы работают

8) SEO минимум (для новичка)

Для каждой публичной страницы:

• title
• description
• один H1

Дополнительно (если умеем):

• OpenGraph теги
• alt у изображений

9) Чеклист перед "готово"

Перед завершением задачи Bolt должен ответить:

• ✅ Что именно было сделано (5–7 буллетов)
• ✅ Какие файлы изменены
• ✅ Как проверить вручную (2–5 шагов)
• ✅ Что может сломаться (если есть риск)

10) Шаблон правильного запроса к Bolt (для ученика)

Пиши так:

Контекст: что уже есть Цель: что должно получиться Ограничения: что нельзя менять Готово когда: как понять, что ок

Пример:

Контекст: есть главная и страница списка постов. Цель: добавить страницу создания поста. Ограничения: не менять дизайн шапки и футера, минимальные правки. Готово когда: форма работает, есть loading/error/success, запись появляется в списке.

Заключение

Эти правила созданы, чтобы помочь начинающим разработчикам эффективно работать с Bolt.new и создавать качественные веб-проекты. Следуя этим рекомендациям, вы получите предсказуемый результат и избежите типичных ошибок.

Помните: Bolt.new — это мощный инструмент, но только при правильном использовании. Чёткие формулировки задач, пошаговый подход и соблюдение базовых правил — ключ к успеху!