🍅 Pomodoro

This productivity app, built with React and TypeScript was designed to enhance my productivity. I developed it as a side project to learn new skills and customize features to better suit my personal workflow, which has significantly improved my daily task management.

📸 Screenshots

Prerequisites

NodeJS version 14+
Docker (optional, if you will be running the App with docker)

📦 Technologies Used

Vite
React.js
TypeScript
Tailwind CSS
Testing Library (Jest)
Jotai
Driver.js

✨ Features

Start Pomodoro Session: Just hit start, and you're off!
Timer Indicators: Keep an eye on your time with handy indicators.
Customise Settings: Tailor your focus and break times to your liking.
Track Daily Tasks: Manage your to-dos effortlessly - add, remove, edit, and toggle tasks as needed.
Estimate Finish Time: Get an estimate of the time required to complete your daily tasks.

🤔 How to use it

Add tasks to work on today
Set estimate pomodoros (1 = 25min of work) for each task
Select a task to work on
Start timer and focus on the task for 25 minutes
Take a break for 5 minutes when the alarm rings
Iterate 3-5 until you finish the tasks

ℹ️ Tip: The selected task will update its estimate pomodoro number once the pomodoro timer has finished!

📚 What I Learned

Advanced Wireframing techniques
Development of more complex custom hooks
Exploring Jotai for state management
Integrating Driver.js for improving user experience
Utilising Web Worker for background tasks
Implementing unit tests and component tests

💭 Future improvements

Enable customisation of background color for different timer mode
Enable customisation of sound
Implement user authentication for access across devices
Introduce a reward or punishment system to incentivize focus and facilitate mindfulness

🚦 Running the Project

To run the project in your local environment, follow these steps:

Clone this project using the following command:

git clone https://github.com/oyerohabib/pomodoro.git

Navigate to the project directory:
```
cd pomodoro
```
Install the dependencies:
```
npm install
```
Build the project:
```
npm run build
```
Preview the project:
```
npm run preview
```
Open http://localhost:5173 (or the address shown in your console) in your web browser to view the app.
To run the test cases, use:
```
npm run test
```

Alternatively, you can run the application using Docker, after step 2 above, run the below commands:

Open and start the Docker Application on your computer.
Login into docker by running, docker login command and ensure the login is successful.
Build the Docker Image:
```
docker build -t pomodoro .
```
Run the Docker Container:
```
docker run -p 5173:5173 -d pomodoro:1.0
```

Alternatively, you can pull the docker image (from docker hub) and simply run, without having to build or clone it.

Pull the Docker Image:
```
docker pull habibo1234/pomodoro:1.0
```

Run the Docker Image:

docker run -p 5173:5173 -d habibo1234/pomodoro:1.0

Contributing to project

Thank you for considering contributing to the Pomodoro App! We welcome contributions from the community to help improve and grow the project.

Please note that this project adheres to the Contributor Covenant Code of Conduct. By participating, you are expected to uphold this code. Please report any unacceptable behavior.

License

This project is licensed under the MIT License.