БОНУС: при оплате любого тарифа до 15 октября — бесплатная часовая консультация.

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

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

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

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

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

О чем это

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

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

Программа

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

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

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

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

    00:14

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

    00:12

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

    00:24
01. Инициализация

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

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

    00:17

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

    00:26

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

    00:19

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

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

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

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

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

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

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

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

    00:30

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

    00:15

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

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

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

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

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

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

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

    00:48

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

    00:07

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

    00:12

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

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

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

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

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

  • Обзор effector

  • Конфигурация окружения

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

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

  • Переносим логику карточек на effector

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

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

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

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

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

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

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

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

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

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

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

  • Обзор Row Level Security в Supabase

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

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

  • Обзор слоя Pages

  • Что такое FSD и какие основные принципы

  • Обзор слоя shared

  • Обзор слоя app

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

07. Планирование

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

  • Основы планирование проектов

  • Инструменты управления задачами

  • Как пользоваться Linear

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

  • Настройка Linear для Brello

  • Трекеры времени и отчеты о продуктивности

08. Погружение в Effector

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

  • Почему effector

  • Цепочки событий

  • Создание workflow

  • Комбинации состояний

  • Что такое fork() и Scope

  • Подключение к React

  • Работа со списками

  • Цепочки эффектов

  • Создание фабричных моделей

  • Тестирование моделей и фабрик

  • Сохранение значений в 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

  • Создание доски

  • Загрузка и отображение списка досок

  • Управление настройками доски

  • Поиск и фильтрация досок

  • Сохранение оставшихся идей в backlog

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

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

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

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

    $399 / 39 900₽

    $435 / 43 500₽

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

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

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

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

    • Возможность докупить консультации

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

    $699 / 69 900₽

    $768 / 76 800₽

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

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

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

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

    • Возможность докупить консультации

    • Проверка домашнего задания

    • Ревью кода вашего проекта

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

  • Стартап

    $999 / 99 900₽

    $1098 / 109 800₽

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

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

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

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

    • Возможность докупить консультации

    • Проверка домашнего задания

    • Ревью кода вашего проекта

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

    • Совместное декомпозиция продукта

    • Оценка и планирование итераций

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

Записаться

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

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

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

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

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

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

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

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

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

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

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

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

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