Pomodoro (HarvestHacks)

Technologies

• Frontend
  • Languages: JavaScript
  • Frameworks: React.js (Vite)
  • UI Components: DaisyUI, TailwindCSS
  • Icons: Lucide Icons
  • Data Fetching: Axios
  • Form Validation: react-hook-form
  • Notifications/Toasts: react-hot-toast
• Backend:
  • Languages: Node.js
  • Frameworks: Express
  • Authentication: Passport.js, OAuth2
• Database: MongoDB

Inspiration

As midterms approach, students often feel burnt out from long study sessions. The Pomodoro Technique offers a solution to maintain focus and study efficiently.

What it does

Our website automates the Pomodoro Technique, alternating between 25-minute study periods and 5-minute breaks. Users can also login and logout in order to record their sessions.

How we built it

We used React for the frontend, integrating Lucide icons and Axios for data fetching, and react-hook-form for form handling. The backend is powered by Express with Passport.js for authentication, using express-session and GitHubStrategy.

Challenges we ran into

Implementing authentication with Passport.js was challenging, especially handling sessions and cookies.

Spotify only allows premium users to access its Web Playback SDK and changing its scope was difficult.

Accomplishments that we're proud of

We successfully integrated GitHub OAuth for user authentication and added features like loop videos, timed audios, and gradient backgrounds.

What we learned

The project enhanced our understanding of code organization, responsibility separation, and encapsulation.

What's next for POMODORO

This app has so much potentials. We plan to expand the app's capabilities with D3.js to visualize user activity, integrate a music player for study sessions, and add a to-do list feature.