Курс на Stepik
Обложка курса «Фулстек-разработка веб-сервиса на TypeScript, Reaсt, Node.js» на Stepik
Бесплатно

Фулстек-разработка веб-сервиса на TypeScript, Reaсt, Node.js ★ 4.958

Открыть на
STEPIK.ORG

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

Показатель Текущие показатели Рост
Значение 🏆 Рейтинг 3 дн 7 дн 30 дн
Количество учеников на курсе «Фулстек-разработка веб-сервиса на TypeScript, Reaсt, Node.js»Учеников на курсе 10 439
Сертификаты, выданные на курсе «Фулстек-разработка веб-сервиса на TypeScript, Reaсt, Node.js»Сертификатов выдано 0
Отзывы о курсе «Фулстек-разработка веб-сервиса на TypeScript, Reaсt, Node.js»Отзывов получено 24
Рейтинг курса «Фулстек-разработка веб-сервиса на TypeScript, Reaсt, Node.js»Рейтинг курса 4.958
Уроки в курсе «Фулстек-разработка веб-сервиса на TypeScript, Reaсt, Node.js»Количество уроков 154
Время прохождения курса «Фулстек-разработка веб-сервиса на TypeScript, Reaсt, Node.js»Время прохождения курса —
Обновления курса «Фулстек-разработка веб-сервиса на TypeScript, Reaсt, Node.js»Обновления курса — —
Дата публикации курса «Фулстек-разработка веб-сервиса на TypeScript, Reaсt, Node.js»Дата публикации курса — ———
Последнее обновление курса «Фулстек-разработка веб-сервиса на TypeScript, Reaсt, Node.js»Последнее обновление — ———
Сложность normal — ———

Содержание курса

Разделы в курсе «Фулстек-разработка веб-сервиса на TypeScript, Reaсt, Node.js» 27 разделов Уроки в курсе «Фулстек-разработка веб-сервиса на TypeScript, Reaсt, Node.js» 154 урока Время прохождения курса «Фулстек-разработка веб-сервиса на TypeScript, Reaсt, Node.js» 1 ч. Последнее обновление курса «Фулстек-разработка веб-сервиса на TypeScript, Reaсt, Node.js» обн. 7 августа 2026

Введение

6 уроков
1. Обзор архитектуры и фичей учебного проекта ↗
2. Как проходит обучение ↗
3. Связь с Автором ↗
4. Создание графического прототипа ↗
5. Формирование и оценка бэклога проекта ↗
6. Установка программ для разработки ↗

База

10 уроков
1. Мастеркласс по VSCode ↗
2. Создание React приложения с помощью Vite ↗
3. Знакомство с Git и GitHub ↗
4. Получите доступ к полному исходному коду проекта на гитхабе ↗
5. HTML теги ↗
6. React и JavaScript ↗
7. Устанавливайте версии пакетов 1 в 1 как в учебнике ↗
8. Автоматическое форматирование кода через Prettier ↗
9. Создание Node.js приложения на TypeScript ↗
10. Поддержите автора подпиской ↗

Бэкенд-фронтенд, уровень 1

4 урока
1. Создание express приложения ↗
2. Создание эндпоинта, возвращающего JSON ↗
3. Добавление tRPC в бэкенд ↗
4. Добавление tRPC во фронтенд ↗

Качество кода

6 уроков
1. Проверка типов ↗
2. Создание скриптов для монорепы ↗
3. Стандартизация стиля TypeScript кода с помощью ESLint ↗
4. Автоматический вызов проверок и фиксов при коммите ↗
5. Стандартизация стиля сообщений в Git коммитах ↗
6. Поддержите автора подпиской ↗

Роутер

2 урока
1. Добавление React Router ↗
2. Улучшение типизации React Router ↗

Вспомогательные библиотеки

2 урока
1. Знакомстов с Lodash, генерация фейкового контента ↗
2. Знакомство с Zod и создание tRPC процедуры с инпутом ↗

Вёрстка

7 уроков
1. Создание Layout компонента общего для всех страниц ↗
2. Добавлям CSS стили с применением SCSS ↗
3. Создание очередной страницы веб-приложения ↗
4. Создание переиспользуемых компонентов ↗
5. Стандартизация стиля SCSS файлов с помощью Stylelint ↗
6. Проверка валидности SCSS файлов ↗
7. Поддержите автора подпиской ↗

Форма

6 уроков
1. Форма: база ↗
2. Форма: инпут компоненты ↗
3. Форма: Formik ↗
4. Форма: валидация ↗
5. Форма: забота о UX ↗
6. Форма: Zod валидация ↗

Бэкенд-фронтенд, уровень 2

5 уроков
1. Разделение tRPC бэкенда на отдельные файлы ↗
2. Автоматическая генерация индекс файла ↗
3. Добавление tRPC мутации ↗
4. Переиспользование логики валидации бэка на фронте ↗
5. Ограничение на импорт кода бэкенда во фронт ↗

Рефакторинг, уровень 1

9 уроков
1. Форма: загрузка ↗
2. Форма: успех ↗
3. Форма: ошибка ↗
4. Стили: Input ↗
5. Стили: Textarea ↗
6. Компоненты: Alert ↗
7. Компоненты: Button ↗
8. Компоненты: FormItems ↗
9. Поддержите автора подпиской ↗

База данных, уровень 1

