This project was completed as part of a group learning exercise.
https://gallant-pasteur-653b2f.netlify.app/
- User can see a timer for 25 minutes - the working session
- After the working session is over, the User can see a timer for 5 minutes - the break session
- User can start / pause, stop and reset the timers
The user can view all the existing sessions in a list and choose to create one themselves.
There are a few other features, including some feedback for the cycle the user is on. The image shows that we are in the break period of the third cycle.
The fourth break will be 10 minutes instead of 5.
After a session is created, any user can view the details of the session. These details describe the length of the session, and the number of pauses used.
Using supabase for the database. The pomodoro timer is implemented using xstate.
- react@next
- react-router-dom@6
- xstate
- supabase/js
- react-query
- tailwindcss
- postgres
State charts are used to describe the timer functionality.
In this example we can see that there are two main states active and break. Within those states are running and paused child states. These allow us to manage the timer. The current implementation will continue to transition between working and break sessions indefinitely.
- Would like users to be able to join existing sessions