play-life/play-life-web

PlayLifeWeb

Веб-приложение для отображения статистики проектов.

Возможности

• Текущая неделя: Отображение статистики на текущий момент с ProgressBar для каждого проекта
• Полная статистика: График нарастающей статистики по всем проектам

Технологии

• React 18
• Vite
• Chart.js (react-chartjs-2)
• Tailwind CSS
• Docker

Установка и запуск

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

1. Установите зависимости:

npm install

2. Запустите dev-сервер:

npm run dev

Приложение будет доступно по адресу http://localhost:3000

Сборка для production

npm run build

Запуск через Docker

1. Создайте файл .env в корне проекта (можно скопировать из env.example):

cp env.example .env

2. Соберите образ:

docker-compose build

3. Запустите контейнер:

docker-compose up -d

Приложение будет доступно по адресу http://localhost:3000

Примечание: API запросы автоматически проксируются к бэкенду через nginx. Не требуется настройка URL API.

Остановка Docker контейнера

docker-compose down

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

play-life-web/
├── src/
│   ├── components/
│   │   ├── CurrentWeek.jsx          # Компонент текущей недели
│   │   ├── FullStatistics.jsx       # Компонент полной статистики
│   │   └── ProjectProgressBar.jsx    # Компонент ProgressBar
│   ├── App.jsx                       # Главный компонент приложения
│   ├── main.jsx                      # Точка входа
│   └── index.css                     # Глобальные стили
├── Dockerfile                        # Docker образ
├── docker-compose.yml                # Docker Compose конфигурация
├── nginx.conf                        # Nginx конфигурация
└── package.json                      # Зависимости проекта

API Endpoints

Приложение использует относительные пути для API запросов. Проксирование настроено автоматически:

• Development: Vite dev server проксирует запросы к http://localhost:8080
• Production: Nginx проксирует запросы к бэкенд контейнеру

Endpoints, которые используются:

• /playlife-feed - данные текущей недели
• /d2dc349a-0d13-49b2-a8f0-1ab094bfba9b - полная статистика
• /projects - список проектов
• /project/priority - обновление приоритетов проектов
• /api/* - остальные API endpoints (слова, конфигурации, тесты)

Особенности реализации

• ProgressBar отображает текущее значение (total_score) и выделяет диапазон целей (min_goal_score - max_goal_score)
• График полной статистики показывает нарастающую сумму баллов по неделям
• Все проекты отображаются на одном графике с разными цветами
• Адаптивный дизайн для различных размеров экранов