MelodyQuest is an interactive web-based game where users guess songs based on short audio clips and lyrics. Utilizing the Spotify Web Playback SDK, the game streams random segments from selected playlists to challenge users' musical knowledge. The game offers both single-player and multiplayer modes. In single-player mode, you can listen to a music clip and guess the song name. For multiplayer, you can start or join a room with your friends and guess the song name based on the lyrics.
Live Website: www.melodyquest.app
- React.js (v17.0.0)
- Node.js (>=14.x)
- socket.io
- postgreSQL
- Spotify Premium Account
Create a postgreSQL database and add its configurations to the .env file.
Login into Spotify developer dashboard and create a app using the instructions with permissions for Web API and Web Playback SDK.
Create a musixmatch developer account and add your api key to .env as LYRICS_API_KEY
.
Create a .env file in the root directory and add the following variables
SPOTIFY_CLIENT_ID=your_client_id
SPOTIFY_CLIENT_SECRET=your_client_secret
SPOTIFY_TOKEN=your_spotify_token
DB_USER=your_db_user
DB_HOST=your_db_host
DB_NAME=your_db_name
DB_PASSWORD=your_db_password
DB_PORT=your_db_port
SERVER_PORT=your_server_port
SERVER_URL=your_server_url
CLIENT_URL=your_client_url
REACT_APP_SERVER_URL=your_react_app_server_url
LYRICS_API_KEY=your_lyrics_api_key
Next, you can either follow the traditional method or use Docker for setting up the application.
-
Clone the repository:
git clone https://github.com/Romansth/melodyquest.git cd melodyquest
-
Install dependencies:
npm install
-
Start the development server
npm run dev
docker compose up
npm test
- Open the game in a Chrome browser.
- Select a challenge (playlist) to start.
- Choose Single player or Multiplayer mode.
- In Multiplayer mode, start or join a room to play with your friends.
- Listen to the short audio clip or the lyrics and enter your guess.
- Your score is updated based on the correctness and the time taken to guess.
- Global highscores are stored and displayed on the home page.
The CI/CD pipeline runs unit tests, sends latest merge to Docker Hub, and uses a render hook to deploy the web app on Render.
Contributions are welcome! Please fork the repository and submit a pull request with your changes.
This project is licensed under the MIT License. See the LICENSE file for more details.