Emotion Based Music Recommendation System

"Your face is the controller." > Moodify bridges the gap between human emotion and digital auditory experiences. It uses real-time computer vision to detect your mood, age, and local weather to curate the perfect Spotify playlist for the moment.

Features

• 🎭 Real-Time Emotion Detection: Uses face-api.js to detect 7 distinct emotions (Happy, Sad, Angry, Fearful, Disgusted, Surprised, Neutral).
• 🧠 Context-Aware Logic: It doesn't just check your mood; it combines:
  • Age: (e.g., Retro hits for older demographics, Viral pop for Gen-Z).
  • Weather: (e.g., Cozy acoustic for rain, Upbeat for sunny days).
  • Time: (e.g., Lofi for late nights).
• 🎧 Seamless Spotify Integration: Utilizes the Spotify Web API to fetch and play curated playlists instantly.
• 🌦️ Live Weather Dashboard: Integrated Open-Meteo & BigDataCloud APIs for real-time temperature and location data.
• 📱 Fully Responsive Glassmorphism UI: A modern, aesthetic interface built with Tailwind CSS that adapts from Desktop to Mobile.
• 🔒 Secure & Optimized: Uses Vite environment variables for security and lazy loading for performance.

Tech Stack

Domain	Technologies
Frontend	React.js (Vite), JavaScript (ES6+)
Styling	Tailwind CSS, Lucide React (Icons)
AI / ML	FaceAPI.js (Tensorflow.js based)
APIs	Spotify Web API, Open-Meteo (Weather), BigDataCloud (Geolocation)
Deployment	Vercel

Screenshots

Desktop View ( Befor Emotion Set )	Desktop View ( After Emotion Set )

Note: Try yourself for better experince.

Getting Started

Follow these steps to set up the project locally on your machine.

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• A Spotify Developer Account

Installation

1. Clone the Repository

   git clone https://github.com/deepakcode21/face-emotion-music-player.git
   cd face-emotion-music-player

2. Install Dependencies

   npm install

3. Configure Environment Variables Create a .env file in the root directory and add your Spotify credentials:

   VITE_SPOTIFY_CLIENT_ID=your_spotify_client_id
   VITE_SPOTIFY_CLIENT_SECRET=your_spotify_client_secret
   VITE_SPOTIFY_REDIRECT_URI=http://127.0.0.1:5173

   Note: You can get these keys from the Spotify Developer Dashboard. Ensure you add http://127.0.0.1:5173 to the Redirect URIs in your Spotify App settings.

4. Run the Development Server

   npm run dev

5. Open in Browser Navigate to http://127.0.0.1:5173 to see the app in action!

Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Credits & Acknowledgements

• Developer: Deepak (deepakcode21)
• Dedication: Dedicated to Gupta Ji ❤️ for being the muse behind this creation.
• APIs: Thanks to Spotify for Developers and Vincent Mühler for the incredible FaceAPI library.

---

Built with ❤️ and ☕ by Deepak