Шаблон итогового проекта React (2)

1.

Shortlist кандидатов
Придумайте 3-5 вариантов задач, которые могли бы стать вашим финальным проектом на
курсе
Разработка интернетмагазина DogFood
Название проекта
Какую бизнес-задачу решаем?
Крылов Денис Владимирович
Краткое описание
(по возможности укажите какие AI модели
планируете использовать)

2.

Разработка интернет-магазина DogFood
Используемые технологии
Язык/фреймворк: React 19 + TypeScript.
Стейт и данные: Redux Toolkit + RTK Query, оптимистичные апдейты (React 19 hook), React Router v6.
Формы/валидация: react-hook-form, yup.
UI/стили: CSS Modules, MUI, classnames.
Уведомления: react-toastify.
Сборка: Webpack (prod/dev) + альтернативная esbuild, PostCSS.
Код-стайл/качество: ESLint, Prettier, stylelint, husky/lint-staged.

3.

Разработка интернет-магазина DogFood
Форма логина и регистрации

4.

Разработка интернет-магазина DogFood
Страница каталога товаров

5.

Разработка интернет-магазина DogFood
Вид страницы товаров после обращения к поиску

6.

Разработка интернет-магазина DogFood
Вид карточки товара

7.

Разработка интернет-магазина DogFood
Корзина с товарами

8.

Разработка интернет-магазина DogFood
Страница «Избранное»

9.

Разработка интернет-магазина DogFood
Личный кабинет пользователя

10.

Разработка интернет-магазина DogFood
React toastify – примеры уведомлений
*Вставьте скрины примеров

11.

Shortlist кандидатов
Придумайте 3-5 вариантов задач, которые могли бы стать вашим финальным проектом на
курсе
Выводы
Название проекта
Какую бизнес-задачу решаем?
Краткое описание
(по возможности укажите какие AI модели
планируете использовать)

12.

Выводы по итогу обучения по программе «Разработка на
ReactJS: продвинутый уровень»
Опишите:
Чему научился: лучше понимать архитектуру фронтенда (деление на shared/features/pages), работу с RTK
Query и Redux Toolkit, оптимизации рендеров (memo/useMemo/useCallback), доступные модалки с порталами и
управлением фокусом, альтернативные сборки (webpack vs esbuild), React 19 hooks для оптимистичного UX.
Сложности: настройка типобезопасных форм (react-hook-form + yup), работа с SVG/сборщиками, поддержка
фокуса и сценариев закрытия в модалках, выравнивание архитектуры под новые требования.
Что хочется глубже: серверные рендеры и streaming/React 19, тестирование (e2e/видео/визуальное),
перформанс-метрики (web vitals), доступность (a11y) и автоматизированные проверки, продакшен-конвейер
(CI/CD) и мониторинг.

13.

Список используемых источников
giga.chat
Официальная документация React (hooks, React Router v6, React 19 preview-хуки).
Redux Toolkit и RTK Query docs.
react-hook-form + yup docs (валидация форм).
MUI документация для базовых UI-компонентов.
react-toastify docs (уведомления).
MDN Web Docs (Intersection Observer, focus management, keyboard handling).