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 - конфигурация и сборка

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

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

npm install

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

npm start

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

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

npm run build

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

API Endpoints

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

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.

Основные 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

---

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