paulphys / topsongs.me

Spotify playlists of your most streamed songs, likes and history (beta)

topsongs.me

Self-updating Spotify playlists of your Top Songs, Likes and History (WIP)

Features

• Spotify-like User interface
• Playlist generation
  • Most streamed songs (4 weeks, 6 months, All time)
  • History (Last 50 played songs)
  • Liked Songs
• Node backend for continuously updating the playlists

Built with

• Spotify Web API
• TypeScript
• Next.js [currently migrating to next13's new server components]
• tRPC [refactoring in progress]
• Prisma
• PlanetScale
• NextAuth
• TailwindCSS
• Plausible Analytics

Structure

.
├── prisma                      # prisma database schema
├── public                      # public assets (static images)
├── src
    ├── context                 # react context wrappers
    ├── modules
        ├── app                 # app components
        ├── landing             # landing page components
    ├── pages
        ├── album               # album page
        ├── api
            ├── auth            # NextAuth logic
        ├── artist              # artist page
        ├── collection
        ├── playlist            # playlist page
    ├── styles                  # css styling
    ├── types                   # custom types
    └── utils                   # utility functions

Setup

Spotify API

• Sign up for a Spotify developer account
• Create a new application
• Add http://localhost:3000/api/auth/callback/spotify as Redirect URI
• Copy Client ID and Client Secret

PlanetScale DB

• Sign up for PlanetScale
• Create a new database
• Click on Connect and copy the DATABASE_URL='mysql...' value

Develop locally

git clone https://github.com/paulphys/topsongs.me
cd topsongs.me
yarn
yarn dev

Environment variables

Create a .env file similar to .env.example in the root of the application and fill in all values.

Deploy to Vercel ▲

Add all Environment Variables from .env.example to the production build.

Within the Spotify Dashboard, configure your application with new public Redirect URI.