7 уроков
1. Поднятие базы данных PostgreSQL ↗
2. Prisma: подключение базы данных (БД) ↗
3. Передача клиента Prisma в tRPC контекст ↗
4. Prisma: поиск по записям БД через Prisma клиент ↗
5. Prisma: создание записей в БД ↗
6. Prisma: добавление новых полей в существующую таблицу ↗
7. Используем superjson для получения даты с бэкенда ↗

Авторизация

12 уроков
1. Авторизация: модель пользователя + эндпоинт регистрации ↗
2. Использование инструмента для ручного вызова tRPC эндпоинтов ↗
3. PostgreSQL: GUI для работы с БД ↗
4. Авторизация: страница регистрации ↗
5. Авторизация: эндпоинт для входа ↗
6. Авторизация: страница для входа ↗
7. Авторизация как таковая ↗
8. Environment Variables: backend ↗
9. Environment Variables: webapp ↗
10. Авторизация: соль ↗
11. Авторизация: валидация токена ↗
12. Поддержите автора подпиской ↗

База данных, уровень 2

2 урока
1. Prisma: связанные сущности ↗
2. CRUD: Редактирование сущностей ↗

Рефакторинг, уровень 2

6 уроков
1. Форма: создание своей обёртки ↗
2. Создание контекста клиентского приложения ↗
3. Создание обёртки для повторяющейся логики страниц веб-приложения ↗
4. Улучшение типизации обёртки страниц ↗
5. Добавление страницы 404 ↗
6. Распределение файлов по папкам при увеличении кодовой базы ↗

Новые фичи

7 уроков
1. Редактирование профиля пользователя ↗
2. Очередное улучшение типизации обёртки страниц ↗
3. Изменение пароля ↗
4. Бесконечная подгрузка данных по нажатию кнопки ↗
5. Бесконечная подгрузка данных при скроле ↗
6. Делаем загрузку красивой ↗
7. Поддержите автора подпиской ↗

База данных, уровень 3

3 урока
1. Сложные связи сущностей в БД, оптимистический ответ на клиенте ↗
2. Функционал поиска по базе данных, автоматическая отправка формы ↗
3. Права пользователей ↗

Картинки

5 уроков
1. Установка HTML title на страницы веб-приложения ↗
2. Добавление favicon ↗
3. Добавление иконок ↗
4. Добавление подгружаемых картинок ↗
5. Добавление встроенных картинок ↗

База данных, уровень 4

1 урок
1. Prisma: кастомные миграции ↗

E-mail

7 уроков
1. E-mail: создание шаблонов с помощью MJML ↗
2. E-mail: создание и использование функций отправки ↗
3. E-mail: обработка шаблонов с помощью Handlebars ↗
4. Регистрация домена ↗
5. E-mail: Подключение домена к Brevo ↗
6. E-mail: реальная отправка писем с помощью Brevo ↗
7. Поддержите автора подпиской ↗

Бэкенд-фронтенд, уровень 3

4 урока
1. Создание опциональных env переменных ↗
2. Импорт роутов фронта на бэкенд ↗
3. Делаем обёртку для создания роутов ↗
4. Вытягиваем общие env переменные для фронта и бэка ↗

Ещё новые фичи

4 урока
1. CRON: выполнение задач по расписанию ↗
2. PostgreSQL: написание сложных запросов ↗
3. MJML + Handlebars: циклы и прочие хелперы ↗
4. Monorepo: shared workspace ↗

Стэйт-менeджмент

1 урок
1. Стэйт-менeджмент веб-приложения ↗

Логирование и работа с ошибками

15 уроков
1. Логирование: добавление логгера ↗
2. Логирование: стандартизация параметров и сериализация ошибок ↗
3. Логирование: красивый вывод логов во время разработки ↗
4. Логирование: tRPC бэкенд ↗
5. Логирование: Prisma ↗
6. Логирование: фильтрация логов ↗
7. Логирование: секретные данные ↗
8. Логирование: Express ↗
9. Логирование: tRPC клиент ↗
10. Sentry: отлавливание ошибок веб-приложения ↗
11. Создание нового типа ошибок ExpectedError ↗
12. Sentry: sourcemap веб-приложения ↗
13. Sentry: отлавливание ошибок бэкенда ↗
14. Sentry: sourcemap бэкенда ↗
15. Поддержите автора подпиской ↗

Тесты

6 уроков
1. Тесты: юнит тесты ↗
2. Тесты: интеграционные тесты ↗
3. Тесты: запрет на импорт тестов в основной код ↗
4. Тесты: переменные окружения ↗
5. Тесты: мок модулей ↗
6. Улучшение типизации функций pick & omit ↗

Файлы

4 урока
1. Загрузка изобрежния на Cloudinary ↗
2. Загрузка нескольких изображений на Cloudinary ↗
3. Загрузка файла на AWS S3 ↗
4. Загрузка нескольких файлов на AWS S3 ↗

Деплой

9 уроков
1. Стандартизируем общие env переменные для фронта и бэка ↗
2. Продуктовая аналитика с помощью Mixpanel ↗
3. Раздача веб-приложения через бэкенд ↗
4. Получение переменных окружения фронта с бэкенда ↗
5. DevOps: Создание Dockerfile, билд имейджа, запуск контейнера ↗
6. DevOps: Деплой в Heroku ↗
7. DevOps: Автоматический деплой в Heroku через GitHub Actions ↗
8. Отправка логов в Datadog ↗
9. Поддержите автора подпиской ↗

Завершние

4 урока
1. Анализ фронтового бандла ↗
2. Поддержка старых браузеров ↗
3. Автоматическое подставление CSS префиксов ↗
4. Окончание ↗