HugoLAMOUREUX / Spotidata

Web application linked to Spotify that shows some statistics about your music tastes and miscellaneous informations
MIT License
4 stars 5 forks source link

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.

React

Node

Getting started

Prerequesites

npm install npm@latest -g

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