Pomodoro app

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

Описание

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

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

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

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

Макет - Figma

Используемые библиотеки и технологии

• React — JavaScript-библиотека для создания пользовательских интерфейсов,
• Next.js — реактивный фреймворк для создания веб-приложений на основе React,
• Zustand — библиотека для управления состоянием в React,
• Typescript — для типизации в режиме разработки,
• Tailwind CSS — css фреймворк,
• Clsx — утилита для динамического создания классов css,
• Prettier — для автоматического форматирования кода,
• ESLint — для обнаружения и исправления ошибок.

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

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

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

$ npm install

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

# development
$ npm run dev

Cборка

$ npm run build