Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/focalchord/metrinom
A web app for viewing spotify statistics curated for the user. Built using a modern MERN stack.
https://github.com/focalchord/metrinom
music statistics student-project
Last synced: 1 day ago
JSON representation
A web app for viewing spotify statistics curated for the user. Built using a modern MERN stack.
- Host: GitHub
- URL: https://github.com/focalchord/metrinom
- Owner: FocalChord
- License: gpl-3.0
- Created: 2020-03-15T09:58:27.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-05-24T10:19:43.000Z (over 4 years ago)
- Last Synced: 2024-12-10T20:44:16.561Z (about 2 months ago)
- Topics: music, statistics, student-project
- Language: JavaScript
- Homepage: https://metrinom.herokuapp.com/
- Size: 984 KB
- Stars: 2
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Metrinom (Group 13)
A web app for viewing spotify statistics curated for the user.
We are using the [React framework](https://reactjs.org/) to manage the front-end UI and using a [Node JS](https://nodejs.org/en/) server utilising the [Express framework](https://expressjs.com/) and [MongoDB database](https://www.mongodb.com/what-is-mongodb) for the back-end. The back-end calls the [Spotify API](https://developer.spotify.com/documentation/web-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](https://nodejs.org/en/) (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](https://www.npmjs.com/get-npm) (However this does come with Node.js)
- [MongoDB community server](https://www.mongodb.com/download-center/community)
- A code editor ([VS code](https://code.visualstudio.com/) 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=
SPOTIFY_CLIENT_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](https://docs.mongodb.com/manual/administration/install-community/) 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=`
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](https://github.com/Dinith1/SOFTENG750-Project/wiki/Backend-Tests) was tested extensively
- The [frontend](https://github.com/Dinith1/SOFTENG750-Project/wiki/Frontend-Tests) 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](https://github.com/Dinith1/SOFTENG750-Project/wiki/Meetings) 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