Building A Spotify Clone With React & TailwindCSS - Part 1

Hey there! 👋

Building projects is one of the best ways to learn, but it can sometimes be difficult to find something interesting and motivating to do. It’s easy when learning to code to get locked in the tutorial hell, watching hours of video tutorials and courses or reading tons of books without actually putting anything into practice.

When it comes to frontend web development, there are a number of great platforms to help project-based learning like Frontend Mentor that provides professional designs that you can integrate in any technology you wish, submit and get feedbacks.

Another common way of getting your hands dirty is to build clone apps.

Reproducing a well-crafted application (or part of it) is a great way to face real-world coding challenges and to develop nice professional-looking UIs that will enlight your portfolio.

This article is the first of a series where I will build a clone of the Spotify Web Player using React and TailwindCSS 🚀.

Project Scope

It’s important in the beginning of the project to define precisely which part of the original application i’m interested in copying. Am I doing a fully functional clone ? If not, what are the exact features that i’m going to develop ?

I didn’t do that, but it would certainly be a great exercise to also estimate the development time for each feature as well as a global dev time for the complete task.

For this project, I settled on the following features:

Login page (non functional)

Home page

• A guest version for non-logged-in users

• A version for logged-in users

Navbar & Menu

Sidebar & Menu

Resizable sidebar containing:

• Home link
• Functional global searchbar
• User library content with search, sorting, filtering

Collection page

A page to view a media collection (Albums, playlists, mixes, etc…)

Artist page

Search page

Player (non-functional)

Where to get the data

Another important aspect of a clone project like this is the data that is going to be used. As you can see in the scope, my primary goal with this project is to practice my frontend development skills with React, and I’m not very interested in the backend part. Building a backend for a multimedia application like Spotify is clearly out of the scope of my learning goals (for now👀). However, I still somehow need data to display in my application.

The solution? API.

Spotify exposes a Web API that allows developers to build applications using data from their streaming services. This is exactly what I need!

Tech Stack

• Vite
• React with react-router.
• TailwindCSS with postcss and autoprefixer for styling.
• react-fontawesome for icons.

Project Setup

Create a new react project with vite and npm

npm create vite@latest react-spotify-clone -- --template react

Install and initialize TailwindCSS, postcss and autoprefixer

npm install -D tailwindcss postcss autoprefixer

Install react-router

npm install react-router-dom localforage match-sorter sort-by

Install react-fontawesome

npm i --save @fortawesome/react-fontawesome@latest
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

This is how the base project structure looks like:

When I’m writing this article, the project is still in development. You can checkout the current state of development here. You can also check out the code here.

Thanks for reading and see you next time ! 🚀