Техническое задание на разработку фронтенд-приложения (React + Docker + Nginx)
Цель проекта:
Разработать клиентскую часть (frontend) учебного проекта с использованием React.
Приложение должно быть структурировано, развёрнуто в Docker-контейнере, использовать Nginx для раздачи статических файлов и быть готовым к подключению к backend API.
Технические требования
• Технологический стек
• Язык: JavaScript или TypeScript
• Фреймворк: React
• Сборка и развёртывание: Docker, Nginx
• Менеджер пакетов: npm или yarn
• Роутинг: react-router-dom
• Сетевые запросы: fetch или axios
• Управление состоянием: useState, useEffect, Context API или Redux (при необходимости)
• Тестирование: React Testing Library
• Для drag-and-drop: react-beautiful-dnd (опционально)
Функциональные требования
• UI-компоненты
• Реализовать переиспользуемые, логически разделённые компоненты интерфейса.
• Вёрстка и логика UI соответствуют тематике проекта (абсолютно любая, сделанная на коленке)
• Маршрутизация
• Настроить маршруты страниц, используя react-router-dom.
• Примеры маршрутов: /, /login, /dashboard, /details/:id.
• Работа с API
• Настроить взаимодействие с backend: получение/отправка данных, обработка ошибок, индикация загрузки.
• Управление состоянием
• Локальное или глобальное управление состоянием (useState, useReducer, Context API, Redux и др.)
• Обновление UI при изменении состояния.
• Тестирование
• Написать автоматические тесты с использованием React Testing Library.
• Покрыть основную бизнес-логику, валидацию форм, граничные сценарии.
Docker и Nginx
• Создать Dockerfile для фронтенд-приложения.
• Настроить docker-compose.yml (если требуется).
• Создать конфигурацию Nginx для раздачи статических файлов.
• Приложение должно запускаться через Docker по адресу
.
Структура проекта
• Проект должен быть декомпозирован на модули: компоненты, страницы, сервисы, хуки, утилиты и тесты.
• Структура директорий: components, pages, services, hooks, utils, tests и т.д.
Дополнительное задание (за доплату):
Добавить возможность перетаскивания элементов (drag-and-drop) с помощью библиотеки react-beautiful-dnd.
• Использовать компоненты DragDropContext, Droppable, Draggable.
• Обработать событие onDragEnd для обновления порядка элементов в состоянии React.
Будет предоставлено Docker приложение бекенда, Todo
Авторизация, Категории для Todo задач, Сами задачи (имя, текст, категория, дата)
Это домашнее задание в учебном заведении, больших требований не предъявляем.