Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ingerstep/pomodoro-react
⏰📝 Task tracker
https://github.com/ingerstep/pomodoro-react
docker-compose nextjs tailwindcss zustand
Last synced: about 2 months ago
JSON representation
⏰📝 Task tracker
- Host: GitHub
- URL: https://github.com/ingerstep/pomodoro-react
- Owner: ingerstep
- Created: 2024-06-15T14:46:11.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-12-04T05:42:44.000Z (about 2 months ago)
- Last Synced: 2024-12-04T06:27:13.558Z (about 2 months ago)
- Topics: docker-compose, nextjs, tailwindcss, zustand
- Language: TypeScript
- Homepage:
- Size: 161 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Pomodoro app
Pomodoro app - приложение для управления списком задач с использованием методики Pomodoro, таймера и отображением статистики.
## Описание
Проект представляет собой трекер задач с таймером "Pomodoro" и состоит из двух страниц. На первом экране пользователь может управлять списком задач и таймером, а на втором — просматривать статистику использования таймера за разные периоды времени.
Приложение написано на Next.js v14 и использует встроенные функции, такие как роутинг, стили, SSR+HMR и Turbopack. Состояние компонентов хранится через Zustand store, и данные сохраняются в LocalStorage с помощью класса обертки StorageWrapper. Реализовано переключение темной/светлой темы с использованием Tailwind CSS.
### Общие элементы приложения
- **Экраны**:
- **Основной**: Содержит элементы управления списком задач и таймер.
- **Статистика**: График по неделям с отображением времени использования таймера и отдельные пункты статистики.
- **Таймер**:
- **Инпут для создания**: В правом верхнем углу, доступно меню для выхода из сессии.
- **Список задач**: Можно добавлять, удалять, редактировать, также управлять количеством помодор.
- **Логотип приложения**: Переход на начальную страницу при клике.
- **Таймер**:
- **Отображение времени**: Фиксирует текущее или начальное время.
- **Элементы управления**: Запуск, остановка, продолжение, скип.
- **Статистика**:
- **График**: Фильтрует по неделям и отображет время использования таймера пн-вс.
- **Виджеты**: Содержат дополнительную информацию об остановках, времени на паузе и фокусе.### Макет - [Figma](https://www.figma.com/design/4gQfoY8SSFlhh8E8zWvkup/Pomodoro?node-id=0-1&node-type=canvas&t=8hHOGiUttvlpcSjr-0)
## Установить репозиторий
```bash
$ git clone https://github.com/ingerstep/pomodoro-app
$ cd pomodoro-react
```## Установка зависимостей
```bash
$ nmp install
```## Запуск приложения
```bash
# development
$ npm run dev
```## Cборка
```bash
$ npm run build
```## Запуск c Docker
```bash
$ docker compose up --build
```