Spotify clone V2

This is a my second attempt to create spotify clone using Next.js and TailwindCSS. In first attempt with Spotify clone I build it using React.js and Custom CSS.

• Spotify Clone 1st attempt

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

Screenshot

5) Desktop-Home Page

Desktop
1) Desktop-Login page	2) Desktop-Player
3) Desktop-Playlist Page	4) Desktop-Album Page

Tablet	Mobile
1) Tablet-Login Page 2) Tablet-Home Page 3) Tablet-Playlist Page 4) Tablet-Player	1) Mobile-Login Page 2) Mobile-Home Page 3) Mobile-Playlist Page 4) Mobile-Player 5) Mobile-Album Page

Links

• Project URL

My process

1. First i did Sidebar and Header components.
2. Worked on the Login page.
3. Worked on the Home page.
4. Worked on the Playlist page.
5. Worked on the Player component.
6. Worked on the Album page.
7. Worked on the Number of cards visible based on width of page (using lodash.debounce and tailiwind breakpoints).

Built with

• Next.js
• Tailwind CSS v3
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

I learned how to SSR(server side rendering) and CSR(client side rendering) using Next.js and spotifyApi.

Useful resources

• tailwindcss.com - Tailwind CSS documentation

Author

• Website - TheSohailJafri
• Frontend Mentor - @thesohailjafri
• HackerRank - @thesohailjafri
• Twitter - @Sinja97881141