Cocktail App

Features

• Показывает списки коктейлей по категориям.
• Дает детальную информацию по каждому коктейлю (картинка, название, категория, ингредиенты, как готовить).
• Подстраивается под разные экраны, есть боковая панель для навигации.
• Лениво грузит картинки, чтобы страница быстрее открывалась.
• Показывает индикаторы загрузки и ошибки, если что-то пошло не так с API.
• Есть страница 404, если зайти на несуществующий адрес.

Stack

• React: 19.1.0
• TypeScript: 5.8.3
• Vite: 6.3.5
• Axios: 1.9.0
• React Router DOM: 7.6.0
• Zustand: 5.0.4
• Sass: 1.89.0

Structure

/
├── src/
│   ├── api/                  # Слой API
│   │   └── Cocktail/         # API сущности Cocktail
│   │   │   ├── dto.ts        # DTO-типы
│   │   │   ├── interfaces.ts # Типы бизнес-сущностей
│   │   │   ├── service.ts    # Инициализация http-клиента для работы с API
│   │   │   ├── api.ts        # Обертка для общения между UI и API
│   │   │   └── transform.ts  # Преобразователи DTO-типов к бизнес-сущностям
│   ├── app/                  # Ядро приложения
│   │   ├── assets/           # Глобальные ресурсы (шрифты, картинки, иконки)
│   │   ├── router/           # Настройка роутинга
│   │   ├── styles/           # Общие стили
│   │   └── main.tsx          # Точка входа
│   ├── components/           # Переиспользуемые UI-компоненты
│   │   ├── common/           # Основные компоненты (лейаут страницы, навигация)
│   │   └── Cocktail/         # Компоненты бизнес-сущности Cocktail
│   ├── mocks/                # Моки для тестов или разработки (MSW)
│   ├── pages/                # Компоненты-страницы
│   │   ├── CocktailPage/
│   │   └── NotFoundPage/
│   ├── shared/               # Общие утилиты, константы, хуки, компоненты
│   │   ├── components/
│   │   ├── services/
│   │   ├── utils/
│   │   └── ...
│   ├── store/                # Хранилища состояний (модели данных)
│   │   └── Cocktail/         # также распределяем по бизнес-фичам
│   ├── setupTests.ts         # Настройка для тестов (Vitest)
│   └── vite-env.d.ts         # Типы для Vite
├── .env                      # env переменные
├── .eslintrc.json            # Настройки ESLint
├── .prettierrc.json          # Настройки Prettier
├── .stylelintrc.json         # Настройки Stylelint
├── package.json              # Зависимости и скрипты
├── tsconfig.json             # Главный конфиг TypeScript
├── tsconfig.app.json         # Конфиг TypeScript для приложения
├── tsconfig.node.json        # Конфиг TypeScript для Vite/ESLint
└── vite.config.ts            # Конфиг Vite

Commands

• npm run dev: Запустить локальный сервер для разработки.
• npm run build: Собрать приложение для продакшена.
• npm run preview: Посмотреть локально собранную версию.
• npm run format: Отформатировать код с помощью Prettier.
• npm run lint:code: Проверить код ESLint-ом (и поправить, что сможет).
• npm run lint:types: Проверить типы TypeScript.
• npm run lint:styles: Проверить SCSS-файлы Stylelint-ом (и поправить).
• npm run lint:all: Запустить все линтеры сразу.
• npm run test: Запустить тесты (Vitest).
• npm run test:ui: Запустить тесты с интерфейсом Vitest.
• npm run test:coverage: Запустить тесты и посмотреть покрытие кода.

Quality Gates

• TypeScript - строгая типизация
• ESLint - линтер кода JS/TS
• Prettier - автоформатирование
• Stylelint - линтер стилей
• Vitest - покрытие unit-тестами