Tune Teasers

A multiplayer music quiz game built with React, Express, Socket.IO, and Spotify API integration.


View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contact
6. Acknowledgments

About The Project

Tune Teasers is an exciting party game that brings together groups of friends for a thrilling and fast-paced challenge. In this game, players compete against each other to guess the name of a song associated with a music clip played within a customizable time frame.

With the growing popularity of online quizzes and trivia games, Tune Teasers caters specifically to music enthusiasts who are seeking a fun and interactive music trivia platform. It provides a dedicated space where players can test their music knowledge, engage in interactive gameplay features, and enjoy a vibrant and intuitive user interface.

The project aims to deliver a captivating experience, offering a wide range of music-related questions that keep players entertained and engaged. Whether you're a music aficionado or simply enjoy friendly competition, Tune Teasers offers an opportunity to showcase your skills and enjoy a fun-filled gaming experience with friends.

(back to top)

Built With

Frontend:

Backend:

API Integration:

Getting Started

Prerequisites

Before you can run the Tune Teasers application, make sure you have the following software installed on your machine:

• Node.js: Install the latest version of Node.js by visiting the official Node.js website and following the installation instructions for your operating system.

• Sign up for a free account at Spotify for Developers

  1. Head to https://developer.spotify.com/dashboard and click "Create App"

  2. Fill in your app informations. Just use http://localhost:3001 for Redirect_URI if you dont have one.

  3. Click "Settings" to go to your app's settings and save your Client ID and Client Secret for later

Installation

1. Clone the repo

   git clone https://github.com/BahnMiFPS/tuneteasers.git

Client

1. Install NPM packages

   npm install

2. Make an .env file using this template below

   REACT_APP_DEPLOYMENT_URL = ""
   REACT_APP_LOCAL_URL = "http://localhost:3001"
   NODE_ENV = "development"

3. Run the server on your local:

   npm start

Server

1. Cd into the server folder

   cd server/

2. Install NPM packages

   npm install

3. Make an .env file using this template below

   SPOTIFY_ID = "YOUR SPOTIFY CLIENT ID"
   SPOTIFY_SECRET = "YOUR SPOTIFY CLIENT SECRET"
   DEPLOYMENT_URL = ""
   LOCAL_URL = "http://localhost:3000"
   NODE_ENV = "development"

4. Run the server on your local:

   npm run dev

5. Enjoy Tune Teasers with your friends or you can use another browser (or the private mode of your browser) to create another peer

Usage

As a user, I can:

• Join a room and participate in multiplayer music quiz games.
• Create a room and invite friends to join and play together.
• Choose different game modes, such as Slow, Fast, or Custom.
• Select specific song numbers for the quiz to customize the gameplay experience.
• Pick music playlists from different countries and genres.
• Answer questions related to music, including identifying songs.
• See my score and ranking on the leaderboard during the game.
• Communicate with other players using the chat feature.
• Start the game and progress through multiple rounds of questions.
• View the correct answers and learn more about the music trivia.
• Leave a room when the game is finished.

(back to top)

Roadmap

• Implement the ability for users to filter multiple music categories for a more customized quiz experience.
• Enhance user experience by implementing persistent user sessions to allow for seamless continuation of gameplay across sessions.
• Reduce reliance on the Spotify API by integrating additional music sources or expanding the existing database of questions.
• Implement scaling strategies to handle increased traffic and user load:
  • Explore running socket.io on multiple Node instances to improve performance and handle a higher number of concurrent connections.
  • Replace the default in-memory adapter with a Redis adapter or another compatible adapter to enable better scalability and handling of large amounts of data.

Please refer to the open issues for a complete list of proposed features, bug fixes, and known issues.

(back to top)

Contact

Quang Vu Luong - @LinkedIn - [email protected]

Project Link: https://github.com/BahnMiFPS/tuneteasers

(back to top)

Acknowledgments

CoderSchool's Tech Tank Competition hosted by CoderSchool x Grab

• Mr. Tuan Anh Hoang (Luke)
• My CoderSchool Bootcamp Mentor, Mr. Tam Vu
• Ms. Ally Nguyen

(back to top)