Pomodoro Timer

A simple Pomodoro Timer built with React.

Live Preview

Features

• Customizable work and break timers
• Start, stop, and reset functionality
• Audio notifications at the end of each timer
• Daily "progress bar" shown in the form of tomatoes
• Dynamic task list to keep track of completed tasks and time spent
• Time tracking chart to visualize task time distribution

Screenshots

Usage

1. In settings, set the desired work and break times in minutes using the input or buttons
2. Click the "Start" button to begin the timer
3. When the timer ends, an audio notification will play and the timer will continue
4. To stop the timer at any point, click the "Stop" button
5. To reset the timer, click the "Reset" button
6. As you complete tasks, add them to the dynamic task list by typing into the input field and clicking "Add Task"
7. View your time distribution across tasks using the time tracking chart accessed at the top of the page

Installation

This project can be run locally by following these steps:

1. Clone this repository: git clone https://github.com/corymci/pomodoro-react.git
2. Install dependencies: npm install
3. Start development server: npm start

Technologies Used

• React
• React Router
• Chart.js
• Axios
• Moment.js
• TailwindCSS
• RESTful API made in Node.js with Express

Credits

This project was built by Cory McIver, style inspired by http://pomofocus.io

Not for commercial use.

Tomato icons created by Freepik - Flaticon Fonts and symbols courtesy of Google Fonts - Material-Symbols-Outlined and Roboto