whattosee

Стартовый шаблон на React, построенный по архитектуре bulletproof-react.

Стек

• React 19 + TypeScript (strict)
• Vite — dev-сервер и сборка
• React Router — маршрутизация
• Axios — HTTP-клиент
• Sass (CSS Modules) — стили
• ESLint + Prettier — линтинг и форматирование (с enforced-границами архитектуры)
• Husky + lint-staged — проверки перед коммитом

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

npm install
npm run dev      # запуск dev-сервера на http://localhost:5173

Скрипты

Команда	Описание
npm run dev	Запустить dev-сервер Vite
npm run build	Проверка типов (tsc -b) и продакшн-сборка
npm run preview	Локальный просмотр продакшн-сборки
npm run lint	Запустить ESLint
npm run lint:fix	ESLint с автоисправлением
npm run format	Отформатировать код через Prettier
npm run format:check	Проверить форматирование без изменений

Переменные окружения

Доступ к переменным окружения идёт через единую валидированную точку входа src/config/env.ts (не читайте import.meta.env напрямую). Доступные переменные:

Переменная	Описание	По умолчанию
VITE_API_URL	Базовый URL API	https://your-api-url.com/

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

Проект следует структуре папок bulletproof-react:

src/
├── app/              # слой приложения — связывает всё воедино
│   ├── routes/       # компоненты маршрутов
│   ├── app.tsx       # корневой компонент (провайдеры + роутер)
│   ├── provider.tsx  # глобальные провайдеры (error boundary и т.п.)
│   └── router.tsx    # конфигурация роутера
├── assets/           # статические файлы (иконки, изображения, шрифты)
├── components/       # общие переиспользуемые компоненты
│   ├── ui/           # компоненты дизайн-системы (button, modal, …)
│   ├── layouts/      # компоненты-раскладки
│   └── errors/       # error boundary / фолбэки
├── config/           # глобальная конфигурация и переменные окружения
├── features/         # модули-фичи (самодостаточные)
├── hooks/            # общие хуки
├── lib/              # преднастроенные библиотеки (например, API-клиент)
├── stores/           # глобальные хранилища состояния
├── styles/           # глобальные стили и Sass-переменные
├── types/            # общие типы TypeScript
└── utils/            # общие утилиты

Модуль-фича (src/features/<feature>/) самодостаточен и может содержать собственные api/, components/, hooks/, stores/, types/ и utils/.

Правила архитектуры

Кодовая база однонаправленная — импорты могут идти только в одну сторону:

общие слои  →  features  →  app

• Общие слои (components, hooks, lib, stores, types, utils, config) не могут импортировать из features и app.
• Features не могут импортировать из app и не должны обращаться к другим фичам — композиция фич выполняется в слое app.

Эти правила enforce'ятся ESLint (no-restricted-imports в eslint.config.js); их нарушение проваливает линтинг. Для абсолютных импортов из src/ используйте алиас @/ (например, import { Button } from '@/components/ui/button'), а внутри одной фичи — относительные импорты.