Music Explorer – AI-Powered Music Recommendation Web App

AI-Powered Music Recommendation Web App that lets users generate songs - voice, recognize song, location point or text input. Integrated OpenAI for understanding user intent, YouTube Data API for song recommendations, and Spotify API for categorized playlists by genre.

Features

• audio recording: Using MediaRecorder for easily handling record media and sending it as Blob() file to the server + using ACRCloud API for music recognition and generate the recognized song.
• Voice Intent: Using Web Speech API for voice speech and sending transcript to the server, OpenAI API handling the transcript and generate the songs based on transcript.
• Google Maps API: Using Google API maps for user interaction to get exact location based on user pin point on the map to get personalized music based on location
• Spotify API: display music categories, retrieve playlists
• YouTube Data API: using YouTube API to retrieve video songs
• Authentication: Secure user login and registration powered by OAuth with firebase and JWT (JSON Web Tokens)
• Databases + Cache: MongoDB + Firebase for storing users, playlists and songs and all history songs in firebase and using Redis for caching songs
• Cloudinary API: Using Cloudniary for uploading images(playlist images)
• Frontend: responsive UI built with React.js + Vite , using components libraries for UI and Module.CSS for every component
• Backend API: Node.js + Express handles AI generation, authentication, and data management.

Tech Stack

• Language: JavaScript + TypeScript.
• Backend: Node.js + Express.js.
• Frontend: Vite + React.js.
• Database & Auth & Cache: MongoDB + Firebase (Database, Authentication), Redis (Caching).
• API Service: OpenAI API, Spotify, Google Maps, YouTube Data, ACRCloud, Web Speech, Cloudinary.
• HTTP Client: Axios/Fetch API.

Quick Start

Follow these steps to get a local copy of Music Explorer up and running.

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• MongoDB (Local or Atlas connection string)
• Redis (Local instance or cloud URL)
• Firebase Account (For authentication keys)
• Spotify Developer Account (For Client ID & Secret & ACCESS_TOKEN)
• OpenAI API (for API_KEY)
• Google Services (For YouTube API Keys and Google Maps API)
• ACR Cloud Account (For access + secret keys & Host)
• Cloudniary (For uploading files to cloud)

Installations

1. Clone the repository

git clone https://github.com/Dolevs1997/music-explorer.git
cd music-explorer

2. Install Dependencies (Root)

npm install

3. Install Client & Server Dependencies

cd client && npm install
cd ../server && npm install --save-dev typescript @types/node

4. Start Development Servers
In terminal 1 (Server):

cd server
npm run dev

In terminal 2 (Client):

cd client
npm run dev

5. Environment setup

cp  server/.env

Update .env for server with the following configuration:

• PORT
• SPOTIFY_CLIENT_ID
• SPOTIFY_CLIENT_SECRET
• SPOTIFY_ACCESS_TOKEN
• OPENAI_API_KEY
• YOUTUBE_API_KEY
• YOUTUBE_CLIENT_ID
• DATABASE_URL
• DATABASE_NAME
• REFRESH AND ACCESS TOKENS
• ACR Cloud (Tokens & Host)
• Firebase (API key, Domain, Project-id, Storage_bucket, Messaging sender id, App id, MeasureMent Id)
• Redis URL
• Cloudniary API

cp  client/.env

Update .env for client with the following configuration:

• Server URL
• OpenAI API Key
• Google Maps API Key
• Map Id
6. Development:

# Run backend
cd server && npm run dev

# Run frontend
cd server && npm run dev

Repository Structure

music-explorer/
├── client/                 # React Frontend
│   ├── src/
│   │   ├── components/     # Reusable UI components (Song, SearchBar,NavBar,...)
│   │   ├── pages/          # Page views (Home, CaregoriesPlaylists, Login)
│   │   ├── context/        # React Context for User, Search
│   │   ├── services/       # API service functions (OpenAI, YouTube)
│   │   └── utils/          # helper functions (playlist, recording, voice search .. )
│   └── public/
├── server/                 # Node.js Backend
│   ├── src/
│   │   ├── config/         # Firebase and ACR cloud configuration
│   │   ├── controllers/    # Logic for handling requests
│   │   ├── models/         # Firebase Business Logic layer (User, Playlist)
│   │   ├── routes/         # API route definitions
│   │   ├── middleware/     # Auth and error handling middleware
│   │   ├── schemas/        # Database Schemas ( Song, User)
|   |   ├── services/       # handling external APIs ( OpenAI, YouTube )
|   |   ├── uploads/        # uploading all files with song recognition
│   |   ├──  app.ts             # Entry point
|   |   ├── server.ts           # Create server
|   ├──tsconfig.json         # compile files to typescript
└── README.md

Music Explorer Architecture