Add README.md for Smoke Tracker application
- 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.
This commit is contained in:
Primakov Alexandr Alexandrovich
parent
debd28905a
commit
9b224ef4b7
195
README.md
Normal file
195
README.md
Normal file
@ -0,0 +1,195 @@
|
||||
# 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
|
||||
|
||||
---
|
||||
|
||||
**Примечание**: Это приложение создано для образовательных целей и самоконтроля. Курение вредит вашему здоровью.
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user