Stepik О курсе
Подробнее
Этот курс помогает пошагово собрать полноценный клиент для сервиса с товарами и поддержкой пользователей. В проекте есть публичная часть с каталогом и страницей товара, авторизация и регистрация, личный кабинет, раздел «Мои товары», поиск и фильтры, а также отдельная административная зона.
Курс полезен тем, что показывает не только отдельные приёмы React, но и логику настоящего продукта: роли пользователей, работу с REST API, состояние загрузки и ошибок, управление формами, модальные сценарии, список-деталь, фильтрацию, пагинацию и обновление данных после действий пользователя.
После прохождения курса у учащегося остаётся законченный проект, который можно использовать как основу для портфолио и как шаблон для дальнейшей разработки похожих клиентских приложений.
Формат обучения сочетает:
скринкасты с пошаговой разработкой проекта;
текстовые лекции после каждого урока;
проверочные тесты;
отдельное техническое задание для самостоятельной работы;
персональную проверку в формате код-ревью
Требования
Что нужно для старта
- Базовое понимание JavaScript/TypeScript или основ программирования на любом ЯП
- Знакомство с HTML и CSS
- Желательно уметь читать TypeScript-код, но глубокая экспертиза не требуется
- Полезно знать основы React: компоненты, props, state, hooks
- Желательно понимать, что такое REST API и запросы
Результат
Что вы получите
- Строить SPA на React с маршрутизацией, layout-структурой и защитой приватных страниц
- Работать с серверным API через axios и TanStack Query
- Реализовывать регистрацию, вход, выход и хранение сессии пользователя.
- Создавать каталог товаров с пагинацией, карточками, страницей товара и загрузкой изображений
- Делать поиск и фильтрацию товаров по тексту, категории и цене
- Собрать личный кабинет пользователя со сменой пароля и историей действий
- Проектировать интерфейс для поддержки: список обращений, переписку, создание новых тикетов, отметку прочитанного и закрытие диалогов
- Реализовывать админские сценарии: управление пользователями, товарами и обращениями
- Использовать формы, валидацию и модальные окна для удобных пользовательских сценариев
- Организовывать код по сущностям, фичам, виджетам и страницам, чтобы проект было проще масштабировать
Аудитория
Для кого этот курс
- - Для начинающих и продолжающих frontend-разработчиков, которые хотят собрать сложное приложение на React не только по учебным примерам, но и на основе реального продуктового сценария
- - Для тех, кто уже знает основы JavaScript или TypeScript, но хочет научиться работать с API, формами, роутингом, кэшем запросов и ролями пользователей
- - Для студентов и junior-разработчиков, которым нужен сильный проект в портфолио
- - Для тех, кто делает личные кабинеты, каталоги, маркетплейсы, CRM-подобные интерфейсы или административные панели
- - Для разработчиков, которым важно понять, как строится клиентская часть сервиса с разными сценариями для пользователя и администратора
Содержание
17 занятийПрограмма курса
№ТемаЧто внутри
01Первые шаги
- Старт
02Модуль 1. Запуск проекта и первый экран
- Создаём проект с нуля
- Первый список товаров на экране
- Что делать, когда запрос упал
- Индикатор загрузки и оформление
03Модуль 2. Архитектура FSD и базовая инфраструктура
- Как устроим проект: архитектура FSD
- Удобные импорты через алиас @
- Подключаем Bootstrap
- Единая точка для запросов к API
- Первые переиспользуемые компоненты
04Модуль 3. Маршрутизация и каркас интерфейса
- Навигация между страницами
- Общий каркас страниц
- Шапка сайта с меню
- Раскладываем страницы по местам
05Модуль 4. Сессия пользователя и работа с токеном
- Кэшируем данные с сервера
- Описываем пользователя и сессию
- Запоминаем вход между перезагрузками
- Текущий пользователь доступен везде
- Подставляем токен в каждый запрос
- Реагируем на «вы не авторизованы»
06Модуль 5. Регистрация, вход и защита страниц
- Запрос на вход
- Собираем логику входа
- Готовим форму входа
- Делаем форму входа удобной и надёжной
- Регистрация: заготовка
- Форма регистрации
- Выход из аккаунта
- Шапка под авторизованного пользователя
- Закрываем приватные страницы
07Модуль 6. Каталог товаров
- Описываем товар
- Запросы за товарами
- Хуки для каталога
- Список товаров на главной
- Красивая карточка товара
- Страница одного товара
- Полная карточка товара
08Модуль 7. Личный кабинет
- Выделяем пользователя в отдельную сущность
- Получаем актуальный профиль
- Страница профиля
- Оформляем профиль
- Общий индикатор загрузки
- История действий: данные
- История действий на странице
- Таблица истории действий
- Смена пароля: логика
- Форма смены пароля
- Смена пароля без разлогина
09Модуль 8. Товары продавца
- Создание товара: логика
- Страница «Мои товары»
- Форма создания товара
- Редактирование товара: заготовка
- Форма редактирования товара
10Модуль 9. Удаление и поиск товаров
- Удаление товара: логика
- Окно подтверждения удаления
- Запросы поиска и фильтрации
- Строка поиска
- Фильтры по категории и цене
- Страница поиска
11Модуль 10. Администрирование
- Данные для администратора
- Страница списка пользователей
- Таблица пользователей
- Блокировка пользователя: логика
- Блокировка и разблокировка
- Карточка пользователя: заготовка
- Карточка пользователя
- Все товары глазами админа
- Каркас админки
12Модуль 11. Уведомления и пагинация
- Всплывающие уведомления
- Сообщения об успехе
- Вторая версия API-клиента
- Запросы с пагинацией
- Готовим постраничную загрузку
- Каталог загружается страницами
- Переключаем страницы каталога
13Модуль 12. Изображения товаров
- Получаем картинку товара
- Фото товара в карточке
- Фото на странице товара
- Загрузка изображения: логика
- Выбор файла: заготовка
- Подключаем загрузку фото
- Форма загрузки фото
- Удаляем загруженное фото
- Иконки категорий
- Обложка витрины и анимация карточек
14Модуль 13. Поддержка: обращения
- Разбираемся с модулем поддержки
- Описываем обращения и сообщения
- Запросы за обращениями
- Страница поддержки: каркас
- Список обращений: заготовка
- Список обращений на экране
- Оформляем список обращений
- Когда обращений ещё нет
- Переписка внутри обращения
- Ответ на обращение: логика
- Форма ответа на обращение
- Отмечаем сообщения прочитанными
- Создание обращения: логика
- Форма нового обращения
- Закрываем обращение
15Модуль 14. Администрирование поддержки
- Админ-страница поддержки
- Вкладки по статусам
- Список обращений: каркас
- Список обращений и переход в диалог
- Диалог глазами администратора
- Ответ администратора
- Чиним пузыри и ссылку «Поддержка»
- Автопрокрутка переписки
- Обновление в реальном времени
- Уведомление о новом ответе
16Модуль 15. Витрина и финал
- Флажок «Наш выбор»
- Hero-блок с призывом к действию
- Финал главной страницы
- Подведение итогов
17Окончание
- Это все
01Первые шаги
- Старт
02Модуль 1. Запуск проекта и первый экран
- Создаём проект с нуля
- Первый список товаров на экране
- Что делать, когда запрос упал
- Индикатор загрузки и оформление
03Модуль 2. Архитектура FSD и базовая инфраструктура
- Как устроим проект: архитектура FSD
- Удобные импорты через алиас @
- Подключаем Bootstrap
- Единая точка для запросов к API
- Первые переиспользуемые компоненты
04Модуль 3. Маршрутизация и каркас интерфейса
- Навигация между страницами
- Общий каркас страниц
- Шапка сайта с меню
- Раскладываем страницы по местам
05Модуль 4. Сессия пользователя и работа с токеном
- Кэшируем данные с сервера
- Описываем пользователя и сессию
- Запоминаем вход между перезагрузками
- Текущий пользователь доступен везде
- Подставляем токен в каждый запрос
- Реагируем на «вы не авторизованы»
06Модуль 5. Регистрация, вход и защита страниц
- Запрос на вход
- Собираем логику входа
- Готовим форму входа
- Делаем форму входа удобной и надёжной
- Регистрация: заготовка
- Форма регистрации
- Выход из аккаунта
- Шапка под авторизованного пользователя
- Закрываем приватные страницы
07Модуль 6. Каталог товаров
- Описываем товар
- Запросы за товарами
- Хуки для каталога
- Список товаров на главной
- Красивая карточка товара
- Страница одного товара
- Полная карточка товара
08Модуль 7. Личный кабинет
- Выделяем пользователя в отдельную сущность
- Получаем актуальный профиль
- Страница профиля
- Оформляем профиль
- Общий индикатор загрузки
- История действий: данные
- История действий на странице
- Таблица истории действий
- Смена пароля: логика
- Форма смены пароля
- Смена пароля без разлогина
09Модуль 8. Товары продавца
- Создание товара: логика
- Страница «Мои товары»
- Форма создания товара
- Редактирование товара: заготовка
- Форма редактирования товара
10Модуль 9. Удаление и поиск товаров
- Удаление товара: логика
- Окно подтверждения удаления
- Запросы поиска и фильтрации
- Строка поиска
- Фильтры по категории и цене
- Страница поиска
11Модуль 10. Администрирование
- Данные для администратора
- Страница списка пользователей
- Таблица пользователей
- Блокировка пользователя: логика
- Блокировка и разблокировка
- Карточка пользователя: заготовка
- Карточка пользователя
- Все товары глазами админа
- Каркас админки
12Модуль 11. Уведомления и пагинация
- Всплывающие уведомления
- Сообщения об успехе
- Вторая версия API-клиента
- Запросы с пагинацией
- Готовим постраничную загрузку
- Каталог загружается страницами
- Переключаем страницы каталога
13Модуль 12. Изображения товаров
- Получаем картинку товара
- Фото товара в карточке
- Фото на странице товара
- Загрузка изображения: логика
- Выбор файла: заготовка
- Подключаем загрузку фото
- Форма загрузки фото
- Удаляем загруженное фото
- Иконки категорий
- Обложка витрины и анимация карточек
14Модуль 13. Поддержка: обращения
- Разбираемся с модулем поддержки
- Описываем обращения и сообщения
- Запросы за обращениями
- Страница поддержки: каркас
- Список обращений: заготовка
- Список обращений на экране
- Оформляем список обращений
- Когда обращений ещё нет
- Переписка внутри обращения
- Ответ на обращение: логика
- Форма ответа на обращение
- Отмечаем сообщения прочитанными
- Создание обращения: логика
- Форма нового обращения
- Закрываем обращение
15Модуль 14. Администрирование поддержки
- Админ-страница поддержки
- Вкладки по статусам
- Список обращений: каркас
- Список обращений и переход в диалог
- Диалог глазами администратора
- Ответ администратора
- Чиним пузыри и ссылку «Поддержка»
- Автопрокрутка переписки
- Обновление в реальном времени
- Уведомление о новом ответе
16Модуль 15. Витрина и финал
- Флажок «Наш выбор»
- Hero-блок с призывом к действию
- Финал главной страницы
- Подведение итогов
17Окончание
- Это все
Организатор
Автор курса
Мнения учеников
Отзывы о курсе
Оставьте отзыв
Расскажите о качестве обучения, поддержке и результате. Это поможет другим выбрать организацию осознанно.
Оставьте заявку
Консультант ответит на вопросы о курсе «TypeScript|React: собираем клиент интернет-каталога с перепиской» и поможет разобраться в деталях обучения.
Нажимая кнопку, вы даете согласие на обработку персональных данных
Информация обновлена 7 сентября 2026 г.
Продолжить выбор
Похожие курсы
Начать без затрат
