Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- Host: GitHub
- URL: https://github.com/yoursrijit/react-spotify-clone
- Owner: yourSrijit
- Created: 2024-05-17T05:42:54.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-05-17T13:33:34.000Z (6 months ago)
- Last Synced: 2024-05-17T14:37:39.678Z (6 months ago)
- Language: JavaScript
- Size: 38.5 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
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 OverviewThe 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.