https://github.com/pranith07-coder/spotify-clone

A web application replicating core Spotify features, built with React.js and styled using Tailwind CSS. This project includes a responsive UI, music player functionality, playlist management, and a sleek, modern design inspired by Spotify's interface.
https://github.com/pranith07-coder/spotify-clone

reactjs tailwind

Last synced: 7 days ago
JSON representation

A web application replicating core Spotify features, built with React.js and styled using Tailwind CSS. This project includes a responsive UI, music player functionality, playlist management, and a sleek, modern design inspired by Spotify's interface.

• Host: GitHub
• URL: https://github.com/pranith07-coder/spotify-clone
• Owner: Pranith07-coder
• Created: 2024-10-31T17:59:43.000Z (7 days ago)
• Default Branch: main
• Last Pushed: 2024-10-31T18:30:55.000Z (7 days ago)
• Last Synced: 2024-10-31T19:26:29.929Z (7 days ago)
• Topics: reactjs, tailwind
• Language: JavaScript
• Homepage:
• Size: 10.2 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Spotify Clone 🎶

A Spotify-inspired web application built with **React.js** and styled with **Tailwind CSS**. This project simulates Spotify's core music streaming features with a sleek, modern UI and responsive design.

## Features

- 🎵 **Music Player**: Play, pause, and skip tracks.

- 📋 **Playlist Management**: Create, update, and delete playlists.

- 🔍 **Search Functionality**: Find songs, artists, and albums easily.

- 💻 **Responsive Design**: Optimized for both desktop and mobile screens.

- 🎨 **Sleek UI**: Styled with Tailwind CSS for a Spotify-like aesthetic.

## Tech Stack

- **Frontend**: React.js, Tailwind CSS, Vite

- **Backend**: (Optional) Node.js and Express for handling API requests

- **API**: Spotify API or mock data for song and playlist details

## Setup: React + Vite

This project uses **React** with **Vite**, a fast front-end tool optimized for modern web applications, which includes Hot Module Replacement (HMR) and ESLint rules for a clean coding experience. Two official plugins are available for React setup in Vite:

- **[@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md)**: Uses [Babel](https://babeljs.io/) for Fast Refresh.

- **[@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc)**: Uses [SWC](https://swc.rs/) for even faster Fast Refresh.

This minimal setup offers a streamlined development environment for efficient coding.

## Installation

1. **Clone the repository**:

   ```bash

   git clone https://github.com/Pranith07-coder/Spotify-clone.git

   ```

2. **Navigate to the project directory**:

   ```bash

   cd Spotify-clone

   ```

3. **Install dependencies**:

   ```bash

   npm install

   ```

4. **Set up environment variables**: Create a `.env` file in the root directory and add your Spotify API key if required.

   ```plaintext

   VITE_SPOTIFY_API_KEY=your_api_key

   ```

5. **Run the application**:

   ```bash

   npm run dev

   ```

## Deployment

Deployed with Vercel:

1. Push changes to the main branch.

2. Vercel will automatically build and deploy the project.

## Contributing

1. Fork the repository.

2. Create a new branch (`git checkout -b feature-branch`).

3. Commit your changes (`git commit -m 'Add feature'`).

4. Push to the branch (`git push origin feature-branch`).

5. Create a pull request.

## License

This project is licensed under the MIT License.

## Contact

For any questions or feedback, feel free to reach out via GitHub Issues.

---