Дмитрий Ледовских - Вайбкодинг 3.0: от нуля до результата. Тариф Стандарт

Самый полный курс по вайбкодингу сайтов и веб / Станислав Быстрицкий - приложений 3.0

• Вы сможете запустить стартап в одиночку
  Реализуете любые идеи, MVP за выходные без привлечения команды разработчиков
• Увеличите доход
  Обойдёте конкурентов, предлагая клиентам полный цикл разработки с нуля до релиза
• Автоматизируете рутину
  Освободите силы для творчества и креатива вместо того, чтобы перекладывать JSON'ы
• Обретёте массу знаний
  Помимо навыков вайбкодинга вы получите базу по фронтенду, бэкенду, тестированию и безопасности

• Обучение полному циклу разработки
  За 72 занятия и более 20 часов видео вы научитесь не только созданию фронтенда, но также проектированию REST API и разработке бэкенда
• 70+ видеоуроков с доступом навсегда
  более 30 часов практического контента с пошаговыми инструкциями. Доступ выдаётся навсегда, а все обновления курса бесплатны
• От простого к сложному понятным языком
  Мы начнём с базовых навыков и постепенно перейдём к созданию полноценных веб-приложений с бэкендом. Мы даём всю необходимую базу — поймёт даже новичок
• Современные технологии
  Вы получите навык интеграции нейросетей в своё приложение, а также получите опыт работы с самыми актуальными технологиями
• Фокус на практике, а не теории
  Никакой «воды» — только актуальные техники, которые можно применить сразу после просмотра урока

• Джуниор разработчикам
  Вы сделаете квантовый скачок в развитии собственных навыков и обойдёте коллег, застрявших в традиционном программировании
• Опытным программистам
  Вы автоматизируете рутинные задачи и сможете фокусироваться на архитектуре и креативных решениях
• Продакт-менеджерам
  Вы научитесь самостоятельно воплощать свои идеи в код без найма дорогостоящих разработчиков
• Дизайнерам
  Вы расширите свои компетенции и сможете не только проектировать, но и верстать свои интерфейсы
• No / low-code специалистам
  Вы преодолеете ограничения визуальных конструкторов и выйдете на новый уровень возможностей

• Что такое вайбкодинг и почему это меняет всё
• Для кого вайбкодинг и можно ли на нем заработать?
• Инструменты для вайбкодинга: какой выбрать
• Как ставить задачу нейросети: база промптинга
• Твой первый проект за 15 минут
• Как стать профессионалом в вайбкодинге. Чит-код для роста

• Организационная информация
• Бонус за покупку - 1000 идей для стартапа
• Бонус - доступ в Точку Фарма

• Как проходить обучение
• Выбор модели и инструмента для вайбкодинга
• Покупка платных инструментов из РФ
• Регистрация и покупка Claude Code и Codex
• Установка и обзор VS Code
• Установка Claude Code и Codex (CLI и расширение)
• Твой первый проект

• Как проходить модуль
• Что такое Codex / Claude Code
• Установка Desktop версии
• Обзор интерфейса Desktop версии
• Установка и обзор расширения в VS Code
• Установка и обзор CLI версии
• Стандартные команды
• Правила для AI-агентов
• МСР. Установка самых полезных MCP
• Скиллы агентов под любые задачи. Поиск, установка, создание своих навыков
• Субагенты. Как создать целую команду AI-агентов
• Agents Team в Claude Code
• Хуки. Создание собственных хуков
• Плагины. Что это, как пользоваться
• Память агентов ( Memory )

• О чем этот модуль
• Какие есть аналоги Cursor, что выбрать?
• Скачивание и установка Claude Code
• Где в Claude Code проектные правила?
• Гайд по работе с Claude Code
• Интерфейс для Claude Code

• Что такое вайбкодинг. Будущее программирования
• Что такое Cursor AI, скачивание и установка
• Обзор интерфейса Cursor AI. Ваш первый проект

• Обзор настроек Cursor
• Обзор AI функций
• Кастомизация Cursor под себя
• Конфиденциальность твоего кода
• Что такое MCP. Установка самых полезных MCP. Подключение Figma к Cursor
• Как использовать Cursor бесплатно

