About

A Pomodoro timer.

Pomodoro is one of my favourite focus methods for studying and coding. I've found many Pomodoro timers on the internet and wanted to make my own version.

The rhythmic ocean wave in the background creates a calming effect. Putting you in the right state mind to use the Pomodoro technique.

Table of Contents

• Local Setup
• Technologies Used
• What I learned
• Credits
• License

Local Setup

Download or clone the repository from GitHub.

Install dependencies using npm install

npm install

Run locally with npm run start

npm run start

Technologies Used

• React
• React-Redux
• Redux-Toolkit
• Material UI
• CSS

This is React project, with Material UI and some CSS for styling.

Initially state was managed locally using the useState hook.

Later on, this was changed to mangage state globally using React-Redux and Redux-Toolkit.The previous version of the Pomodoro component which usues the local state can be found in PromodoWithoutRedux.js

What I learned

• How to add a video as the background
• How to optimize the video
• Simple button animation using CSS
• State management using Slices with React-Redux and Redux-Toolkit

Resources Used:

• This article on optimizing video backgrounds by Logrocket
• This article on CSS animation by W3Schools
• The Redux Toolkit Quick Start Tutorial

Credits

• Wine Sea video by Rostislav Uzunov from Pixabay

• Mech Keyboard Sound Effect from Pixabay

• Ding Sound Effect from Pixabay

• Icon from Flaticon

License

You can find the License for this project here

This project is licensed under the terms of the MIT license.