test-task-TECCOD

Задача

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

Требования к функциональности:

1. Страница со списком услуг (данные можно захардкодить или замокать).

2. Для каждой услуги показать:

• название
• цену
• кнопку «Добавить»

1. При нажатии на кнопку услуга добавляется в список выбранных.
2. Отобразить блок «Итого»:

• выбранные услуги
• общую сумму
• кнопку «Оформить заказ» (без логики оплаты)

1. Интерфейс должен быть адаптивным (mobile-first).

Технические требования:

• React + TypeScript
• функциональные компоненты
• корректная работа со состоянием
• аккуратная и понятная структура кода

---

Реализация

1. Создана главная и единственная страница приложения.
2. Созданы основные фичи для работы с сервисами и корзиной.
3. Создан redux-стор для хранения состояния приложения. А так же хуки и селекторы для работы с ним.
4. Создан хук для хронения данных в LocalStorage, чтобы не терять корзину при перезагрузке страницы.
5. Сделана "базовая" адаптивная вёрстка с приоритетом для мобильных устройств.

Используемый стек

• Frontend:
  • React + TypeScript
  • Redux Toolkit
  • React Router
  • Sass, Material UI + TailwindCSS
• Сборка и инструменты:
  • Vite
  • ESLint + Prettier
• Прочее:
  • localStorage

Структура проекта

.
├── index.html     
├── public                    // Публичные файлы
├── src     
│   ├── app                   // Основная логика приложения
│   │   ├── hooks             // Пользовательские хуки
│   │   ├── providers         // Провайдеры (Redux, MUI)
│   │   ├── router            // Роутинг
│   │   ├── selectors         // Селекторы
│   │   ├── store             // СRedux Toolkit хранилище
│   │   ├── theme             // Кастомная тема для Material UI
│   │   └── App.tsx           // Главный компонент приложения
│   ├── features/             // Фичи (основная функциональность)
│   │   ├── CartDrawer/       // Компонент корзины
│   │   ├── CartList/         // Список товаров в корзине
│   │   └── ServiceCard/      // Карточка услуги
│   ├── layouts/              // Общие слои приложения
│   │   ├── AppHeader/        // Шапка приложения
│   │   └── AppLayout/        // Основной макет приложения
│   ├── pages/                // Страницы приложения
│   │   ├── MainPage/         // Главная страница
│   │   ├── NotFoundPage/     // Страница 404
│   │   └── ErrorBoundary/    // Обработка ошибок
│   ├── shared/               // Общие компоненты и утилиты
│   │   ├── ui/               // UI-компоненты (кнопки, иконки, списки)
│   │   └── utils/            // Утилиты (форматирование, классы)
│   ├── styles/               // Глобальные и модульные стили
│   └── main.tsx              // Точка входа в приложение

Команды

Команда	Действие
make i	Установка зависимостей
make ir	Установка зависимостей со сбросом кэша
make l	Eslint + Fix по ./src
make f	Prettier + по ./src
make d	Локальный запуск
make b	Сборка проекта
make cl	удаление папки Dist
make tr	Дерево проекта