От Идеи до Production
На примере веб-приложения аналога Trello вы изучите основные инструменты, технологии, архитектурные паттерны и лучшие практики веб-разработки.
Как все устроено?
-
Сколько потребуется времени?
Прохождение всего доступного материала займет примерно 4 недели. Весь остальной материал займет еще приблизительно 7-8 недель.
-
Какие требования к опыту?
Для прохождения курса не требуется коммерческого опыта работы.
Достаточно понимания основ веб-разработки, React, TypeScript, Node.js. Все остальные знания для создания аналога Trello будут поданы в процессе обучения. -
В каком формате происходит обучение?
Сразу после покупки, вы получаете доступ к первым блокам и урокам в них. Уроки состоят из текстовых статей, видео и домашних заданий.
Ведущие мониторят ваш прогресс, отвечают на вопросы в чате, помогают разбираться со сложными темами на вебинарах. -
Есть ли домашнее задание?
В уроках, ведущие показывают как сделать аналог Trello, но рекомендуется создавать свой проект, чтобы получить настоящую практику.
Домашнее задание есть в каждом блоке, его выполнение, открывает следующий блок. -
Групповая работа
Ведущие активно мониторят чат, в котором другие участники обсуждают пройденный материал, задают вопросы по своим проектам и помогают в обучении.
На вебинарах разбирают практические кейсы участников, новости веб-разработки, новые инструменты и полезные трюки. -
Когда открывается доступ?
Доступ к обучению открыт уже сейчас!
Новые блоки открываются регулярно, в течение 1-2 недель после предыдущего.
С открытием новых блоков общая стоимость увеличивается.
Что входит?
Обучение через практику.
Программа состоит из видео, текстовых уроков, домашних заданий и живого общения.
Ведущие активно помогают в обучении и направляют участников.
-
Лекции и видео
Глубокие лекции и практические видео, которые помогут вам понять каждый нюанс разработки.
Уже более 30 лекций в первых 5 блоках, а еще 90 ожидают вас! -
Живые вебинары
У ведущих программы более 10 лет опыта в компаниях разного размера.
Этим опытом авторы программы делятся на регулярных вебинарах, проводят ревью кода, разбирают практические кейсы участников. -
Чат для общения
Активное комьюнити в Telegram: помощь от коллег и преподавателей в режиме реального времени.
В течении 24 часов (обычно быстрее) для тарифа с обратной связью. -
Реальный проект
Вы освоите создание сложных веб-приложений, разрабатывая клон Trello шаг за шагом, от проектирования до production.
Вы можете создавать свой проект мечты!
Ведущие помогут с каждым этапом.
Технический стек
Вы будете строить приложение на основе нескольких современных технологий.
А мы разберем как эти технологии работают и как их применять.
-
TypeScript
Для надежного и поддерживаемого кода: статическая типизация, четкая документация, меньше ошибок. Стандарт в разработке веб-приложений.
-
React
Огромная экосистема, множество готовых решений, декларативный подход к описанию интерфейсов. Позволяет создавать масштабируемые приложения.
-
Effector
Декларативная библиотека для управления бизнес-логикой приложения. Легко масштабируется, удобна для тестирования.
-
Vite
Минимум конфигурации, максимум производительности. Самое быстрое решение для разработки Single Page Application.
-
Vitest
Быстрый тестовый фреймворк поверх Vite. Переиспользует конфигурации Vite, совместим с Jest, поддержка ESM, TypeScript и JSX из коробки.
-
Supabase
Простая и масштабируемая серверная инфраструктура для баз данных с автоматическим API на основе PostgreSQL, аутентификацией, реалтайм и файловым хранилищем.
-
Atomic-Router
Обеспечивает удобное управление состоянием маршрутизации, основывается на effector, минимизирует ошибки, имеет встроенные инструменты подгрузки данных.
-
Mantine
Мощная библиотека компонентов для React с более чем 120 компонентами и 30+ хуками. Поддерживает темизацию, кастомизацию стилей и высокую производительность
-
Untitled UI
Самый крупный UI-кит для Figma, содержащий более 900 стилей и 420+ готовых страниц и макетов. Быстро настраивается, позволяет экономить время и легко создавать современные, красивые интерфейсы
Программа
Обучение разбито на блоки. Следующий блок завязан на предыдущий.
Сейчас доступно 6 из 15 блоков, новые открываются регулярно.
00. Добро пожаловать Уже доступно!
В этом блоке вы познакомитесь с курсом, его структурой, преподавателями и платформой. Здесь вы узнаете, как максимально эффективно использовать курс для достижения своих образовательных целей.
-
Продуктовая разработка
12 мин
-
План разработки
24 мин
01. Инициализация Уже доступно!
Изучите ключевые инструменты и фреймворки, которые лежат в основе современной веб-разработки. Научитесь правильно выбирать технологии и настраивать рабочее окружение для начала работы над проектом.
-
Подбираем технический стек
19 мин
-
Подбор и анализ зависимостей
26 мин
-
Почему Vite, а не Webpack
17 мин
-
Brello: Инициализация проекта
24 мин
02. Инструментарий Уже доступно!
Освойте инструменты, которые помогут поддерживать высокое качество кода, включая линтеры, форматтеры, и системы автоматизированного тестирования и непрерывной интеграции.
-
Зачем нам CI/CD
15 мин
-
Brello: Настраиваем CI/CD
30 мин
-
Brello: Настраиваем CI для проверки Pull Request
20 мин
03. Ключевая функциональность Уже доступно!
Научитесь создавать основные компоненты ваших приложений, прототипировать и тестировать ключевую функциональность до того, как добавлять дополнительные фичи.
-
Определяем основную функциональность продукта
48 мин
-
Прототипирование MVP
7 мин
-
Списки и карточки Kanban
12 мин
-
Добавляем интерактивности карточкам
38 мин
04. Реактивность Уже доступно!
Погрузитесь в мир реактивного программирования с помощью библиотеки Effector. Изучите основы и техники для управления состояниями приложения.
-
Составляющие приложения
14 мин
-
Что такое effector
9 мин
-
Как писать логику на effector
19 мин
-
Установка и конфигурация effector
6 мин
-
Brello: Миграция карточек на effector
13 мин
05. Персистентность Уже доступно!
Узнайте, как эффективно хранить и обрабатывать данные в вашем приложении. Освойте работу с Supabase, а также методы синхронизации и оптимизации взаимодействия с базой данных.
-
Что такое Supabase и как его применять
12 мин
-
Устанавливаем и настраиваем Supabase
17 мин
-
Локальный запуск и миграции
12 мин
-
Генерация типов для shared/api
6 мин
-
Сайд-эффекты в effector
21 мин
-
Brello: реализуем API на effector
23 мин
-
Загружаем, создаем и модифицируем карточки на effector
42 мин
06. Архитектура Уже доступно!
Исследуйте архитектурные паттерны и методологии, которые помогут вашему приложению оставаться масштабируемым и удобным для поддержки, в частности, паттерны Feature-Sliced Design.
-
Что такое Feature-Sliced Design
14 мин
-
Обзор слоя Shared
1 ч 3 мин
-
Обзор слоя Pages
37 мин
07. Планирование
Научитесь эффективно планировать разработку проектов и управлять временем. Изучите различные инструменты для планирования и отслеживания прогресса.
-
Основы планирование проектов
-
Инструменты управления задачами
14 мин
-
Как пользоваться Linear
1 ч 15 мин
-
Декомпозиция и оценка задач
-
Настройка Linear для Brello
16 мин
-
Трекеры времени и отчеты о продуктивности
08. Погружение в Effector
Глубоко погрузитесь в возможности и техники работы с Effector, чтобы максимально использовать его потенциал в создании сложной бизнес-логики и реактивных приложений.
-
Почему effector
-
Цепочки событий
12 мин
-
Создание workflow
-
Комбинации состояний
9 мин
-
Что такое fork() и Scope
18 мин
-
Подключение к React
14 мин
-
Работа со списками
8 мин
-
Цепочки эффектов
14 мин
-
Создание фабричных моделей
21 мин
-
Тестирование моделей и фабрик
22 мин
-
Сохранение значений в localStorage
-
Типичные ошибки
09. Feature Sliced Design
Изучите методологию Feature Sliced Design, которая помогает создавать масштабируемые и легко поддерживаемые frontend-приложения. Получите глубокие знания о структуре FSD и научитесь сравнивать различные архитектурные подходы для выбора наилучшего решения для вашего проекта.
-
Структурный обзор слоёв
-
Сравнение с модульным и монолитным подходами
-
Обзор слоя entities
-
Entities на примере Brello
-
Обзор слоя features
-
Обзор слоя Widgets
-
Features & Widgets на примере Brello
-
Обзор слоя processes
-
Как применять методологию
-
Как расширять методологию
-
Инструменты валидации и визуализации
10. Atomic-Router
Практическое руководство по использованию Atomic-Router для управления сложными маршрутами в приложениях. Реализуйте маршрутизацию в своем проекте, используя современные подходы.
-
Что такое Atomic-Router
-
Установка Atomic-Router
-
Составление карты маршрутизации проекта
-
Сложная маршрутизация
-
Настраиваем файловый роутинг в Vite
-
Цепочка роутов
-
Подключение компонентов к цепочке роутов
-
Типичные ошибки и узкие места
11. Аутентификация
В этом блоке вы научитесь создавать безопасную систему аутентификации, используя Supabase и OAuth, чтобы пользователи могли легко и безопасно входить в ваше приложение.
-
Введение в аутентификацию с Supabase
-
Brello: Пишем страницу Входа
-
Brello: API: Google Auth
-
Как проверить аутентификацию в effector и atomic-router
-
Brello: Защищенные роуты через chainAuthenticated
12. Профиль пользователя
Этот блок научит вас создавать привлекательный и функциональный онбординг для новых пользователей, помогая им быстро и легко начать работу с вашим приложением.
-
Определение задач онбординга
-
Реализация онбординга на effector
-
Пишем страницу настроек профиля
-
Отслеживание активной навигации
-
Как реализовать загрузку файлов
-
Покрытие тестами модели настроек профиля
-
Удаление профиля пользователя
13. Управление досками
Создадите таблицы и интерфейсы для управления сущностями. На примере Brello, разберетесь как обращаться к внешним API, проектировать бд и поток данных во frontend-приложении.
-
Определение цели и декомпозиция на задачи
-
Обзор Unsplash API
-
Таблицы в Supabase
-
Создание доски
-
Загрузка и отображение списка досок
-
Управление настройками доски
-
Поиск и фильтрация досок
-
Обновление в реальном времени
14. Подготовка к Production
Этот блок посвящен подготовке вашего проекта к запуску в производственной среде. Мы рассмотрим оптимизацию кода, настройку окружения, стратегии деплоя, обработку ошибок и мониторинг.
-
Оптимизация кода и сборки
-
Управление конфигурациями
-
Обзор стратегий деплоя (Docker, Swarm, Kubernetes, Serverless, Bare Metal)
-
Настройка Netlify для production
-
Supabase в production: Резервные копии и безопасность
-
Обработка ошибок (Sentry)
-
Обзор практик безопасности
-
Отправка отчетов для составления аналитики продукта
-
Сбор технической аналитики (WebVitals reports, Metrics, Alerts)
-
Установка Helpdesk (Intercom и другие)
15. Завершение и выводы
Изучите методы анализа эффективности вашего проекта и узнайте, как собирать и использовать обратную связь для его улучшения. Подведите итоги, какие знания обретены, навыки получены.
-
Какие данные необходимы для анализа проекта
-
Сбор и анализ обратной связи от пользователей
-
Анализ backlog и выделение основных фич
-
Как избавляться от технического долга
-
Методы A/B тестирования
-
Работа с Feature Toggles
-
Куда двигаться дальше
Регистрируйся и осваивай самый важный навык 2025 года
Мы свяжемся с тобой, ответим на все вопросы и поможем занять место в программе. А начать совместную работу мы готовы уже сейчас.
Остались вопросы?
Мы с радостью на них ответим
Сейчас доступно только 6 блоков. Когда будут доступны остальные?
Следующий блок открывается в среднем за 1-2 недели.
Мы пришлем приглашение на почту и в Telegram канал, вы точно не пропустите.
Что будет, если я пройду все доступные блоки раньше, чем выйдут новые?
Мы оповестим вас о выходе новых блоков. При этом, во время ожидания вы можете продолжать отправлять код на ревью, посещать вебинары, получать ответы на вопросы в чате и т.д.
Стоит ли мне ждать, пока материал будет полностью готов, чтобы купить?
С каждым новым блоком, количество готового контента в программе будет всё больше, а значит и цена выше.
Следующий блок, будет открываться только после прохождения предыдущего и выполнения домашнего задания.
На освоение нового материала и практику полученных знаний требуется некоторое время, купить программу сейчас может быть выгоднее, дабы начать обучение сразу.
Подойдет ли мне программа, если я уже Senior разработчик?
Да! Если вы хотите уверенно проектировать frontend-архитектуру продукта, есть желание или необходимость разобраться с FSD или effector.
Программа очень обширна, каждый найдет в ней полезное для себя.
У вас есть рассрочка?
Мы предоставляем рассрочку, можно разбить платеж на несколько частей, за каждую оплаченную часть открывается пропорциональная часть программы.
Оставьте заявку и мы вам расскажем об условиях.
Что делать, если программа мне не подошла?
Мы выполним возврат всей суммы в течение первых 10 дней, если вы не успели пройти всю доступную программу.
Возврат доступен не более, чем на ту сумму, которая была уплачена.
Какие бывают скидки?
Прямо сейчас программа доступна по Early Bird скидке.
С каждым новым блоком, количество готового контента в программе будет всё больше, а значит и цена выше.
Могу ли я купить программу для команды?
Да! У нас есть скидки для командных заказов.
Напишите нам в Telegram, расскажите кратко ваш кейс и мы предложим лучший вариант для вашего бизнеса.
Мне нужна только часть программы, могу ли я купить несколько блоков?
Нет. Прямо сейчас доступна только вся программа целиком.
Напишите нам в Telegram, расскажите кратко вашу ситуацию, какие блоки вам нужны и почему только они.
Не нашли ответа на ваш вопрос?
Можете смело написать нам лично в Телеграм