beneckimateusz / spotiled

Check your Spotify top artist/tracks in a convenient way.

spotiled

spotify-tiled

Check your Spotify top artists/tracks in a convenient way

Table of contents

• Description
• Tech stack
• Authorization
• Presentation
• Development

Description

The purpose of this app is to display a charming list of top artists/tracks the user have been listening to during a specific period (last 4 weeks, last 6 months, several years).

Disclaimer: Wrapping an existing, well-developed API in GraphQL and TypeScript is obviously an overkill. However, I've decided to do so in order to learn some new tech.

Tech stack

• Frontend - React.js, Chakra UI, Apollo Client
• Backend - Node.js, Express.js, GraphQL, TypeGraphQL, Apollo Server

Authorization

spotiled needs your permission granted during the Authorization Code Flow specified in OAuth 2.0 standard to retrieve data from Spotify Web API.

Presentation

Top artists

Top tracks

Embedded player

Development

Requirements for both client and server are listed in Tech stack section.

Server

# Clone environment variables template
cp .env.template .env
# Fill out envs
vim .env
# Install dependencies
npm i
# Run the development server
npm run dev

Now you can visit localhost:{port_from_dotenv}/api from your browser for an interactive GraphQL playground.

Client

# Change proxy port so it matches with the backend
vim package.json
# Install dependencies
npm i
# Run the development server
npm start

Now you can visit localhost:3000 from your browser.