Трекер задач с таймером по методу «Помодоро»

React-приложение c использованием одной из методик повышения продуктивности.

The Pomodoro Technique - описание техники Помодоро

Технологии

• React
• TypeScript
• React Redux
• Redux Toolkit
• React Router
• redux-persist
• Framer Motion
• react-chartjs-2
• use-sound
• webpack 5

Установка

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

Для установки зависимостей, выполните команду:

$ npm i

Запуск Development сервера

Чтобы запустить сервер для разработки, выполните команду:

npm start

Создание Development сборки

Чтобы выполнить Development сборку, выполните команду:

npm run dev

Создание Production сборки

Чтобы выполнить Production сборку, выполните команду:

npm run build

Описание приложения

Приложение представляет собой трекер задач с таймером Пользователь может выполнить на сайте следующие действия:

1. Работать со списком задач (добавить, редактировать, удалить, сортировать)
   • Пользователь может запланировать несколько задач на свой день и для каждой задать количество «помидоров» для каждой задачи, которое необходимо, чтобы её сделать. Верхняя задача из списка — это текущая задача.
2. Работать с таймером (старт, стоп, пауза, продлить, пропустить)
   • Как только пользователь готов, он запускает таймер. Если его отвлекли, то пользователь может поставить таймер на "паузу", или может остановить таймер - «помидорка» при этом не засчитывается. После каждой выполненной "помидорки" устанавливается "короткий" перерыв. Перерыв также можно поставить на "паузу" или "пропустить". После определнного количества "помидорок" устанавливается "длинный" перерыв.
3. Просматривать статистику использования таймера на странице "Статистика"
   • На этой странице отображается статистика по использованию приложения. Пользователь может посмотреть столбчатую диаграмму с количеством времени, когда он работал с таймером. Может выбрать неделю, за которую он хочет посмотреть статистику. Может посмотреть дополнительные параметры, такие как:
     • Фокус (отношение времени работы с таймером ко времени, потраченному на законченные «помидорки»).
     • Время на паузе.
     • Остановки.
4. Пользователь может изменить настройки приложения на станице "Настройки". Пользователь может настроить следующие параметры
   • продолжительность «помидора».
   • продолжительность короткого/длинного перерыва.
   • частоту длинных перерывов.
   • выключить или включить уведомления.
5. Дополнения:
   • Анимация компонентов страницы при загрузке
   • Темная тема
   • Звуковые уведомления при окончании таймера и при выполнении задачи

Приложение написано с использованием Redux Toolkit совместно с Redux Persist. Статистика, настройки и состояние приложения сохраняются и после перзагрузки. Приложение имеет адаптивный веб дизайн для различных размеров экрана.