Self-updating Spotify playlists of your Top Songs, Likes and History (WIP)
- 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
- Spotify Web API
- TypeScript
- Next.js [currently migrating to next13's new server components]
- tRPC [refactoring in progress]
- Prisma
- PlanetScale
- NextAuth
- TailwindCSS
- Plausible Analytics
.
├── 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
- 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
andClient Secret
- Sign up for PlanetScale
- Create a new database
- Click on
Connect
and copy theDATABASE_URL='mysql...'
value
git clone https://github.com/paulphys/topsongs.me
cd topsongs.me
yarn
yarn dev
Create a .env
file similar to .env.example
in the root of the application and fill in all values.
Add all Environment Variables from .env.example
to the production build.
Within the Spotify Dashboard, configure your application with new public Redirect URI
.