FocalChord/Metrinom

A web app for viewing spotify statistics curated for the user. Built using a modern MERN stack.

Metrinom (Group 13)

A web app for viewing spotify statistics curated for the user.

We are using the React framework to manage the front-end UI and using a Node JS server utilising the Express framework and MongoDB database for the back-end. The back-end calls the Spotify API endpoints and returns the relevant information to the frontend.

This app work well when a user has a Spotify account (preferably with a premium subscription) with some listening history.

Team Members in Group 13 (Emerald Elephant)

Name	Github Username	UoA Upi
Hong Shi	HongShi10	hshi952
Dinith Wannigama	Dinith1	dwan609
Nisarag Bhatt	FocalChord	nbha702

How to use this app?

Open https://metrinom.herokuapp.com/ in Google Chrome and login to start viewing your statistics!

How do I run this app locally?

Prerequisites:

• You have cloned this repository onto your local machine

• Node.js (Make sure your node version is more than 11 or the server might crash, this is because some functions such as flat() (which is used in the backend) from ES2019 require node version 11 or higher)

• Npm (However this does come with Node.js)

• MongoDB community server

• A code editor (VS code was used in the development of this project)

Project setup:

Server

1. Open your terminal and cd into the server directory in server

2. Run npm install inside of the server directory

3. Create a .env file in the ./client folder with the following attributes:

SPOTIFY_CLIENT_ID=<your id>
SPOTIFY_CLIENT_SECRET=<your secret>

Steps to generate these secrets

Go to: https://developer.spotify.com/dashboard/applications and create a new application, after the application has been created you will see that a Client Id and a Client Secret has been generated. Paste these into the environment file above.

• A sample file .env will look like this

SPOTIFY_CLIENT_ID=asf124asfasf112
SPOTIFY_CLIENT_SECRET=fasfj25j122

4. Add redirect URI to the spotify application

Steps to add redirect URI

To do this, go to your application the spotify dashboard; you will see this at the top of your page:

Click on Edit Settings and add http://localhost:3001/auth/spotify/callback as a redirect URI:

You will then see this when added:

5. Make sure your MongoDB database is running locally by using the relevant commands to your operating system (Note this step is important else the server might crash if Mongo is not running on your computer). See here for more on details on running MongoDB locally.

Terminal output when database is not running locally and you attempt to start the server

To fix this ensure MongoDB is running locally on your computer.

6. After the .env file has been filled in and the redirect URI has been added. Ensure that port 3001 is not occupied else you will have to change the redirect URI above accordingly. In the server directory, run npm start in terminal to start the server.

Expected terminal output after starting server

Client

1. Open your terminal (while your server is running) and cd into the client directory for this project.
2. Run npm install inside of the client directory
3. Run npm start inside of the client directory and ensure you are on port 3000

Expected terminal output after starting client

Expected browser output when going to http://localhost:3000/ on your browser

After the client and server have started running, you can start using the app.

FAQ:

Can I use a MongoDB cloud instance?

Yes you can, in the server .env file, on a new line add DEV_DB_CONN=<your-connection-string>

How do I know that the server responds to requests?

While the server is running, open up your browser and go to localhost:3001/heartbeat

You should see a response as such:

When trying to login, I get an "Invalid redirect URI" error. How can I fix this?

If you encounter this error:

Ensure that the spotify URI you have registered on your application matches line 9 inside of the passport.js file in the server directory. Ensure that the server is also running on that port you have mentioned (in our case 3001)

For example the URI on my console:

matches the URI on my passport.js file

I get a "OAuth2Strategy requires a clientID option" when trying to start the server

If you encounter this error

Ensure that the the SPOTIFY_CLIENT_ID and SPOTIFY_CLIENT_SECRET is set in the .env for the client.

I can't view statistics on certain pages :(

When you login and browse around the app and see empty screens (like the screenshots below), you probably do not have enough music history (i.e. you need to listen to more music!)

Top Artists Graph page is unresponsive

When the top artists graph load it should look like this and be responsive:

However when you zoom in and out on your browser page then it could look like this

If this does happen, then refresh the page and it should be fine :)

How do I test the app?

Client

• > cd client
• > npm test

Server

• > cd server
• > npm test

Help! something is not working!

Feel free to contact Nisarag on his university email address (UPI) can be found above.

---

Project Questions:

How well have you mastered React, git, and other tools / frameworks introduced in this course?

• We used Git extensively throughout the project, including features such as branching, merging, rebasing
• We used React, Express, MongoDb, Mongoose, MaterialUI, Jest and Enzyme

Have you shown the ability to carry out further learning beyond the course material to add value to your prototype?

• We used MaterialUi, mockingoose, React Context API and many smaller frameworks for various aspects of the app
• We added Continuous Integration through GitHub Actions
• We deployed the app using Heroku

Has your code been developed according to best-practices within your applied frameworks? Is it understandable and maintainable?

• We applied best practices to our React components by abstracting functionality into smaller components
• We used JS best practices, such as using const to enforce immutability
• We applied best practices to our Express API by minimising URL path branching
• Other best practices were applied throughout the project for other frameworks

Has your code been tested? How?

• The backend was tested extensively
• The frontend was tested extensively

Is there evidence of good project management, and appropriate contribution from all team members?

• We used GitHub issues to track tasks
• We used merge rules for PRs, meaning code-review had to take place
• We had regular meetings and information sessions to discuss development; see the wiki for more info
• Each team member was fully involved throughout the project's development, and contribution was roughly equal among everyone in terms of coding, management, code-review and research