Шаурмания — React-версия

Миграция фронтенда Flask-версии Шаурмании на React + TypeScript. Бэкенд остаётся без изменений — переписывается только клиентская часть.

Что меняется

Flask + AJAX	Эта версия
Jinja2-шаблоны + AJAX-запросы	SPA на React
Vanilla JS-модули	Компонентная архитектура, TypeScript
Чистый CSS	Tailwind CSS v4
Сборка через Flask static	Vite
Тот же Flask-бэкенд и API	Без изменений — React обращается к тем же эндпоинтам

Стек

• React 19 / TypeScript 6 — компоненты, типизация
• Vite 8 — сборка и dev-сервер
• Tailwind CSS 4 — стили (через @tailwindcss/vite)
• Axios — HTTP-запросы к бэкенду
• Oxlint — линтинг
• Prettier — форматирование (с плагином prettier-plugin-tailwindcss)

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

src/
├── App.tsx                     # Корневой компонент
├── main.tsx                    # Точка входа
├── index.css                   # Глобальные стили
├── assets/                     # Статика: изображения, иконки, SVG
├── pages/
│   └── HomePage.tsx            # Главная страница
└── components/
    ├── layout/
    │   ├── Header.tsx          # Шапка сайта
    │   ├── Footer.tsx          # Подвал
    │   └── Footer.data.ts      # Данные для футера
    ├── sections/
    │   ├── SliderSection/      # Слайдер
    │   ├── FeatureSection/     # Блок преимуществ
    │   ├── MenuSection/        # Каталог меню (шаурма, кесадилья и т.д.)
    │   ├── AboutSection/       # Блок «О компании»
    │   └── FormSection/        # Форма подписки на акции
    └── ui/
        └── Button.tsx          # Переиспользуемая кнопка

Быстрый старт

1. Установите зависимости:

npm install

2. Запустите dev-сервер:

npm run dev

3. Сборка для продакшена:

npm run build

Бэкенд запускается отдельно из репозитория ShaurmaniaApp. Dev-сервер проксирует /api и /static на http://192.168.1.2:5000.

Скрипты

Команда	Описание
npm run dev	Dev-сервер Vite
npm run build	Сборка (tsc -b && vite build)
npm run preview	Превью production-сборки
npm run lint	Линтинг через Oxlint

---

Статус

Реализована главная страница с полным набором секций: слайдер, преимущества, каталог меню с фильтрацией по категориям, блок «О компании» и форма подписки. Роутинг и дополнительные страницы — в планах.