Pomodoro Timer App

https://kras-pomodoroclock.netlify.app/

Описание

Этот pet-проект представляет собой реализацию таймера Pomodoro, разработанную с использованием фреймворка React.js. Проект создан с целью изучения и закрепления основ React.js, включая работу с компонентами, состоянием, эффектами, контекстом, а также интеграцию сторонних библиотек и использование современных возможностей SCSS для стилизации и анимации.

Технологии

• React.js: Основной фреймворк для построения пользовательского интерфейса.
• React Context API: Для управления состоянием темы, таймера и языка.
• SCSS: Для стилизации компонентов и анимаций.
• React Icons: Для использования иконок в интерфейсе.
• HTML5 Notifications API: Для реализации браузерных уведомлений.

Установка и запуск

1. Клонируйте репозиторий:

   git clone https://github.com/andrew-kras/pomodoro-react.gi

2. Перейдите в директорию проекта:

   cd pomodoro-react

3. Установите зависимости:

   npm install

4. Запустите проект:

   npm start

Как использовать

1. Запуск и остановка таймера: Используйте кнопку "Start" для запуска таймера и "Pause" для его остановки.
2. Сброс таймера: Кнопка "Reset" сбрасывает таймер до начального значения.
3. Переключение режима: Кнопка "Switch to Work/Break" позволяет переключаться между режимами работы и перерыва.
4. Настройки: Кликните на иконку настроек в правом верхнем углу для изменения длительности сессий, включения/выключения уведомлений и переключения языка.
5. Переключение темы: Кликните на иконку темы в левом верхнем углу для переключения между светлой и темной темами.

Скриншоты

Автор

Создано для изучения React.js. Автор: Andrew Kras