*** DISCLAIMER: Heroku application is in beta testing, please sign up using this form in order to be able to authenticate with your Spotify account. Otherwise, please feel free to clone this repo and follow the setup instructions below ***

WD Diploma - Capstone Project

Project Title: aimBeats
Author: Brandon Ong
Cohort: Web Development 2022 (Part-time)

This project was bootstrapped with Create React App.

Setup Instructions

You will need to clone this repo along with the server repo, which can be found here. Both repos will require a .env, which you will need to create. Please refer to the sample.env files in both repos to see how to configure those.

Client:

git clone https://github.com/brandodo/capstone-client.git  

Server:

git clone https://github.com/brandodo/capstone-server.git  

Install Dependencies:

npm i

Run Client:

npm start

Run Server using nodemon:

npm run devStart

Project Overview

1.1 Description

A circle clicking rhythm game where users can test their dexterity while enjoying their favorite tunes.

1.2 Problem

aimBeats gives the casual music listener an easy to learn and personalized music listening and gaming experience, which puts their dexterity to the test. The game was inspired by both Osu! - a popular online rhythm clicking game, and with Aim Labs - an online game/workshop that assist FPS (first person shooter) gamers improve their aim. aimBeats is a mix of the two in that users will be able to search and select songs they enjoy listening to and test their hand-eye coordination in clicking the circles that randomly appear to the beat of the music.

1.3 User Profile

The app will be geared towards:

• Casual music listeners as a secondary activity while listening to their favorite music.
• FPS gamers as a warm up exercise.

1.4 Requirements: Use Cases and Features

As a user:

• I can connect my Spotify account to search and play my favorite songs
• I can compete against friends by setting new high scores
• I can pick my favorite songs to play and improve my hand-eye coordination

1.5 Tech Stack and APIs

• Front-End: React
• Back-End: NodeJS and Express
• Libraries & Packages
  • React Router 5.3
  • React Spring
  • Material UI
  • react-particles-js
• Spotify API
• PassportJS
• MySQL & KnexJS

Full project details can be found in the presentation here.