https://github.com/andrew-kras/pomodoro-react

My mini app with pomodoro clock for learning react.js.
https://github.com/andrew-kras/pomodoro-react

Last synced: 8 days ago
JSON representation

My mini app with pomodoro clock for learning react.js.

• Host: GitHub
• URL: https://github.com/andrew-kras/pomodoro-react
• Owner: andrew-kras
• Created: 2024-06-05T18:38:57.000Z (5 months ago)
• Default Branch: master
• Last Pushed: 2024-06-06T09:32:48.000Z (5 months ago)
• Last Synced: 2024-06-06T10:29:23.364Z (5 months ago)
• Language: JavaScript
• Homepage: https://kras-pomodoroclock.netlify.app/
• Size: 1 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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. Клонируйте репозиторий:

    ```bash

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

    ```

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

    ```bash

    cd pomodoro-react

    ```

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

    ```bash

    npm install

    ```

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

    ```bash

    npm start

    ```

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

1. **Запуск и остановка таймера**: Используйте кнопку "Start" для запуска таймера и "Pause" для его остановки.

2. **Сброс таймера**: Кнопка "Reset" сбрасывает таймер до начального значения.

3. **Переключение режима**: Кнопка "Switch to Work/Break" позволяет переключаться между режимами работы и перерыва.

4. **Настройки**: Кликните на иконку настроек в правом верхнем углу для изменения длительности сессий, включения/выключения уведомлений и переключения языка.

5. **Переключение темы**: Кликните на иконку темы в левом верхнем углу для переключения между светлой и темной темами.

## Скриншоты

![Main Interface](./screenshots/main.png)

![Settings](./screenshots/settings.png)

## Автор

Создано для изучения React.js. Автор: [Andrew Kras](https://github.com/andrew-kras/)