• Что будет в этом модуле
• Подготовка проекта, роадмап. Как избавиться от галлюцинаций
• Вёрстка проекта. 3 способа вёрстки
• Создание анимаций
• Мобильная адаптация
• Рефакторинг, поиск багов, оптимизация изображений, lazyload, улучшение доступности
• Деплой лендинга

• Проектные правила. Как писать свои и переделывать чужие
• Автоматическое выполнение команд в терминале. Как случайно не удалить проект
• Кастомные моды чата, расширяем стандартный функционал Cursor
• Продвинутая фишка: как держать модель в тонусе
• Промпт декораторы – собственные быстрые команды
• Пользовательские команды
• Как заставить нейросеть писать чистый код
• Подключение бесплатных AI моделей по API
• Программирование голосом. Настройка голосового ввода
• Дебаггинг. Как дебажить приложение, если ты новичок, и ты в тупике
• Продвинутое копирование чужого сайта

• Что такое Git и GitHub
• Установка Git. Регистрация GitHub
• Работа с GitHub в Cursor
• Правила безопасности при работе с Git

• Что такое бэкенд-разработка и её роль в вебе
• Что такое JSON. Передача информации между клиентом и сервером
• CRUD операции и HTTP коды
• Что такое REST API
• Лучшие практики проектирования REST API
• Базы данных: Основы хранения данных
• Практика! Разработка сайта с галереей фильмов

• Что будет в модуле
• Скачивание и установка Python + Django REST Framework
• Проектирование REST API
• Разработка авторизации и регистрации
• Разработка профиля
• Разработка ежедневных целей
• Разработка модуля блюд
• Интеграция с нейросетью для оценки блюд
• Разработка системы подписок, подключение платежей
• Рефакторинг кода. Оптимизация работы приложения
• Обеспечение безопасности приложения
• Деплой приложения

• Что будет в модуле
• HTML. Основные теги, классы, id, атрибуты
• Как сделать сайт красивым с помощью CSS
• Основы CSS Flexbox
• Базовый JS, работа с DOM

• Что будет в модуле
• Инициализация проекта [лёгкая версия]
• Инициализация проекта [полная версия]
• Что такое JSX и компоненты
• Создание регистрации, авторизации
• Разработка страницы профиля
• Получение блюд. Вёрстка трекера
• Добавление блюд, интеграция нейросети для оценки блюд
• Вёрстка и подключение ежедневных целей
• Разработка тарифов, истории платежей
• Рефакторинг кода. Оптимизация работы фронтенда
• Обеспечение безопасности фронтенда
• Деплой приложения

• Что будет в модуле
• Как создать портфолио, которое продает
• Упаковка профиля
• Как взять заказ (взлом психологии клиента)
• Как оценивать проект в деньгах и сроках
• Закрытие клиента в переписке
• Заказы без биржи фриланса
• Готовая схема лидогенерации (18.06.2026)
• Ведение заказа от А до Я

Андрей Кобец → Введение в System Design для Frontend / kobezzza.lab - разработчика

• Middle и Senior Frontend‑разработчикам, готовящимся к архитектурным секциям на интервью и System Design‑собеседованиям.
• Инженерам из крупных продуктов, которым важно лучше понимать взаимосвязь клиентской части с серверной инфраструктурой и общую логику построения ИТ‑систем.

• четкий алгоритм проектирования веб‑приложений — от бизнес‑контекста до масштабирования;
• понимание того, как backend‑архитектура влияет на frontend‑решения;
• навык проектирования API‑контрактов;
• структурный подход к устройству и масштабированию клиентской архитектуры;
• понимание процессов тестирования, релизов и стабильной поставки функциональности.

kobezzza.lab - Дмитрий Холстинин → Продвинутый Debug во Frontend

