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

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

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

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

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

О чем курс

Сделаем полноценный проект — таск-трекер систему, близкую по функционалу к Trello

Powerful, self-serve product and growth analytics to help you convert, engage, and retain more users. Trusted by over 4,000 startups.

Программа курса

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

00. Приветствие и введение

  • Знакомство, структура курса, план прохождения

01. Современная фронтенд-разработка

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

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

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

  • Гигиена: оформление коммитов и PR

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

  • Гигиена: подбор и анализ зависимостей

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

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

  • Гигиена: форматирование кода и сортировка импортов

  • Домашнее задание

02. Планирование и оценка задач

  • Linear: настройка проектов Brello

  • Linear: быстрый гайд

  • Linear: декомпозиция и оценка задач

  • Домашнее задание

03. Введение в CI/CD

  • Теория

  • Практика

  • Домашнее задание

04. Effector

  • Event

  • sample

  • Store

  • Бизнес логика

  • Установка effector

  • useList + useStoreMap

  • useUnit + factories

  • attach

  • Effect

  • Домашнее задание

05. Feature Sliced Design

  • Основы

  • shared/config + shared/init

  • Entities

  • Widgets

  • Pages

  • shared/lib + shared/ui

  • App

  • Processes

  • Extension

  • Features

  • shared/api

  • Домашнее задание

06. Atomic Router

  • Установка

  • chainAuthenticated

  • Домашнее задание

07. API

  • API и спецификации

  • Реализуем API на effector

  • Домашнее задание

08. Brello: Authn

  • Пишем страницу входа

  • Подключаем Google Auth

  • Финализируем аутентификацию

  • Домашнее задание

09. Brello: Onboarding

  • Workspaces Onboarding Supabase + API

  • Workspaces Onboarding React + Effector

  • Домашнее задание

10. Brello: Workspaces

  • Supabase: настройка локальной разработки

  • Brello: компонент загрузки файлов + API

  • Brello: Workspace settings

  • Brello: обновление effector до 23-й версии

  • Brello: рефакторинг Workspaces

  • Домашнее задание

11. Tests

  • Tests: теория

  • Tests: настройка и установка окружения для тестов

  • Tests: тесты для моделей

  • Tests: тесты компонентов

  • E2E: теория

  • E2E: установка окружения

  • Brello: e2e-тестирование онбординга

  • Домашнее задание

12. Brello: Boards

  • Boards: Unsplash API

  • Boards: миграции

  • Boards: создание доски

  • Boards: разметка для списков

  • Boards: настройки доски

  • Boards: модель поиска

  • Boards: модель списка

  • Домашнее задание

13. Brello: Cards

  • Cards: API и миграции

  • Cards: загрузка списков

  • Cards: загрузка карточек

  • Cards: логика создания

  • Cards: drag’n’drop

  • Cards: редактирование карточки

  • Cards: удаление/архивация карточки

  • Домашнее задание

14. Brello: User Profile

  • User Profile: логика для настроек

  • User Profile: меню навигации

  • User Profile: удаление профиля

  • Домашнее задание

15. Brello: Production

  • Production: Code and Bundle Optimizations

  • Production: Netlify Production Environment

  • Production: Supabase Production Environment (Backup)

  • Production: Review of deploy strategies (Docker, Swarm, Kubernetes, Bare Metal)

  • Production: Error handling (Sentry)

  • Production: Basic analytics

  • Production: Tech analytics (WebVitals reports, Metrics, Alerts)

  • Production: Help desk (Intercom/..)

  • Домашнее задание

16. Results

  • Results: Feature Backlog

  • Results: Tech Improvements

  • Results: Maintain Legacy (как избавляться от тех.долга)

  • Results: A/B Tests

  • Results: Feature Toggle

  • Results: Payments Integration Review (?)

  • Results

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

  • Сколько длится курс?

    Это зависит от того, сколько времени вы готовы уделять.

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

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

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

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

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

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

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

Что входит?

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

  • Видео-лекции

    Записанная теория и практика к ней с разбором

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

    Проходит 1 раз в 2 недели: отвечаем на вопросы в живую, плюс иногда может проходить небольшой лайвкодинг

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

    Общаемся друг с другом и отвечаем на ваши вопросы в Телеграм.

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

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

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

Инструменты

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

Какие главные инструменты будем использовать на проекте

  • TypeScript

    Для надежного и поддерживаемого кода: статическая типизация, четкая документация, меньше ошибок.

  • React

    Ваш путь к легкой, масштабируемой и поддерживаемой разработке интерфейсов: декларативные компоненты и улучшенное переиспользование кода.

  • Effector

    Удобное управление бизнес-логикой: эффективные средства работы с данными, событиями и сайд-эффектами для прозрачного и легко поддерживаемого кода.

  • Vite

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

  • Vitest

    Быстрый тестовый фреймворк для Vite. Переиспользует конфигурации Vite, совместим с Jest. Интеллектуальный режим наблюдения, поддержка ESM, TypeScript и JSX.

  • Supabase

    Удобная и масштабируемая инфраструктура для серверов и баз данных с автоматическим API на основе PostgreSQL, ускоряющая создание и поддержку бэкэнда приложений.

Варианты участия

Выбирай тариф, который подойдёт для решения твоих задач

  • Самостоятельный

    $399 / 39 900₽

    $435 / 43 500₽

    • Все теоретические и практические материалы

    • Участие в вебинарах

    • Доступ в чат учеников

    • Доступ к материалам на 3 месяца

  • С обратной связью

    $699 / 69 900₽

    $768 / 76 800₽

    • Проверка ДЗ, ревью кода

    • Регулярные ответы в чате

    • Все теоретические и практические материалы

    • Участие в вебинарах

    • Доступ в чат учеников

    • Доступ к материалам на 6 месяцев

  • С консультациями

    $999 / 99 900₽

    $1098 / 109 800₽

    • Проверка ДЗ, ревью кода

    • Регулярные ответы в чате

    • 4 личные консультации от ведущих курса

    • Все теоретические и практические материалы

    • Участие в вебинарах

    • Доступ в чат учеников

    • Доступ к материалам на 6 месяцев

Записаться на курс

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

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

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

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

Выдаете ли вы сертификат?

Да, после прохождения курса выдаем сертификат, в зависимости от выбранного вами тарифа

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

Да, после прохождения курса выдаем сертификат, в зависимости от выбранного вами тарифа

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

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

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

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

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