-
Notifications
You must be signed in to change notification settings - Fork 1
Home
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.
Name | Github Username | UoA Upi |
---|---|---|
Hong Shi | HongShi10 | hshi952 |
Dinith Wannigama | Dinith1 | dwan609 |
Nisarag Bhatt | FocalChord | nbha702 |
Open https://metrinom.herokuapp.com/ in Google Chrome and login to start viewing your statistics!
-
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 asflat()
(which is used in the backend) from ES2019 require node version11
or higher) -
Npm (However this does come with Node.js)
-
A code editor (VS code was used in the development of this project)
-
Open your terminal and
cd
into the server directory in server -
Run
npm install
inside of the server directory -
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
- 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:
- 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.
- After the
.env
file has been filled in and the redirect URI has been added. Ensure thatport 3001
is not occupied else you will have to change the redirect URI above accordingly. In the server directory, runnpm start
in terminal to start the server.
Expected terminal output after starting server
- Open your terminal (while your server is running) and
cd
into theclient
directory for this project. - Run
npm install
inside of the client directory - Run
npm start
inside of the client directory and ensure you are onport 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.
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 :)
Help! something is not working!
Feel free to contact Nisarag on his university email address (UPI) can be found above.
- We used Git extensively throughout the project, including features such as branching, merging, rebasing
- We used
React
,Express
,MongoDb
,Mongoose
,MaterialUI
,Jest
andEnzyme
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
- 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