• Что такое баг и дебаг: основные понятия
• Основные виды дебага и источники ошибок
• Основные инструменты отладки в браузере
• Использование Chrome DevTools для отладки веб-приложений
• Разбор всех возможностей Chrome DevTools
• Основы дебага Node.js приложений
• Использование встроенного дебаггера для отладки кода
• Отладка node.js с помощью chrome devtools
• Дебаг cluster/fork процессов
• Профилирование веб-приложений и Node.js
• Поиск утечек памяти, самые частые причины утечек
• Проблемы воспроизведения окружения в frontend разработке
• Использование трекеров, вебвизоров и эмуляторов для отладки
• Использование эмуляторов для отладки приложений на Android
• Работа с реальными устройствами для отладки
• Первоначальная настройка эмулятора и инструментов отладки
• Использование эмуляторов для отладки приложений на iOS
• Работа с реальными устройствами для отладки
• Первоначальная настройка эмулятора и инструментов отладки
• Дебаг удаленного Node.js приложения
• Приемы отладки веб приложений в продакшене
• Статические проверки работы веб-приложений
• Статический анализ работы Node.js приложений
• Инструменты анализа и мониторинга для превентивного выявления ошибок

Разумный вайб / Дмитрий Лаврик - кодинг

• Понимание клиент-серверного взаимодействия
  Курс именно по веб-разработке. Не так важно, заходите вы со стороны бэкенда или фронтенда, главное, чтобы было понимание общих принципов и терминологии этой сферы.
• Умение писать работающий код, решающий задачи
  Конкретный стек технологий не важен. Node или PHP, Vue или React — не принципиально. Главное, уже быть адекватным программистом, а необходимый минимум знаний по конкретным стекам дадут дополнительные видео.
• Любовь к строгому порядку в коде
  Прежде всего — строгая типизация: Type Hinting в PHP или TypeScript вместо JS. Один лишь TypeScript убирает добрую половину проблем нейросетей.
• Реалистичные ожидания от ИИ
  Мы не мечтаем, что нейросетка напишет за нас весь код, мы просто получаем помощника — сообразительного и неутомимого джуна, которому можно делегировать массу задач.

• Грамотно работать с Claude Code
  Сессии, контекстное окно, постоянная память и Claude.md, субагенты, хуки и навыки — всё это перестанет быть абстрактными словами.
• Создавать архитектуру, которая не позволяет ИИ тупить
  Бэкенд, фронтенд или монолит — нужны точные инструкции и ограничения. Если у нейросети будет возможность сделать лишний шаг в сторону, то она найдёт, где ошибиться. Вопросам архитектуры мы посвятим очень много времени.
• Эффективно организовывать рабочий процесс
  Claude это джун, а мы наставники. Его вход в проект должен быть плавным. Задача, ошибки, обратная связь, исправление инструкций — только так можно обучить нашего джуна.
• Правильно относиться к месту ИИ в разработке
  Как бы ни был хорош Claude, ответственность за код остаётся на программисте. Сбросить рутину на помощника и забить на ревью — большой соблазн, которого мы не допустим.

• Создание аккаунта Anthropic и выбор тарифного плана
• Установка Claude Code CLI
• Рабочий процесс только через CLI, минусы GUI
• Плагин VS Code: установка и подключение

• Что такое сессия и как она работает
• Очистка сессии: когда и зачем
• Возврат к предыдущей сессии
• Просмотр истории и статистики сессий

• Что такое контекстное окно и почему оно важно
• Как контекст заполняется во время сессии
• Стратегии контроля размера контекстного окна

• claude/settings.json - настройки проекта
• claudeignore - убираем ненужные файлы из контекста
• Claude.md - стабильные инструкции для Claude

• Как работают ограничения на тарифах
• Примеры задач, которые быстро съедают лимиты
• Как формулировать задачи, чтобы оставаться в рамках

• Opus, Sonnet, Haiku — обзор возможностей и стоимости
• Изменение модели в Claude Code
• Мощь или скорость — выбор модели в зависимости от задач

• Как Claude читает и объединяет инструкции
• Инструкции на уровне проекта и на уровне подкаталога
• Общие правила и переопределения на основе контекста

• Как работает система постоянной памяти Claude
• Явная инструкция Claude.md vs накопленный контекст / память
• Практические правила: что кладём в память, а что в Claude.md

• Что такое субагенты и когда Claude их запускает
• Субагенты и контекстное окно
• Обзор популярных готовых субагентов

• Управление поведением и областью видимости субагентов
• Принципы создания пользовательских субагентов
• Написание эффективных промптов для субагентов

