Spotify Lite
There're lots of online music streaming services such as Spotify, QQ music, NetEase music, etc. Among them, I like Spotify's fantastic UI design. Thanks to Spotify's developer-friendly APIs, it's easy to deliver a fast Spotify clone app like the one that I will show you later.
Tech Frames
- Nextjs 12 (middleware, ssr)
- next-auth
- spotify-web-api-node
- tailwind 3
- recoil for global state management
Features
- SSO via Spotify
- List playlist
- List songs
- Play songs
- Adjust volume
- Go to the next/previous song
- Start or pause a song
- Responsive design
Basic Flow
After signing in via Spotify OAuth 2 and NextAuth package, we can see playlists you created on the official Spotify website. Users can choose a playlist and listen to the songs. Spotify Lite supports basic music control like pause and start, music shift, and volume adjustment. Of course, responsive design is achieved so mobile users can access the website with a great experience as well.