Almost Spotify is a responsive Spotify clone built with Next.js, TypeScript, and Tailwind CSS. It uses NextAuth for authentication, the Spotify API to fetch data about tracks, albums, playlists, and the currrent user, and the Spotify Web Playback SDK to control playback in the application. Users are required to log in with a Spotify Premium account.
Supported features:
- Browsing liked songs, recently played, saved albums, and playlists (each limited to 50)
- Searching for tracks, playlists, and albums
- Playing tracks from albums, playlists, or search results
- Controlling playback (play/pause, skip forward/back, toggle shuffle/loop, adjust volume)
Not supported:
- Liking tracks
- Saving albums
- Creating or saving playlists
- Searching for users or artists
- Viewing user or artist profiles
- Displaying queue (API endpoint doesn't return the correct queue)
- Anything relating to podcasts
Because this application is in development mode and would require all users to be added to an allowlist, it is not deployed publicly.
# Clone the repository
git clone https://github.com/annawng/almost-spotify.git
# Install dependencies
npm install
- Log into the Spotify Developer Dashboard using your Spotify account.
- Create an app and locate the Client ID and Client Secret.
- At the root of the project, create a file named
.env.local. - Add the two values to the file as shown below.
CLIENT_ID=<your-client-id>
CLIENT_SECRET=<your-client-secret>
- Generate a secure random string with the following command. This will be your NextAuth.js secret.
openssl rand -base64 32
- Add this value to
.env.localas shown below.
NEXTAUTH_SECRET=<your-random-string>
# Start the development server
npm run dev