• Что такое навыки (skills) и как Claude их применяет
• Встроенные и кастомные слэш-команды
• Компоновка субагентов и навыков в воркфлоу

• Что такое MCP и как он расширяет возможности Claude
• Подключение MCP-сервера через settings.json
• Популярные MCP-серверы для веб-разработки

• Что такое хуки и когда они срабатывают
• Практические сценарии: автоформатирование, логирование
• Написание и регистрация собственных хуков

• Внутренний цикл рассуждений Claude: планирование → вызовы инструментов → синтез
• Структурирование запросов для минимизации расхода токенов

• Раздельная разработка фронтенда и бэкенда
• Что такое монорепозиторий и когда это имеет смысл
• Как этот выбор влияет на разработку с ИИ

• Валидация: проверка и очистка входных данных
• Сериализация: фильтрация и проверка ответа
• Документация: понятное описание API для клиента

• Что такое DTO: request DTO vs response DTO
• Почему важно разделять схемы запроса и ответа
• Виды документирования: DTO, OpenAPI, типы TypeScript

• Почему типизированный код резко улучшает результаты ИИ
• Как Claude читает типы для определения интерфейса
• Правильные привычки: строгий режим, явные типы, ноль any

• Ручная сборка и автотрансформеры
• Типизированные fetch-клиенты
• Выбор подхода в зависимости от архитектуры

• ENV в клиентских бандлах и публичных репозиториях
• SQL-инъекции и подводные камни ORM
• Claude как ассистент при аудите безопасности

• Организуем жёсткие архитектурные рамки
• Объясняем структуру проекта, описываем ключевые сущности
• Пишем инструкции так, чтобы у типичных задач был ровно один стиль решения

• Сами строим скелет приложения, затем призываем Claude
• Показываем на одной доменной сущности, как кодим сами
• Для любых велосипедов (например, свои хуки / композаблы) создаём примеры использования

• Определяем механику взаимодействия клиента и сервера
• Создаём абстракцию, отвечающую только за взаимодействие
• Изменение API начинается с контракта, а не с кода

• Описание результата, а не процесса проще для ИИ
• Предпочитаем схемы, конфиги, декораторы и т.п.
• Декларативные фреймворки (Vue / React) — короли фронтенда

• С увеличением контекста нейросетки теряют точность
• Разбиваем задачу на шаги, затем делегируем
• Каждый шаг должен иметь понятный и проверяемый результат

• Просим нейросетку составить план
• Изучаем, редактируем, обсуждаем с Claude
• Выполняем шаг за шагом, оценивая промежуточные результаты

• Нативная валидация и сериализация по JSON Schema
• Синтаксис JSON-схем и неудобства их ручного описания
• JSON Schema vs OpenApi: небольшие различия

• Что такое TypeSpec и какие выгоды он нам приносит
• Определение моделей, создание общих типов
• Описание маршрутов и схем для запросов и ответов

• Компиляция TypeSpec в спецификацию OpenAPI
• Автоматический вывод интерактивной документации
• Компиляция и доработка JSON-схем из лаконичного описания

• Как Drizzle вписывается в философию ограничений
• Schema First без генерации тонны типов (привет Prisma)
• Как Claude работает с Drizzle — схема как достаточный контекст

• Реализация ключевых плагинов
• Контроллеры и сервисный слой
• Создание инструкций для Claude под стек

• TypeSpec как полная замена главной серверной триады
• Сравнение размеров TypeSpec и файла OpenAPI
• Как производные TypeSpec сокращают контекст каждой задачи

• Структура папок, выделение ключевых частей приложения
• Стартовый код для router и store
• Продумывание системы работы с авторизацией пользователей
• Выбор и подключение инструментов для UI

• OpenAPI-спецификация бэкенда как источник истины
• Генерация полностью типизированного fetch-клиента
• Паттерн репозиторий как обёртка над fetch-клиентом
• Создание модулей для каждой доменной сущности

• Создание хуков для DI ключевых сервисов через контекст
• Создание хука для получения данных — useAsyncData
• Создание хука для контроля форм — useForm
• Документирование всех велосипедов для Claude

• Правила по именованию компонентов и их props
• Правила использования хуков внутри компонентов
• Реализация помощника для хука useAsyncData
• Создание AuthGuard компонентов

