Skip to content

React productivity app which integrates a Pomodoro Timer and an interactive digital pet

Notifications You must be signed in to change notification settings

katy-arushi/pomopets-client

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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!

Netlify Status

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

"pomopets homepage"

Homepage (Dark Mode)

"pomopets homepage dark mode"

Choose your PomoPet

"pomopets pets"

Choose your PomoPet (Dark Mode)

"pomopets pets dark mode"

Timer

"pomopets timer"

Timer (Dark Mode)

"pomopets timer dark mode"

Statistics

"pomopets stats

Statistics (Dark Mode)

"pomopets stats 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"

About

React productivity app which integrates a Pomodoro Timer and an interactive digital pet

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 80.2%
  • SCSS 18.3%
  • HTML 1.5%