Ai Music Companion

Hello Everone! Tired of scrolling Spotify to match your vibe? AI Music Companion reads your mood—via webcam, typing, actions, even weather—and creates the perfect playlist instantly.

Comment

🌟 Inspiration

The idea for this project came from my interest in combining music with real-time weather updates. I noticed that many people’s mood and daily choices are influenced by the weather—so why not make their Spotify playlists adapt too? I wanted to create something practical yet fun, using real APIs and giving users a more dynamic, context-aware listening experience.

🛠️ What I Built

This is a web application that dynamically curates Spotify playlists based on the current weather in your location. The stack includes:

  • Next.js for the frontend framework
  • OpenWeather API to fetch real-time weather data
  • Spotify Web API for authenticating users and modifying their playback
  • Tailwind CSS for clean and responsive styling

When a user logs in, the app:

  1. Detects their location.
  2. Retrieves current weather using OpenWeather API.
  3. Matches the weather condition (sunny, rainy, cloudy, etc.) to a custom-curated Spotify playlist.
  4. Lets the user play or explore tracks based on that vibe.

🎯 What I Learned

  • How to integrate OAuth2.0 flows (especially Spotify's auth process)
  • Handling environment variables securely with .env.local
  • Working with third-party APIs and rate limits
  • Dynamic UI rendering based on API responses
  • Debugging CORS and redirect URI issues

⚠️ Challenges

  • Setting up and validating Spotify's Redirect URI properly—this was tricky because it requires HTTPS for production and exact matching.
  • Handling API rate limits, especially with OpenWeather’s free plan.
  • Syncing asynchronous calls between both APIs without affecting the user experience.

✅ Accomplishments

  • Built a fully functional MVP that runs in the browser without a backend.
  • Authenticates users with Spotify and plays real music based on current weather.
  • Clean UI with responsive design and state management.

🚀 What's Next

  • Add support for hourly/forecast-based playlist changes
  • Let users save or edit their own weather-based playlists
  • Deploy it on Vercel and publish to the public

💬 Final Thoughts

This project was not only fun but pushed me to learn more about API integrations, auth workflows, and real-world deployment issues. It’s a great example of how weather and music—two very different data sets—can be creatively combined to enhance everyday experiences.

Built With

Share this project:

Updates