Statify React app

A React app that uses the Spotify API to display your top artists and tracks. Made with Create React App and in conjunction with a Node.js backend and compatible with both desktop and mobile devices.

Video Demo

Getting Started

Prerequisites

• Node.js
• npm
• Premium Spotify account
• Spotify Developer account

Local Installation

1. Clone the repo

   git clone

2. Install NPM packages

   npm install

3. Create a .env file in the root directory and add the following:

   REACT_APP_CLIENT_ID=your_client_id
   REACT_APP_REDIRECT_URI=http://localhost:3000/statify-react-app # or your frontend URI, must be the same as the one in your Spotify Developer dashboard
   REACT_APP_API_BASE=http://localhost:4000/api # or your backend URI
   REACT_APP_SCOPE = "user-top-read user-read-recently-played"

4. Start the app

   npm start

5. Follow the instructions in the Node.js backend repo
6. Open http://localhost:3000 to view it in the browser.

Usage

1. Click the login button to log in with your Spotify account.
2. Click the top artists, top tracks or top genres button to display your top artists, tracks and genres, respectively.
3. Click the logout button to log out of your Spotify account.

Future Plans

• Add a recently played page
• Add history to top tracks, artists and genres pages
• Deploy the React app to a hosting service (likely Github Pages, hence the project name /statify-react-app being included in the base URL) and the Node.js backend to a server

License

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

Gallery