• Описание паттернов применения хуков и компонентов
• Явные запреты на прямое использование fetch
• Предотвращение типичных ошибок Claude: избыточный useEffect, создание компонентов во время рендеринга и др.

• Реализация UI для одной доменной сущности вручную
• Создание хуков на стыке сложного UI и API
• Пробный запуск Claude, оценка результатов
• Доработка инструкций до приемлемого результата

• Почему монолиты сложнее для Claude
• Больший контекст и тесная связанность частей системы
• Примерная оценка количества файлов и объёма кода для типичной CRUD-операции

• Специальный выбор наиболее громоздкого стека технологий
• Разные языки в одном проекте: PHP и JavaScript
• Inertia вместо API, сервер напрямую передаёт props страницам
• Vue с тяжёлой библиотекой компонентов Vuetify

• Laravel Data: типизированные DTO для запросов и ответов
• Валидация и сериализация на основе единого инструмента
• Правила для полей DTO через декларативные атрибуты
• Автоматическая конвертация DTO в TypeScript-типы

• Почему корневой Claude.md должен быть особенно точным
• Вложенные Claude.md по модулям и сущностям
• Реализация навыков (skills) для решения точечных задач
• Как не дать Claude перепутать слои бэкенда и фронтенда

• Генерация TypeScript-хелперов из роутов Laravel
• Устранение захардкоженных адресов на стороне Vue
• Инструкции по своевременному перезапуску генераторов

• Усиление Laravel: Spatie Query Builder и Spatie Permission
• Создание хелперов и инструкций на стыке бэкенда и фронтенда
• Генерация более 2000 строк рутинного кода за 10 минут

• Claude изначально ничего не знает о наших предпочтениях
• Роль программиста на старте: наставник, а не босс
• Без образца от нас Claude не угадает стиль и требования — скелет и примеры реализуем сами

• Рабочий режим: задача → ошибка → обратная связь → результат → новое правило в CLAUDE.md
• Когда цикл правильный, Claude делает всё меньше ошибок
• Инструкции накапливаются, образуя полноценный гайд

• Что происходит, когда Claude становится достаточно хорош, чтобы ревью казалось ненужным
• Незаметная деградация разработчика: от доверия Claude к лени проверять его результат
• На дистанции нейросетка ошибётся. Не если, а когда.

• Claude может писать код, а уволить могут только программиста
• Относимся к результату ИИ как к PR джуниора — всегда стоит окинуть критическим взглядом
• Как оставаться искренне вовлечённым в процесс, даже если Claude не ошибался давным-давно

• Траектория развития возможностей моделей
• Оценка риска полной замены программистов
• Глубокое понимание инструмента по мере роста его мощи

• Математика ИИ-компаний: пузырь или путь к AGI
• Что может произойти с воркфлоу, полностью построенными вокруг дорогой модели

Hexlet / Кирилл Мокевнин - Вайб-кодинг на Claude Code

Kobezzza - Андрей Кобец → Архитектура Frontend приложений

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

• улучшить структуру и качество своих Frontend‑приложений;
• глубже разобраться в архитектурных принципах и современных паттернах;
• повысить уровень самостоятельности при проектировании сложных интерфейсов;
• избежать ловушек и проблем, возникающих при масштабировании проектов.

Архитектура Frontend’а для React / Матвей Кленов - разработчиков

Что меняется в мышлении после курса:
Курс даёт архитектурное мышление, которое повышает твою ценность как инженера в эпоху ИИ.

Когда инструменты меняются всё быстрее, именно архитектурное мышление остаётся стабильной основой профессионального роста.
Этот курс — про навыки, которые не устаревают.

Метод обучения:

1. Курс построен вокруг одного приложения на React, которое последовательно эволюционирует от версии к версии.
2. Для каждой итерации создаётся Excalidraw-доска, на которой разбираются архитектурные принципы и решения.
3. После этого решения немедленно внедряются в код.

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

Темы, которые проходим в процессе:

Архитектурный фундамент:

