Moododoro

Moododoro integrates Spotify and the Pomodoro method to create personalized focus sessions that match your mood and music taste.

Comment

Inspiration

We often struggle to find focus when our mood and environment don’t align. While the Pomodoro technique helps structure time, it doesn’t address the emotional side of productivity. Our team wanted to create something that bridges that gap with an app that feels what you need. That’s how Moododoro was born! A mood-based Pomodoro timer that integrates with Spotify’s API to adapt your music and atmosphere to your current energy level. Whether you’re feeling calm, inspired, or burnt out, Moododoro helps you stay in flow through rhythm and structure.

What it does

Moododoro is a web app that synchronizes your emotional state with your work rhythm.

  • It uses Spotify’s Web API to analyze your current listening mood (energy and valence).
  • It then launches Pomodoro sessions that match or elevate your emotional state through curated playlists.
  • When the timer starts, your music and focus flow in sync.

How we built it

We built the project using a React + Node.js stack:

  • Frontend: React with Vite, TailwindCSS, and Spotify’s SDK for playback control.
  • Backend: Node.js with Express to handle OAuth 2.0 authentication and secure token exchange.
  • APIs: Integrated Spotify’s track-features and recommendations endpoints to fetch mood-based playlists.
  • Deployment: Hosted using Vercel for the frontend and Render for the backend.

Our app uses the mathematical structure of the Pomodoro Technique (25 minutes of work, 5 of break) but adjusts flexible to the users need. In future versions, this could be adjusted based on real-time energy estimation from user data.

Challenges we ran into

  • Spotify OAuth flow: Managing refresh tokens and redirect URIs across local and deployed environments took significant debugging.
  • Playback restrictions: Spotify’s streaming API requires Premium accounts and specific scopes, which complicated testing.
  • Cross-origin issues: Handling CORS policies between frontend and backend required setting up proxy routes and environment-specific URLs.
  • Image integration: Adding the logo images were pesky due to file path issues between src and public, and ensuring they could be viewed locally and during deployment.

Accomplishments that we're proud of

  • Built a fully functional OAuth 2.0 authorization flow from scratch.
  • Designed an interactive, visually clean UI that dynamically responds to user states.
  • Created a seamless experience where users can work, rest, and reflect on their productivity patterns.

What we learned

  • How to implement Spotify’s OAuth 2.0 securely and handle access tokens in a full-stack environment.
  • The importance of UX flow (even a productivity app must feel emotionally intuitive).
  • How to build and manage components using React, including proper use of hooks (useState, useEffect, useMemo) for dynamic updates and clean state management.
  • How to connect a frontend timer system with a backend API service, synchronizing user state and music playback in real time.
  • How to structure a project for seamless communication between client and server, including handling CORS and environment variables (.env) securely.

What's next for Moododoro

  • Mood tracking dashboard: Visualize how different genres or moods affect productivity.
  • Social mode: Allow shared Pomodoro sessions with synced playlists.
  • Browser extension: Quick-start Pomodoros and access your focus playlists from anywhere.
  • Mobile app integration: Bring Moododoro to iOS and Android with Spotify’s mobile SDK.

Built With

Share this project:

Updates