Pomodoro app

Pomodoro app - приложение для управления списком задач с использованием методики Pomodoro, таймера и отображением статистики.

Описание

Проект представляет собой трекер задач с таймером "Pomodoro" и состоит из двух страниц. На первом экране пользователь может управлять списком задач и таймером, а на втором — просматривать статистику использования таймера за разные периоды времени.

Приложение написано на Next.js v14 и использует встроенные функции, такие как роутинг, стили, SSR+HMR и Turbopack. Состояние компонентов хранится через Zustand store, и данные сохраняются в LocalStorage с помощью класса обертки StorageWrapper. Реализовано переключение темной/светлой темы с использованием Tailwind CSS.

Общие элементы приложения

• Экраны:
  • Основной: Содержит элементы управления списком задач и таймер.
  • Статистика: График по неделям с отображением времени использования таймера и отдельные пункты статистики.
• Таймер:
  • Инпут для создания: В правом верхнем углу, доступно меню для выхода из сессии.
  • Список задач: Можно добавлять, удалять, редактировать, также управлять количеством помодор.
  • Логотип приложения: Переход на начальную страницу при клике.
• Таймер:
  • Отображение времени: Фиксирует текущее или начальное время.
  • Элементы управления: Запуск, остановка, продолжение, скип.
• Статистика:
  • График: Фильтрует по неделям и отображет время использования таймера пн-вс.
  • Виджеты: Содержат дополнительную информацию об остановках, времени на паузе и фокусе.

Макет - Figma

Установить репозиторий

$ git clone https://github.com/ingerstep/pomodoro-app
$ cd pomodoro-react

Установка зависимостей

$ nmp install

Запуск приложения

# development
$ npm run dev

Cборка

$ npm run build

Запуск c Docker

$ docker compose up --build