PomoPets

PomoPets is an incentivized Pomodoro timer. Begin your focus session with a mysterious, hatchable egg and upon completing your focus session, you are rewarded with a cute digital pet!

A Lighthouse Labs project by Justin Lam, Rhea Azarraga, and Arushi Katyal.

Access the deployed app here!

Features

• ⭐ Allows users to choose and name their own digital pets
• ⭐ Has a Pomodoro timer that has 25 minute focus sessions and 5 minute breaks
• ⭐ Users can start and reset the timer as they wish
• ⭐ Users can choose their area of focus for the timer
• ⭐ Statistics page tracks number of Pomodoro sessions completed by area of focus
• ⭐ Dark Mode
• ⭐ Deployed on Netlify and Heroku

Future Features

• Integrate Spotify
• Unlock new pets based on number of Pomodoro sessions completed
• Adding more page themes
• Responsive design for app to be used on any device
• Audio notification when focus session is completed

Screenshots

Homepage

Homepage (Dark Mode)

Choose your PomoPet

Choose your PomoPet (Dark Mode)

Timer

Timer (Dark Mode)

Statistics

Statistics (Dark Mode)

Getting Started

Setting up the Client

1. Go to pomo-react: cd pomo-react
2. Update proxy in the package.json with the port you used for the server
   • "proxy": "http://localhost:3030",
3. Install dependencies: npm i
4. Run the app: npm start

Dependencies

Client-side

"@faker-js/faker": "^6.0.0-alpha.7",
"axios": "^0.25.0",
"bootstrap": "^5.1.3",
"chart.js": "^3.7.1",
"lodash": "^4.17.21",
"react": "^17.0.2",
"react-bootstrap": "^2.1.2",
"react-calendar": "^3.7.0",
"react-chartjs-2": "^4.0.1",
"react-circular-progressbar": "^2.0.4",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"sass": "^1.49.7",
"web-vitals": "^2.1.4"