Moddy Player is an experimental AI-powered mood-based music recommendation web application.
The app detects a user's facial expression through their webcam, determines their current mood, and suggests songs accordingly.
This project mainly focuses on core functionality and system architecture, combining Computer Vision, AI concepts, and Web Development.
The goal of Moddy Player is to explore how facial emotion recognition can be used to recommend music dynamically.
Instead of asking users what they want to listen to, the system analyzes their facial expressions and automatically suggests songs.
- User opens the application
- Webcam captures the user's face
- face-api.js detects facial expressions
- The system predicts the user's mood
- Mood is sent to the Node.js backend
- Backend fetches songs from MongoDB
- Songs are displayed to the user
- React
- TailwindCSS
- face-api.js
- Vite
- Node.js
- Express.js
- MongoDB
- ImageKit (for storing songs)
moddy-player
โ
โโโ server.js # Express backend server
โ
โโโ frontend
โ โโโ public
โ โ
โ โโโ src
โ โ โโโ api
โ โ โ โโโ api.js # API requests
โ โ โ
โ โ โโโ components
โ โ โ โโโ MoodDetector.jsx # Detects user mood
โ โ โ โโโ MoodSongs.jsx # Displays recommended songs
โ โ โ
โ โ โโโ App.jsx
โ โ โโโ main.jsx
โ โ โโโ index.css
โ โ
โ โโโ index.html
โ โโโ package.json
โ โโโ vite.config.js
โ โโโ eslint.config.js
โ
โโโ .gitignore
โโโ README.md
โโโ Notes.md
- Face detection using webcam
- Mood detection using facial expressions
- Song recommendation based on mood
- Song storage using ImageKit
- MongoDB for storing song metadata
- React frontend with TailwindCSS
- UI is very basic
- Songs are manually uploaded
- No authentication system yet
- Limited dataset of songs
This project mainly focuses on learning and experimenting with AI + Web Development.
Planned improvements include:
- Using Gemini AI to automatically classify songs by genre and mood
- Automatic mood tagging of songs
- Spotify API integration
- Mood analytics and listening history
- Improved UI/UX
- Personalized recommendations
Click the Fork button on the top-right of the GitHub repository.
git clone https://github.com/YOUR_USERNAME/moddy-player.gitcd moddy-playerInstall dependencies:
npm installRun the backend server:
node server.jsBackend server will start at:
http://localhost:5000
Open a new terminal and run:
cd frontend
npm install
npm run devFrontend will run at:
http://localhost:5173
Create a .env file in the root directory and add the following:
MONGO_URI=your_mongodb_connection_string
IMAGEKIT_PUBLIC_KEY=your_public_key
IMAGEKIT_PRIVATE_KEY=your_private_key
IMAGEKIT_URL_ENDPOINT=your_url_endpoint
Contributions are welcome.
Steps to contribute:
-
Fork the repository
-
Create a new branch
git checkout -b feature-name
- Commit your changes
git commit -m "Added new feature"
- Push your branch
git push origin feature-name
- Open a Pull Request
Thanks to all the amazing people who contribute to Moddy_Player ๐
Neeraj Mishra
This project was built to experiment with:
- AI + Computer Vision
- Emotion Detection
- Music Recommendation Systems
- Full Stack Development
If you like this project, consider giving it a star on GitHub.