• MVC / MVVM и применимость во Frontend
• SOLID, Dependency Injection, Inversion of Control, Service Locator
• Model-first подход
• Принцип наименьших привелегий
• Паттерны: Builder, Observer, Facade, Gateway, Publisher-Subscriber
• Что такое Domain и Bounded Context
• Low coupling/High cohesion

Практика на React:

• Как правильно адаптировать фундаментальные знания под React
• Пишем на разных техологиях: Reactuse, Zustand, Preact/signals, Effector, Reatom и др. Делаем упор на то, как меняется архитектура в целом, а не какой API мы используем
• Структура папок и построение слоев приложения
• Что такое инфраструктурный код на React
• Обработка ошибок в React-приложении
• Гайд на State-Management
• Паттерны для композиции компонентов: renderProp, slot, HOC
• Как масштабировать Frontend-архитектуру при росте сложности
• Зачем писать бизнес-логику вне UI на самом деле
• Inversion of Control на практике (Inversify, needle-di)
• Микрофронтенды

Production-задачи:

• Ролевая модель и доступы
• Аутентификация и авторизация
• Feature flags
• Правильная работа с формами
• Интернационализация

Подробно

Модуль 1. Фундаментальные знания

Самый важный блок курса. Это фундамент, на котором строится архитектура любого приложения независимо от стека, фреймворка и методологии. Цель модуля - перестать слепо повторять чужие правила и начать мыслить системно: понимать, почему код устроен именно так, а не иначе.

1.1. Solid в контексте React
Solid разбирается не как набор абстрактных правил, а как ориентиры для проектирования React-кода. Смотрим, где нарушение принципов действительно бьет по скорости разработки и поддержке, а где усложнение не оправдано.

• S - single responsibility principle: разделение ответственности между хуком, view-компонентом и контейнером
• O - open/closed principle: расширяемые компоненты через композицию и slot-подход вместо флагов-пропсов
• L - liskov substitution principle: подстановка типов и работа с нативными html-атрибутами через ComponentProps
• I - interface segregation principle: прозрачные пропсы и влияние интерфейсов на читаемость кода в команде
• D - dependency inversion principle: отвязка компонентов от backend, localStorage, IndexedDB, Supabase, Firebase и конкретного state management

1.2. Mv*-паттерны: mvc / mvp / mvvm
Этот блок дает понимание, откуда вообще берется разделение на слои и роли. После него React, Vue и Angular перестают восприниматься как принципиально разные миры и собираются в единую архитектурную картину.

• Mvc и mvp: теория, презентация и разбор реализации на практическом проекте
• Mvvm: теория, excalidraw-схема и реализация на практическом проекте
• Роли и связи между слоями: view, model, presenter, viewmodel
• Data-binding через proxy: как реактивность работает под капотом

1.3. Сборка фундамента под React
Флагманское видео модуля, где все идеи соединяются в работающую архитектуру на React. Здесь теория перестает быть теорией и собирается в цельную систему, пригодную для реального проекта.

• Dip и dependency injection на практике
• Composition root
• Архитектурные роли во frontend
• Инфраструктурный код
• Di через props и React.Context
• Основы тестируемости архитектуры
• Репозиторий с кодом, excalidraw-доска, разбор render props и обзор структуры папок

После модуля ты:

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

Модуль 2. Основная часть. Архитектура React-приложения от хаоса до production

В этом модуле ты разрабатываешь одно приложение в нескольких архитектурных итерациях. Каждая итерация решает конкретную проблему предыдущей и сравнивает подходы, технологии и стейт-менеджеры. Главная мысль модуля: архитектура важнее стека. Любой инструмент вторичен, если выстроены слои, границы и направление зависимостей.

2.1. Архитектурный скелет: от чистого React к слоистой системе
Базовая итерация приложения, на которой ставятся слои и направление зависимостей. Здесь становится видно, что чистый React при правильной архитектуре не уступает решениям с тяжелым стеком.

• Рефакторинг стартового приложения: структура папок, инфраструктурный код, di
• Слои service / model / viewmodel / view / composition root
• Архитектурные границы через роутинг
• Инфраструктурный код, который держит чистоту даже на голом React + context
• Contract-first api и автогенерация dto (orval)
• Визуализация связей модулей на excalidraw

