{"id":17626654,"url":"https://github.com/focalchord/metrinom","last_synced_at":"2025-03-30T02:20:42.865Z","repository":{"id":69304316,"uuid":"247440300","full_name":"FocalChord/Metrinom","owner":"FocalChord","description":"A web app for viewing spotify statistics curated for the user. Built using a modern MERN stack.","archived":false,"fork":false,"pushed_at":"2020-05-24T10:19:43.000Z","size":1008,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-05T04:45:34.875Z","etag":null,"topics":["music","statistics","student-project"],"latest_commit_sha":null,"homepage":"https://metrinom.herokuapp.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FocalChord.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-03-15T09:58:27.000Z","updated_at":"2022-03-06T05:59:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"093adaf4-be0c-421f-984a-5cad46cec32a","html_url":"https://github.com/FocalChord/Metrinom","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FocalChord%2FMetrinom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FocalChord%2FMetrinom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FocalChord%2FMetrinom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FocalChord%2FMetrinom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FocalChord","download_url":"https://codeload.github.com/FocalChord/Metrinom/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246266480,"owners_count":20749807,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["music","statistics","student-project"],"created_at":"2024-10-22T23:07:31.639Z","updated_at":"2025-03-30T02:20:42.841Z","avatar_url":"https://github.com/FocalChord.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Metrinom (Group 13)\n\n![Build](https://github.com/Dinith1/SOFTENG750-Project/workflows/Build/badge.svg?branch=master)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/34013038/82750926-df81b200-9e07-11ea-873e-412003591e0d.png\" alt=\"MetrinomLogo\"/\u003e\n\u003c/p\u003e\n\nA web app for viewing spotify statistics curated for the user.\n\nWe 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.\n\nThis app work well when a user has a Spotify account (preferably with a **premium subscription**) with some listening history.\n\n## Team Members in Group 13 (Emerald Elephant)\n\n| Name             | Github Username | UoA Upi |\n| ---------------- | --------------- | ------- |\n| Hong Shi         | HongShi10       | hshi952 |\n| Dinith Wannigama | Dinith1         | dwan609 |\n| Nisarag Bhatt    | FocalChord      | nbha702 |\n\n## How to use this app?\n\nOpen https://metrinom.herokuapp.com/ in Google Chrome and login to start viewing your statistics!\n\n## How do I run this app locally?\n\n### Prerequisites:\n\n-   You have cloned this repository onto your local machine\n\n-   [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)\n\n-   [Npm](https://www.npmjs.com/get-npm) (However this does come with Node.js)\n\n-   [MongoDB community server](https://www.mongodb.com/download-center/community)\n\n-   A code editor ([VS code](https://code.visualstudio.com/) was used in the development of this project)\n\n### Project setup:\n\n#### Server\n\n1. Open your terminal and `cd` into the server directory in server\n2. Run `npm install` inside of the server directory\n\n3. Create a `.env` file in the ./client folder with the following attributes:\n\n```\nSPOTIFY_CLIENT_ID=\u003cyour id\u003e\nSPOTIFY_CLIENT_SECRET=\u003cyour secret\u003e\n```\n\n\u003cdetails closed\u003e\n\u003csummary\u003e Steps to generate these secrets\u003c/summary\u003e\n\u003cbr\u003e\n\u003cp\u003e\n\nGo 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.\n\n-   A sample file `.env` will look like this\n\n```\nSPOTIFY_CLIENT_ID=asf124asfasf112\nSPOTIFY_CLIENT_SECRET=fasfj25j122\n```\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n4. Add redirect URI to the spotify application\n\n\u003cdetails closed\u003e\n\u003csummary\u003e Steps to add redirect URI \u003c/summary\u003e\n\u003cbr\u003e\n\nTo do this, go to your application the spotify dashboard; you will see this at the top of your page:\n\n![Screen Shot 2020-05-24 at 5 22 47 PM](https://user-images.githubusercontent.com/31643423/82746387-31fca780-9de3-11ea-89a0-61ba31a649e3.png)\n\nClick on Edit Settings and add http://localhost:3001/auth/spotify/callback as a redirect URI:\n\n![Screen Shot 2020-05-24 at 5 40 06 PM](https://user-images.githubusercontent.com/31643423/82746587-9de00f80-9de5-11ea-9007-a1833e788ca4.png)\n\nYou will then see this when added:\n\n![Screen Shot 2020-05-24 at 5 18 32 PM](https://user-images.githubusercontent.com/31643423/82746338-99febe00-9de2-11ea-98de-7099d9c8cbf5.png)\n\n\u003c/details\u003e\n\n5. 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.\n\n\u003cdetails\u003e\u003csummary\u003e Terminal output when database is not running locally and you attempt to start the server    \u003c/summary\u003e\n\u003cp\u003e\n\n![Screen Shot 2020-05-24 at 8 00 38 PM](https://user-images.githubusercontent.com/31643423/82748863-42b81800-9df9-11ea-9dd1-164fc84f5d61.png)\n\nTo fix this ensure MongoDB is running locally on your computer.\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n6. 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.\n\n\u003cdetails closed\u003e\n\u003csummary\u003e Expected terminal output after starting server \u003c/summary\u003e\n\u003cbr\u003e\n\n![Screen Shot 2020-05-24 at 5 34 17 PM](https://user-images.githubusercontent.com/31643423/82746536-f2cf5600-9de4-11ea-8432-545e83d203e4.png)\n\n\u003c/details\u003e\n\n#### Client\n\n1. Open your terminal (while your server is running) and `cd` into the `client` directory for this project.\n2. Run `npm install` inside of the client directory\n3. Run `npm start` inside of the client directory and ensure you are on `port 3000`\n\n\u003cdetails closed\u003e\n\u003csummary\u003e Expected terminal output after starting client \u003c/summary\u003e\n\u003cbr\u003e\n\n![Screen Shot 2020-05-24 at 5 40 06 PM](https://user-images.githubusercontent.com/31643423/82746587-9de00f80-9de5-11ea-9007-a1833e788ca4.png)\n\n\u003c/details\u003e\n\n\u003cdetails closed\u003e\n\u003csummary\u003e Expected browser output when going to http://localhost:3000/ on your browser \u003c/summary\u003e\n\u003cbr\u003e\n\n![Screen Shot 2020-05-24 at 5 45 54 PM](https://user-images.githubusercontent.com/31643423/82746664-6de53c00-9de6-11ea-9004-0be95457fedf.png)\n\n\u003c/details\u003e\n\nAfter the client and server have started running, you can start using the app.\n\n## FAQ:\n\n\u003cdetails\u003e\u003csummary\u003e Can I use a MongoDB cloud instance? \u003c/summary\u003e\n\u003cp\u003e\n\nYes you can, in the server `.env` file, on a new line add `DEV_DB_CONN=\u003cyour-connection-string\u003e`\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003e How do I know that the server responds to requests? \u003c/summary\u003e\n\u003cp\u003e\n\nWhile the server is running, open up your browser and go to `localhost:3001/heartbeat`\n\nYou should see a response as such:\n\n![Screen Shot 2020-05-24 at 5 58 12 PM](https://user-images.githubusercontent.com/31643423/82746822-252e8280-9de8-11ea-8f81-99fcd61e54bc.png)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003e When trying to login, I get an \"Invalid redirect URI\" error. How can I fix this? \u003c/summary\u003e\n\u003cp\u003e\n\nIf you encounter this error:\n\n![Screen Shot 2020-05-24 at 5 59 53 PM](https://user-images.githubusercontent.com/31643423/82746854-6161e300-9de8-11ea-90f0-fbf782288650.png)\n\nEnsure 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`)\n\nFor example the URI on my console:\n\n![Screen Shot 2020-05-24 at 6 02 28 PM](https://user-images.githubusercontent.com/31643423/82746892-be5d9900-9de8-11ea-832c-e28bb0778f9d.png)\n\nmatches the URI on my `passport.js` file\n\n![Screen Shot 2020-05-24 at 6 04 13 PM](https://user-images.githubusercontent.com/31643423/82746920-fc5abd00-9de8-11ea-9777-4e65d1103a2f.png)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003e I get a \"OAuth2Strategy requires a clientID option\" when trying to start the server   \u003c/summary\u003e\n\u003cp\u003e\n\nIf you encounter this error\n\n![Screen Shot 2020-05-24 at 6 07 27 PM](https://user-images.githubusercontent.com/31643423/82747005-6ffcca00-9de9-11ea-83f9-1ddfefb44e9c.png)\n\nEnsure that the the `SPOTIFY_CLIENT_ID` and `SPOTIFY_CLIENT_SECRET` is set in the .env for the client.\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003e I can't view statistics on certain pages :(   \u003c/summary\u003e\n\u003cp\u003e\n\nWhen 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!)\n\n![Screen Shot 2020-05-24 at 6 12 31 PM](https://user-images.githubusercontent.com/31643423/82747095-252f8200-9dea-11ea-8231-cb5655b4e4dd.png)\n\n![Screen Shot 2020-05-24 at 6 11 39 PM](https://user-images.githubusercontent.com/31643423/82747081-0630f000-9dea-11ea-94e3-4a6d1435fda3.png)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003e Top Artists Graph page is unresponsive   \u003c/summary\u003e\n\u003cp\u003e\n\nWhen the top artists graph load it should look like this and be responsive:\n\n![Screen Shot 2020-05-24 at 6 21 35 PM](https://user-images.githubusercontent.com/31643423/82747272-696f5200-9deb-11ea-8bea-d85f60b32653.png)\n\nHowever when you zoom in and out on your browser page then it _could_ look like this\n\n![Screen Shot 2020-05-24 at 6 23 57 PM](https://user-images.githubusercontent.com/31643423/82747309-bce1a000-9deb-11ea-99da-18550b2f297d.png)\n\nIf this does happen, then refresh the page and it should be fine :)\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003e How do I test the app?   \u003c/summary\u003e\n\u003cp\u003e\n\n#### Client\n\n-   `\u003e cd client`\n-   `\u003e npm test`\n\n#### Server\n\n-   `\u003e cd server`\n-   `\u003e npm test`\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003e Help! something is not working!  \u003c/summary\u003e\n\u003cp\u003e\n\nFeel free to contact Nisarag on his university email address (UPI) can be found above.\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n---\n\n## Project Questions:\n\n### How well have you mastered React, git, and other tools / frameworks introduced in this course?\n\n-   We used Git extensively throughout the project, including features such as branching, merging, rebasing\n-   We used `React`, `Express`, `MongoDb`, `Mongoose`, `MaterialUI`, `Jest` and `Enzyme`\n\n### Have you shown the ability to carry out further learning beyond the course material to add value to your prototype?\n\n-   We used `MaterialUi`, `mockingoose`, `React Context API` and many smaller frameworks for various aspects of the app\n-   We added Continuous Integration through `GitHub Actions`\n-   We deployed the app using `Heroku`\n\n### Has your code been developed according to best-practices within your applied frameworks? Is it understandable and maintainable?\n\n-   We applied best practices to our React components by abstracting functionality into smaller components\n-   We used JS best practices, such as using `const` to enforce immutability\n-   We applied best practices to our Express API by minimising URL path branching\n-   Other best practices were applied throughout the project for other frameworks\n\n### Has your code been tested? How?\n\n-   The [backend](https://github.com/Dinith1/SOFTENG750-Project/wiki/Backend-Tests) was tested extensively\n-   The [frontend](https://github.com/Dinith1/SOFTENG750-Project/wiki/Frontend-Tests) was tested extensively\n\n### Is there evidence of good project management, and appropriate contribution from all team members?\n\n-   We used GitHub issues to track tasks\n-   We used merge rules for PRs, meaning code-review had to take place\n-   We had regular meetings and information sessions to discuss development; see the [wiki](https://github.com/Dinith1/SOFTENG750-Project/wiki/Meetings) for more info\n-   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\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffocalchord%2Fmetrinom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffocalchord%2Fmetrinom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffocalchord%2Fmetrinom/lists"}