Помогаем разработчикам

Научиться разрабатывать и поддерживать сложные веб-приложения

И делимся накопленным опытом

  • Как перейти от стартапа/pet к реальному приложению со взрослыми практиками.

  • Как вырасти как инженер, получить новые навыки, понять куда двигаться. Middle → Senior.

О чем это

Мы покажем вам, как реализовать свой продукт самостоятельно

На примере нашей реализации Trello вы сможете сделать свой продукт, повторив наш путь.

Программа

Обучение разбито на блоки. Следующий блок завязан на предыдущий.

00. Добро пожаловать

В этом блоке вы познакомитесь с курсом, его структурой, преподавателями и платформой. Здесь вы узнаете, как максимально эффективно использовать курс для достижения своих образовательных целей.

  • Знакомство, структура курса, платформа

    14 мин

  • Продуктовая разработка

    12 мин

  • План разработки

    24 мин
01. Инициализация

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

  • Подбираем технический стек

    19 мин

  • Подбор и анализ зависимостей

    26 мин

  • Почему Vite, а не Webpack

    17 мин

  • Brello: Инициализация проекта

    24 мин
02. Инструментарий

Освойте инструменты, которые помогут поддерживать высокое качество кода, включая линтеры, форматтеры, и системы автоматизированного тестирования и непрерывной интеграции.

  • Форматирование и валидация кода

  • Оформление проекта в Github

  • Зачем нам CI/CD

    15 мин

  • Brello: Настраиваем CI/CD

    30 мин

  • Brello: Настраиваем CI для проверки Pull Request

    20 мин

  • Документирование, безопасность и анализ кода

  • Управление конфигами

03. Ключевая функциональность

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

  • Определяем основную функциональность продукта

    48 мин

  • Прототипирование MVP

    7 мин

  • Как работает React

  • Списки и карточки Kanban

    12 мин

  • Добавляем интерактивности карточкам

    38 мин

  • Как тестировать основную функциональность

  • Документирование и техническая поддержка

04. Реактивность

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

  • Реактивность, сигналы и effector

  • Архитектурные паттерны реактивного программирования

  • Составляющие приложения

    14 мин

  • Что такое effector

    9 мин

  • Как писать логику на effector

    19 мин

  • Установка и конфигурация effector

    6 мин

  • Brello: Миграция карточек на effector

    13 мин
05. Персистентность

Узнайте, как эффективно хранить и обрабатывать данные в вашем приложении. Освойте работу с Supabase, а также методы синхронизации и оптимизации взаимодействия с базой данных.

  • Как можно хранить данные SPA приложений

  • Что такое Supabase и как его применять

    12 мин

  • Устанавливаем и настраиваем Supabase

    17 мин

  • Локальный запуск и миграции

    12 мин

  • Генерация типов для shared/api

  • Сайд-эффекты в effector

    21 мин

  • Что такое API и как его описывать

  • Brello: реализуем API на effector

    23 мин

  • Загружаем, создаем и модифицируем карточки на effector

    42 мин

  • Обзор Row Level Security в Supabase

06. Архитектура

Исследуйте архитектурные паттерны и методологии, которые помогут вашему приложению оставаться масштабируемым и удобным для поддержки, в частности, паттерны Feature-Sliced Design.

  • Зачем Web-приложениям архитектура

    19 мин

  • Что такое Feature-Sliced Design

    14 мин

  • Обзор слоя Shared

    1 ч 3 мин

  • Обзор слоя Pages

    37 мин

  • Обзор слоя App

    7 мин

  • Зачем писать тесты

    9 мин
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

  • Куда двигаться дальше

Как все устроено?

  • Сколько потребуется времени?

    Это зависит от того, сколько времени вы готовы уделять. Если проходить один блок за неделю (3-4 часа контента + выполние домашнего задания), то понадобится где-то 2-3 месяца в общем.

  • Какие требования к опыту?

    Курс рассчитан на разработчиков с базовым знанием JavaScript / TypeScript, React.

  • В каком формате происходит обучение?

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

  • Есть ли домашнее задание на курсе?

    Да, курс очень практический, без воды. Каждое видео дает вам кусок информации, которую нужно освоить и применить.

    Весь курс разделен на блоки. Каждый блок имеет ДЗ и вопросы для проверки знаний.

  • Групповая работа

    Мы начинаем с определенной даты, двигаемся примерно в одном темпе на тарифах с Обратной связью и Стартап.

  • Когда открывается доступ?

    Мы готовы начать работу с вами уже сейчас.

Что входит?

На курсе есть все необходимые материалы для освоения.

  • Лекции и видео

    Теория в виде статей, пошаговых гайдов и видео-лекций.

  • Живые вебинары

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

  • Чат для общения

    Все участники помогают друг другу вместе с лекторами в Телеграм.

    В течении 24 часов (обычно быстрее) для тарифа с обратной связью и консультациями.

  • Практика, код-ревью и консультации

    Полноценный проект, который будем есть по кусочкам. Код-ревью и консультации — по желанию для соответствующий тарифов.

Инструменты

Технический стек

Вы будете строить приложение на основе нескольких современных технологий.

А мы разберем как эти технологии работают и как их применять.

  • 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+ готовых страниц и макетов. Быстро настраивается, позволяет экономить время и легко создавать современные, красивые интерфейсы

Записаться

Регистрируйся и осваивай самый важный навык 2025 года

Мы свяжемся с тобой, ответим на все вопросы и поможем занять место в программе. А начать совместную работу мы готовы уже сейчас.

Остались вопросы?

Мы с радостью на них ответим

У вас есть рассрочка?

Мы предоставляем рассрочку, можно разбить платеж на несколько частей. Оставьте заявку и мы вам расскажем условия

Что делать, если мне не понравился курс?

Мы выполним возврат всей суммы в течение первых 10 дней.

Не нашли ответа на ваш вопрос?

Можете смело написать нам лично в Телеграм

Задать вопрос