2.2. Подбор стейт-менеджера и его роль в архитектуре
Стейт-менеджер здесь рассматривается не как центр приложения, а как инструмент синхронизации ui и состояния. Бизнес-логика остается в сервисах, а выбор стека рассматривается через влияние на архитектуру.

• Zustand: правильное хранение бизнес-логики и роль model
• Service locator: безопасное использование через module composition root
• Оптимизация ре-рендеров: селекторы, инкапсуляция состояния, children-пропсы
• Global / module / local composition root
• Preact/signals и hoc для работы с service locator
• Effector: бизнес-логика как граф событий, паттерн gateway из ddd
• Reatom: философия и почему он сильнее аналогов на сложных проектах
• Inversion of control, builder pattern, identify из lift
• Высокоуровневые vs низкоуровневые модули
• Самописный Zustand на usesyncexternalstore и fine-grained reactivity

2.3. Масштабирование архитектуры при росте сложности
Отдельный блок про то, когда паттерны действительно нужны, а когда только усложняют систему. Все решения привязываются к реальным проблемам сложности, а не к моде на конкретный подход.

• Эволюция структуры папок и data flow по мере роста проекта
• Как я реально использую fsd на боевых проектах
• Bounded context на практике
• Когда внедрять микрофронтенды, а когда нет
• Общение между модулями через event emitter
• Module federation для vite и контроль зависимостей в host-приложении
• Метрики сложности модуля

2.4. Одна фича - четыре реализации
Реалистичный сценарий про выбор уровня архитектуры под задачу и сроки. Одна и та же фича проходит путь от быстрого mvp до переиспользуемого решения для ui-kit.

• Быстрое решение: когда "хорошо сейчас" важнее "идеально потом"
• Модульная сборка зависимостей и продвинутый TypeScript для строгих api
• Гибкое решение с привязкой к Reatom: asyncwrapper, renderprop для списков
• Перенос фичи в ui-kit на чистом React + reactuse
• Паттерны slot и renderprop для композиции и подмены
• Отвязка фичи от типов конкретного стейт-менеджера
• Самописный di-container и poor man's di: где он работает, где ломается

2.5. Глубокая теория state management
Полный разбор стейт-менеджмента как класса задач, а не как набора библиотек. Этот блок помогает видеть общие принципы и понимать, зачем бизнес-логика должна жить вне ui.

• Что такое state и какие виды состояния бывают
• Виды стейт-менеджеров и их различия
• Проблемы экосистемы React
• Главная причина писать бизнес-логику вне ui
• Проблемы технологий, прибитых гвоздями к React (на примере React query)
• Обоснование выбора Reatom для сложных проектов

2.6. Production-фичи: доводим приложение до боевого состояния
После архитектурного скелета добавляются вещи, которые отличают учебный проект от боевого: границы, права, обработка ошибок, optimistic ui и коммуникация между доменами.

• Json server и переход к реалистичной работе с api
• Eslint-плагин для контроля архитектурных границ
• Optimistic ui на Reatom: транзакции, acid, атомарность
• Сравнение подхода с optimistic updates в tanstack query
• Обработка ошибок через концепцию fail fast
• Декларативная композиция через вспомогательные компоненты
• Ролевая модель: проблема fsd-слоя entities и зачем нужен core
• Авторизация vs аутентификация и защита модулей через dependency inversion
• Компонент can для декларативной работы с ролями
• Cross-domain коммуникация и паттерн facade
• Сила чистых функций при cross-domain взаимодействии
• Builder vs adapter: разница на практике
• Что произойдет, если выкинуть слой service
• Perceived performance как метрика ux

2.7. Архитектура без ioc-контейнера
Реалистичный блок про ситуацию, когда идеальной инфраструктуры нет. На примере tanstack query разбирается, как чистая композиция и разделение бизнес-логики и ui работают даже на хуках.

• Рефакторинг приложения на tanstack query
• Di через самописный контейнер и через React.Context
• Dependency scopes
• Public api модуля
• Переход с классов на функции-фабрики и обоснование выбора синтаксиса

2.8. Работа с формами и аутентификация
Отдельный блок про формы - место, где архитектура чаще всего разваливается. Разбираем валидацию, auth-поток и разделение логики формы и ui.

