Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/yoursrijit/react-spotify-clone

Spotify clone built using React, React Icons,Context Api and Tailwind CSS
https://github.com/yoursrijit/react-spotify-clone

Last synced: about 12 hours ago
JSON representation

Spotify clone built using React, React Icons,Context Api and Tailwind CSS

Awesome Lists containing this project

README

        

# Spotify Clone with React and Tailwind CSS
This project is a Spotify clone created using React.js and Tailwind CSS. It allows users to play audio songs online, browse music albums, and create playlists. The project includes various components such as a music player, album lists, song lists, navigation buttons, and seekbar functionality.

[Live Link](https://splotify-clone-srijit.netlify.app/) 😈
## Project Overview

The project aims to replicate the basic functionalities of Spotify's web application, allowing users to listen to music online. It includes the following main features:

- **Music Player:** Provides controls for playing, pausing, skipping, and seeking through songs.
- **Album Lists and Song Lists:** Displays a collection of albums and their respective songs.
- **Navigation Buttons:** Allows users to navigate between different pages and sections of the application.
- **Seekbar Functionality:** Enables users to seek through a song's timeline to jump to a specific position.

## Setup

1. **Clone the Repository:** Clone this repository to your local machine.

```bash
git clone https://github.com/yourSrijit/React-Spotify-Clone.git
```

2. **Install Dependencies:** Navigate into the project directory and install the required dependencies.

```bash
cd react-spotify-clone
npm install
```

3. **Run the Application:** Start the development server to run the application locally.

```bash
npm run dev
```

The application should now be running on `http://localhost:5174`.

---

# Preview
![Screenshot 2024-05-17 190051](https://github.com/yourSrijit/React-Spotify-Clone/assets/91645620/ab1119c2-b897-458c-a8d9-1c0b5b74b5c9)

![Screenshot 2024-05-17 190132](https://github.com/yourSrijit/React-Spotify-Clone/assets/91645620/aededcbf-ba70-424a-83d6-257b5e35c7ea)
![Screenshot 2024-05-17 190115](https://github.com/yourSrijit/React-Spotify-Clone/assets/91645620/b6d5a3ce-a484-4321-b4a7-be6a4fbfb195)

## Technologies Used

- **React.js:** A JavaScript library for building user interfaces.
- **Tailwind CSS:** A utility-first CSS framework for creating custom designs with ease.
- **React Icons** :Used for some icons like play pause ,Dynamic Volume control

## Features
- You can Play any song from anywhere you want
- Also you can move forward and backward of the song
- Currently there have 8 music files
- You can play pause any song from anywhere
- Volume Control
- We build a dynamic volume control system
- You can see the sign changes with increasing and Decreasing the volume also the mute sing will appear
-

## How to Contribute

If you'd like to contribute to this project, feel free to fork the repository and submit a pull request with your changes. Here are some ways you can contribute:

- Add more features such as user authentication, search functionality, or playlist management.
- Improve the UI/UX design for better user experience.
- Fix any bugs or issues found in the application.
- Write tests to ensure code reliability.