This is a Spotify clone built using Next.js, a popular React framework for server-side rendering and building modern web applications. The project aims to replicate some of the core features of the Spotify music streaming service.
https://spotify-clone-mocha-ten.vercel.app
- Browsing and searching for songs, artists, and albums
- Playing songs with audio controls (play, pause, skip)
- Responsive design for different screen sizes
- Next.js
- React
- MaterialUI
- Tailwind CSS
- Deezer API
- useDeepCompareEffect
- Axios
- RadixUI
- Lucide Icons
- Vercel
Provide step-by-step instructions to set up the project locally:
- Clone the repository:
git clone https://github.com/Pewaukee/spotify-clone.git
- Navigate to the project directory:
cd spotify-clone
- Install dependencies:
npm install
oryarn install
- Start development server:
npm run dev
- Deploy on Vercel
There are different issues with mobile and desktop versions of the application.
Sometimes the queue might be jammed and the request to the API not go through, refreshing the page should fix this. Also, on mobile, when playing a song, the request does not automatically go through and start playing the song. For this, we need to click on the play button twice.
- Perhaps using Redux for better state management over Context.
- UI could be improved to look more like Spotify's.
- Authentication could be a next step using a database solution like Supabase, allowing for custom playlists and user data.
- Search feature should remove duplicates found in the search results.
- Changing
player.tsx
for mobile usage, as spotify web and mobile players are much different, could have a pop-up menu. - Designing the library page (although Authentication is a precursor to this).
- Better loading pages for a more involved UI experience between API fetches.