Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

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
```