• React hook form: api, отличия от formik
• Zod: типобезопасная валидация и гибкие схемы для сложных форм
• Jwt auth: теория и взгляд со стороны бэкенда
• Реализация axios-интерцепторов
• Главная ошибка фронтендеров при работе с формами
• Разделение логики формы и ui

2.9. Разработка kanban-доски
Сборка всего пройденного на боевом проекте, где архитектурные решения связываются в единую систему и проверяются на реальной сложности.

• Feature и widget: что это и как различать
• Page-first подход в проектировании страниц
• Архитектура страницы проектов: атомизация в Reatom, чистая работа с формами через di
• Менеджер модальных окон: архитектурная проблема привязки форм к жизненному циклу React
• Канбан-доска на dnd-kit: high cohesion внутри фичи, отделение типа домена от типа фичи
• Ssot и атомарный стейт-менеджер для построения цепочек производных значений
• Crud для канбана: нормализация данных, проблема синхронизации React router и React
• Undo/redo через паттерн event sourcing
• Local-first как направление развития (референс - архитектура linear)

После модуля ты:

• Проектируешь архитектуру React-приложения с нуля и обосновываешь каждое решение через trade-offs
• Выбираешь стейт-менеджер под задачу, а не по моде, и понимаешь, как он диктует архитектуру
• Пишешь чистый код одинаково на Reatom, Effector, Zustand и голом React - потому что мышление одно
• Масштабируешь архитектуру под рост сложности проекта без переписывания
• Доводишь фичи до production: optimistic ui, обработка ошибок, ролевая модель, cross-domain коммуникация

Kobezzza - Андрей Кобец → React «под капотом»

Привет, инженер!
Да, ты не ослышался, готовлю для тебя интенсив по React. Но это не будет курс для прикладного использования фреймворка. Вместо этого мы посмотрим на него глазами инженера. Разберем архитектуру на составляющие и проследим ее эволюцию от версии к версии. Правильно сказать, что данный интенсив не сделает из тебя разработчика на React, но даст понимание как писать высокоэффективный производительный код с использованием React и повысит шансы на успешное прохождение собеседования (да, тренд 25-26 годов сместился в сторону прикладных инструментов и все чаще спрашивают именно нюансы React на собеседовании).

Курс идеально подходит для middle+ разработчиков, которые хотят перестать «просто использовать» React и начать понимать его на уровне архитектуры.

Можно ли прийти без знания React? Да. React здесь просто наглядный пример. Мы будем говорить об архитектуре, инженерии и принципах, которые работают в любом фреймворке.

Программа:

День 1. Архитектура React:

• Virtual DOM как структура данных: зачем, как, сравнение с DOM
• Что такое реактивность: почему setState вызывает рендер? Что именно делает React реактивным?
• Рендер и коммит: фазы жизни React-компонента
• Поток обновлений представления: разбираемся с Fiber и кооперативной многозадачноностью
• Отладка и профилирование: React DevTools - почему компонент перерендерился, как записать и проанализировать профиль

День 2. Производительность:

• Когда на самом деле нужны useMemo, useCallback, React.memo и что нового принес React-compiler
• Зачем нужны useTransition и useDeferredValue
• Разбираемся с use() + Suspense: как React научился ждать данные во время рендера
• Современные фичи: useActionState, useOptimistic и другое

День 3. Анатомия приложения:

• Управление состоянием: когда Redux Toolkit, когда Zustand, когда Context + useReducer, когда React Query (TanStack Query) для серверного стейта
• Серверные компоненты и сравнение с HDAA-подходом (Hypermedia-Driven Applications)
• Слоистая и гексогональная архитектура

Пройдет 19-21 июня

PixelPerfect - Профессия webflow разработчик

• Новичкам. Если ты только начинаешь свой путь, То Webflow это первый шаг в мир большой разработки, а именно к большим деньгам.
• Дизайнерам. Устал ругаться с разрабами - верстай сам! Станешь спецом полного цикла и будешь ценным сотрудником в команде, с доп. скиллами.
• Верстальщикам. Если ты уже владеешь кодом, то освоив Webflow, сможешь реализовывать проекты намного быстрее + выйдешь на зарубежный рынок.