Spotify Clone

Explore the docs »

View Demo · Report Bug

Table of Contents

1. About The Project
2. Folder Tree
3. Getting Started
   • Prerequisites
   • Installation
4. Usage
5. Roadmap
6. License
7. Dependencies

About The Project

My fun project, a Spotify clone featuring CRUD operations, was created using React.js and Tailwind CSS. This project utilizes the Spotify API to retrieve and display specific data, while also use Firebase to store account progress. It represents a creative endeavor that allowed me to replicate some of Spotify's functionalities for learning and practice. By leveraging React.js and Tailwind CSS, I've developed a user interface that closely resembles Spotify's design, while utilizing the Spotify API to access relevant information.

Folder Tree

src
├───apis
│   ├───errors
│   ├───services
│   └───validations
├───assets
│   ├───datas
│   ├───fonts
│   └───images
│       ├───icon
│       └───spotify
├───components
├───configs
├───contexts
├───pages
└───utils

Getting Started

Prerequisites

Make sure you have NPM installed on your machine.

The development environment is set up using Vite.js: Vite.js template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Installation

To begin, clone this repository to your local machine.

git clone https://github.com/ricotandrio/clone-spotify.git

cd clone-spotify

Use npm to install the necessary modules.

npm install

To run the development server, create a .env file and fill it with your own Firebase authentications details and Spotify client ID.

# Firebase Environment
VITE_FB_API_KEY=
VITE_FB_AUTH_DOMAIN=
VITE_FB_PROJECT_ID=
VITE_FB_STORAGE_BUCKET=
VITE_FB_MESSAGE_SENDER_ID=
VITE_FB_APP_ID=
VITE_FB_MEASUREMENT_ID=

# Spotify Environtment
VITE_SPOTIFY_API_CLIENT_ID=
VITE_SPOTIFY_API_CLIENT_SECRET=
VITE_SPOTIFY_API_BASE_URL=https://api.spotify.com/v1
VITE_SPOTIFY_API_AUTH_URL=https://accounts.spotify.com/api/token

Then, execute the following command:

npm run dev

Roadmap

• ✅ Register, login, and logout.
• ✅ Find songs by name or artist.
• ✅ Save playlists and follow artists.
• ✅ View favorite playlists and followed artists from the sidebar.
• ✅ View favorite artists and top tracks from the profile page.
• ✅ Top Tracks and Artists Based on Listening History
• ✅ Song Playback:
  • ✅ Volume Control
  • ✅ Next and previous buttons

Usage

License

See LICENSE.txt for more information.

Dependencies

This is a list of packages or libraries used for this project.

• tailwindcss: ^3.3.3
• vite: ^4.5.2
• firebase: ^10.5.0
• prettier: ^3.2.5
• prettier-plugin-tailwindcss: ^0.5.14
• font-awesome: ^4.7.0
• prop-types: ^15.8.1
• react: ^18.2.0
• react-dom: ^18.2.0
• react-router-dom: ^6.14.2
• zod: ^3.22.5
• use-debounce: ^10.0.0