Spotidata

About the project

Web application linked to Spotify that shows some statistics about your music tastes and miscellaneous informations.

Built with

Back end built with Node.Js and the framework Express, Front end with React.Js. See below the architecture of the project with the technologies involved.

Getting started

Prerequesites

• npm

npm install npm@latest -g

• Ask us to add you to the authorized users : as we use the development mode of the Spotify API, we have to say to Spotify which user will use the application so that they allow him to make requests

Send the email of your Spotify account to hugo.lamoureux18@gmail.com

Installation

1. Clone the repository

git clone https://github.com/HugoLAMOUREUX/Spotidata

2. Add a .env file in the back repository : create a config repository under the back repository and create in it a .env file as follows :

NODE_ENV= development
PORT = 5000
CLIENTID = "insert your spotify client id"
CLIENTSECRET = "insert your spotify client secret"

3. Open a terminal in the Spotidata repository and launch the back end

cd back
npm i
npm start

4. Open another terminal in the Spotidata repository and launch the front end

cd front
npm i
npm start

Debug process

If you want to test the back end functions, you'll have to do the following :

1. Install Postman.
2. Run the front-end in VS-Code, then connect with Spotify on Spotidata.
3. Still in Spotidata, to access your token, go to the developer mode of your browser and in the console your access token will be printed, copy it.
4. Now go back to VS-Code and launch the back-end. (you can launch it before, it doesn't change anything).
5. On Postman there are several ways to send requests, select "GET" if not already selected.
6. In the url type this http://127.0.0.1:5000/api/spotify/NameOfWhatYouWantToTest, eg : http://127.0.0.1:5000/api/spotify/GetAlbumDetails
7. Now you need to add your access token to the request; to do this, under the URL, in the Params tab, click on the first case and add the key as "access_token" and as value your access token. (And check the line)
8. If you have other parameters to enter, such as the album id, proceed in the same way: enter the key "album_id" and the value of the album id (parameter req.query.xxx). Now send the query and see the result.

Usage

When you open the website you'll arrive on the home page and you'll be able to connect your account to spotify and give the authorizations :

Then you can see all your statistics :

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

For further informations, please go to CONTRIBUTING.md

License

Distributed under the MIT License. See LICENSE.txt for more information.

Contact

Hugo LAMOUREUX - hugo.lamoureux18@gmail.com - Linkedin

Charly FLU - charly.flu.67@gmail.com

Antoine GERMON - antoine.germon67@gmail.com

Project Link: https://github.com/HugoLAMOUREUX/Spotidata