9b224ef4b7
- Introduced comprehensive documentation for the Smoke Tracker web application. - Included project description, features, technologies used, and setup instructions. - Detailed API endpoints and local development configuration. - Provided UI/UX design guidelines and development notes for future enhancements.
196 lines
7.7 KiB
Markdown
196 lines
7.7 KiB
Markdown
# 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. Защищенные маршруты доступны только авторизованным пользователям
|
||
|
||
### Тестовые данные для локальной разработки
|
||
|
||
Создайте пользователя через форму регистрации или используйте API напрямую.
|
||
|
||
Минимальные требования:
|
||
- Логин: минимум 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` - Получить статистику по дням
|
||
|
||
## 🎨 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
|
||
|
||
---
|
||
|
||
**Примечание**: Это приложение создано для образовательных целей и самоконтроля. Курение вредит вашему здоровью.
|
||
|