# Smoke Tracker

Веб-приложение для отслеживания привычки курения с визуализацией статистики.

## 📋 Описание

Smoke Tracker - это приложение для самоконтроля и отслеживания количества выкуренных сигарет. Позволяет вести учет, просматривать статистику по дням и анализировать динамику изменения привычки.

## ✨ Возможности

- **Регистрация и авторизация** - безопасная система входа с JWT токенами
- **Учет сигарет** - быстрое добавление записей о выкуренных сигаретах
- **История** - просмотр последних записей с возможностью фильтрации
- **Дневная статистика** - визуализация данных по дням с помощью графиков
- **Сводная статистика** - сравнение ваших показателей со средними значениями других пользователей
  - График по дням недели
  - Сравнение с другими пользователями
  - Метрики активности
- **Адаптивный дизайн** - работает на всех устройствах

## 🛠 Технологии

### Frontend
- **React 18** - библиотека для построения UI
- **TypeScript** - типизированный JavaScript
- **Chakra UI v3** - компонентная библиотека
- **React Router v6** - маршрутизация
- **React Hook Form** - управление формами
- **Zod** - валидация схем
- **Recharts** - графики и визуализация
- **Axios** - HTTP клиент
- **date-fns** - работа с датами

### Backend (для локальной разработки)
- **Express.js** - API stubs
- **In-memory storage** - хранение данных в памяти

### Build Tools
- **Bro.js CLI** - конфигурация и сборка

## 🚀 Быстрый старт

### Установка зависимостей

```bash
npm install
```

### Запуск в режиме разработки

```bash
npm start
```

Приложение будет доступно по адресу, указанному в конфигурации Bro.js.

### Сборка для продакшена

```bash
npm run build
```

## ⚙️ Конфигурация

### API Endpoints

Конфигурация API определяется в `bro.config.js`:

```javascript
config['smoke-tracker.api'] = './stubs/api/index.js' // для локальной разработки
// или
config['smoke-tracker.api'] = 'https://api.example.com' // для продакшена
```

### Локальная разработка

Для локальной разработки используются API stubs в `./stubs/api/index.js`. Данные хранятся в памяти и сбрасываются при перезапуске сервера.

### Стейджинг/Продакшн

На стейджинге и продакшене значение конфигурации должно указывать на реальный backend API.

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

```
smoke-tracker/
├── src/
│   ├── __data__/          # Константы и конфигурация
│   │   └── urls.ts        # Маршруты приложения
│   ├── api/               # API клиент
│   │   └── client.ts      # Axios instance с interceptors
│   ├── components/        # Переиспользуемые компоненты
│   │   ├── ui/            # UI компоненты
│   │   │   └── field.tsx  # Custom Field component
│   │   └── ProtectedRoute.tsx
│   ├── contexts/          # React Context
│   │   └── AuthContext.tsx
│   ├── pages/             # Страницы приложения
│   │   ├── auth/          # Авторизация
│   │   │   ├── signin.tsx
│   │   │   └── signup.tsx
│   │   ├── main/          # Главная страница
│   │   ├── tracker/       # Страница учета
│   │   └── stats/         # Страница статистики
│   ├── types/             # TypeScript типы
│   │   └── api.ts         # API типы
│   ├── app.tsx            # Корневой компонент
│   ├── dashboard.tsx      # Роутинг
│   └── index.tsx          # Entry point
├── stubs/
│   └── api/
│       └── index.js       # Mock API для разработки
├── memory-bank/
│   └── API.md             # Документация API
├── bro.config.js          # Конфигурация Bro.js
└── package.json
```

## 🔐 Авторизация

Приложение использует JWT токены для авторизации:

1. При входе/регистрации токен сохраняется в `localStorage`
2. Токен автоматически добавляется во все API запросы через Axios interceptor
3. При истечении токена пользователь перенаправляется на страницу входа
4. Защищенные маршруты доступны только авторизованным пользователям

### Тестовые данные для локальной разработки

Для быстрого старта доступен предустановленный тестовый пользователь:
- **Логин:** `testuser`
- **Пароль:** `test1234`

Вы также можете создать нового пользователя через форму регистрации.

Минимальные требования для регистрации:
- Логин: минимум 3 символа
- Пароль: минимум 4 символа

## 📊 API

Полная документация API доступна в файле [`memory-bank/API.md`](./memory-bank/API.md).

### Основные endpoints:

- `POST /auth/signup` - Регистрация
- `POST /auth/signin` - Вход
- `POST /cigarettes/log` - Добавить запись о сигарете
- `GET /cigarettes` - Получить список записей
- `GET /cigarettes/stats/daily` - Получить статистику по дням
- `GET /stats/summary` - Получить сводную статистику (индивидуальную и общую)

## 🎨 UI/UX

### Макеты страниц

#### Страницы авторизации
- Отдельный чистый layout
- Центрированная форма
- Без header/sidebar
- Валидация в реальном времени
- Информативные сообщения об ошибках

#### Основные страницы
- Header с информацией о пользователе
- Навигация между разделами
- Адаптивный grid layout

#### Страница учета
- Быстрая форма добавления записи
- Список последних записей
- Фильтрация по датам

#### Страница статистики
- Две вкладки: "Дневная статистика" и "Сводная статистика"
- **Дневная статистика:**
  - Интерактивный линейный график по дням (Recharts)
  - Выбор периода
  - Основные метрики (среднее, максимум, общее количество)
- **Сводная статистика:**
  - Сравнение индивидуальных показателей с общими
  - Метрики: дневное среднее (вы vs все), дней с данными, активных пользователей
  - Столбчатая диаграмма по дням недели
  - Таблица с детальной статистикой по дням недели

## 🧪 Разработка

### Добавление новых API endpoints

1. Добавьте типы в `src/types/api.ts`
2. Добавьте метод в `src/api/client.ts`
3. Обновите mock в `stubs/api/index.js`

### Добавление новых страниц

1. Создайте компонент в `src/pages/`
2. Добавьте маршрут в `src/__data__/urls.ts`
3. Обновите роутинг в `src/dashboard.tsx`

## 📝 Лицензия

MIT

## 👥 Автор

Alex

---

**Примечание**: Это приложение создано для образовательных целей и самоконтроля. Курение вредит вашему здоровью.