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. Защищенные маршруты доступны только авторизованным пользователям

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

Создайте пользователя через форму регистрации или используйте API напрямую.

Минимальные требования:

• Логин: минимум 3 символа
• Пароль: минимум 4 символа

📊 API

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

Основные endpoints:

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

🎨 UI/UX

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

Страницы авторизации

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

Основные страницы

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

Страница учета

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

Страница статистики

• Интерактивный график (Recharts)
• Выбор периода
• Сводная статистика

🧪 Разработка

Добавление новых 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

---

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