[BelhardAcademy] Vibecoding - Вайб-кодинг

Модуль 1 Введение в Vibecoding
Знакомство с философией "кодить через вайб" и современными ИИ-инструментами

• Философия vibecoding vs классическое программирование
• 10 лучших ИИ-инструментов (Cursor, Claude Code, v0.dev)
• Первое приложение за 10 минут
• GitHub для ИИ-разработки

Результат: Простое веб-приложение, созданное с помощью ИИ за 10 минут. Понимание того, как ИИ-инструменты ускоряют разработку в 10+ раз.

Модуль 2 Мастерство Cursor
Глубокое погружение в Cursor - главный инструмент ИИ-разработчика

• Установка, настройка и интеграции
• Chat, Tab автодополнение, Cmd+K команды
• Composer для генерации сложного кода
• .cursorrules - персонализация ИИ-помощника
• MCP интеграция

Результат: Полностью настроенный Cursor с персональными правилами. Уверенное владение Chat, Composer и автодополнением для продуктивной работы.

Модуль 3 Claude Code
Альтернативный мощный ИИ-инструмент для архитектуры и планирования

• Возможности веб-интерфейса и Artifacts
• Когда использовать Claude вместо Cursor
• Генерация API, схем БД и тестов
• Гибридный подход в разработке
• Agent и Subagent системы
• MCP интеграция

Результат: Навык выбора правильного инструмента для задачи. Сгенерированные API схемы, структура БД и архитектурные решения для будущего проекта.


Модуль 4 Современный веб-стек
Изучение технологий для создания современных веб-приложений

• Архитектура современных веб-приложений
• JavaScript/TypeScript экосистема
• Базы данных и SQL основы
• Регистрация во всех необходимых сервисах

Результат: Созданные аккаунты на всех платформах (Vercel, Supabase, Clerk, Stripe, OpenAI). Понимание современной архитектуры full-stack приложений.

Модуль 5 Настройка проекта
Настройка полного технологического стека для разработки

• Next.js проект с TypeScript
• Настройка Vercel для деплоя
• Environment variables и секреты
• Интеграция всех сервисов (Supabase, OpenAI и др)

Результат: Полностью настроенный Next.js проект с TypeScript, подключенными сервисами и автоматическим деплоем на Vercel.

Модуль 6 Бекенд
Создание серверной части приложения с базой данных

• API Routes в Next.js
• Drizzle ORM и PostgreSQL
• Схема базы данных и миграции
• CRUD операции и бизнес-логика

Результат: Рабочий бекенд с API endpoints, PostgreSQL базой данных, ORM настройками и полным набором CRUD операций.

Модуль 7 Аутентификация
Система регистрации и входа пользователей

• Supabase Authentication
• Email/Password регистрация и вход
• Social login (Google, GitHub) через Supabase
• Синхронизация пользователей с БД

Результат: Полноценная система аутентификации с email/социальными входами, синхронизация данных пользователей.

Модуль 8 База данных
Глубокое погружение в Supabase и управление данными

• Supabase Dashboard и возможности
• SQL Editor и Table Editor
• Real-time subscriptions
• Row Level Security и миграции

Результат: Настроенная Supabase БД с таблицами, real-time обновлениями, Row Level Security для защиты данных и системой миграций.

Модуль 9 Фронтенд
Создание красивого и функционального пользовательского интерфейса

• Основы и роутинг - Next.js App Router и навигация - Layouts и metadata для SEO
• Интерактивные компоненты - Формы с валидацией (React Hook Form + Zod) - Модальные окна и диалоги - Табы и аккордеоны - Tooltip и dropdown меню - Анимации с Framer Motion
• Landing Page - Hero блок с CTA - Features секция - Pricing блок - FAQ с аккордеоном - Footer и Header - Responsive дизайн
• Админ-панель (Dashboard) - Sidebar навигация - Stats cards - Таблица пользователей с сортировкой - Графики и аналитика - Notifications

Результат: Профессиональный Landing Page + Админ-панель с интерактивными компонентами, формами, анимациями и аналитикой. Всё responsive и красиво.

Модуль 10 API
Интеграция системы и внешних API

• HTTP протоколы и RESTful API
• Webhooks для уведомлений
• Связка фронтенда и бекенда

Результат: Интеграции, webhooks для уведомлений и полная связка фронтенда с бекендом.

Модуль 11 Финальная интеграция
Связывание всех компонентов и деплоймент в production

• Автоматизация с помощью ИИ
• OpenAI API и стриминг
• Тестирование полного приложения
• Production деплой и мониторинг

Результат: Полностью работающее SaaS-приложение в production с OpenAI интеграцией, системой мониторинга и автоматическими деплоями

Модуль 12 Презентация проектов

• 7 мин презентация + 3 мин Q&A
• Live demo основных фичей
• Обратная связь от преподавателя и участников
• Оценка по 5 критериям

Подведение итогов

• Ретроспектива всего курса
• Ключевые достижения
• Планирование будущего
• Индивидуальные планы развития