Skip to content

Neeraj-code-beep/Moddy_Player

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

23 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

๐ŸŽง Moddy Player

React Node Express MongoDB Tailwind FaceAPI Storage

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.


๐Ÿš€ Project Overview

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.


๐Ÿง  How It Works

  1. User opens the application
  2. Webcam captures the user's face
  3. face-api.js detects facial expressions
  4. The system predicts the user's mood
  5. Mood is sent to the Node.js backend
  6. Backend fetches songs from MongoDB
  7. Songs are displayed to the user

๐Ÿ›  Tech Stack

Frontend

  • React
  • TailwindCSS
  • face-api.js
  • Vite

Backend

  • Node.js
  • Express.js

Database

  • MongoDB

Storage

  • ImageKit (for storing songs)

๐Ÿ“‚ Project Structure

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

๐ŸŽฏ Current Features

  • 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

โš ๏ธ Current Limitations

  • 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.


๐Ÿ”ฎ Future Plans

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

โš™๏ธ Running the Project Locally

1. Fork the Repository

Click the Fork button on the top-right of the GitHub repository.


2. Clone the Repository

git clone https://github.com/YOUR_USERNAME/moddy-player.git

3. Navigate to the Project

cd moddy-player

๐Ÿ”ง Backend Setup

Install dependencies:

npm install

Run the backend server:

node server.js

Backend server will start at:

http://localhost:5000

๐ŸŽจ Frontend Setup

Open a new terminal and run:

cd frontend
npm install
npm run dev

Frontend will run at:

http://localhost:5173

๐Ÿ”‘ Environment Variables

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

๐Ÿค Contributing

Contributions are welcome.

Steps to contribute:

  1. Fork the repository

  2. Create a new branch

git checkout -b feature-name
  1. Commit your changes
git commit -m "Added new feature"
  1. Push your branch
git push origin feature-name
  1. Open a Pull Request

๐Ÿ’– Contributors

Thanks to all the amazing people who contribute to Moddy_Player ๐Ÿš€

Contributors


โญ Project Support

Stars ย ย  Forks


๐Ÿ‘จโ€๐Ÿ’ป Author

Neeraj Mishra

This project was built to experiment with:

  • AI + Computer Vision
  • Emotion Detection
  • Music Recommendation Systems
  • Full Stack Development

โญ Support

If you like this project, consider giving it a star on GitHub.

About

An AI-powered mood-based music player that detects facial expressions and recommends songs using React, Node.js, and face-api.js.

Resources

License

Code of conduct

Contributing

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors