https://github.com/shivang1305/spotify
Spotify clone project using next.js, react.js for components, tailwind css for styling, postgres and supabase for db and stripe to handle payments.
https://github.com/shivang1305/spotify
nextjs14 oauth2 postgresql reactjs redux-toolkit stripe supabase tailwindcss zustand
Last synced: 3 months ago
JSON representation
Spotify clone project using next.js, react.js for components, tailwind css for styling, postgres and supabase for db and stripe to handle payments.
- Host: GitHub
- URL: https://github.com/shivang1305/spotify
- Owner: shivang1305
- Created: 2024-09-13T06:08:58.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-18T07:49:22.000Z (over 1 year ago)
- Last Synced: 2025-07-03T18:10:51.588Z (12 months ago)
- Topics: nextjs14, oauth2, postgresql, reactjs, redux-toolkit, stripe, supabase, tailwindcss, zustand
- Language: TypeScript
- Homepage: https://spotify-phi-lovat.vercel.app
- Size: 9.9 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Spotify 🎵
A full-stack Spotify Clone built with **Next.js**, **TypeScript**, and **Supabase**, offering features like song uploads, favorites, subscription management, and a fully functional music player.
[**Live Demo**](https://spotify-7s64j14zf-shivang1305s-projects.vercel.app/)
---
## Features 🚀
### **1. Authentication**
- User authentication is powered by **Supabase**.
- Users can register and log in to access personalized features like song uploads and favorites.
### **2. Songs Upload**
- Users can upload their own songs.
- Songs are stored in **Supabase Realtime Database**.
### **3. Songs Fetching List**
- Dynamically fetch and display all uploaded songs.
- Responsive and user-friendly design with **Tailwind CSS**.
### **4. Favorite Songs**
- Add and remove songs from the favorites list.
- Favorites are stored in the user's profile in **Supabase**.
### **5. Payment Gateway Integration**
- Integrated with **Stripe** for managing subscriptions.
- Users can subscribe to premium features.
### **6. Subscription Functionality**
- Premium subscribers unlock exclusive features.
- Subscription status is stored and validated through **Stripe**.
### **7. Complete Player Functionality**
- Full music player with **play**, **pause**, and **seek** functionality.
- Responsive and intuitive player controls.
---
## Tech Stack 🛠️
- **Frontend**: [Next.js](https://nextjs.org/), [TypeScript](https://www.typescriptlang.org/), [Tailwind CSS](https://tailwindcss.com/)
- **Backend**: [Supabase](https://supabase.com/), [Stripe](https://stripe.com/)
- **Database**: Supabase Realtime Database
- **Authentication**: Supabase Auth
- **Deployment**: Vercel
---
## Local Setup 🖥️
Follow these steps to set up the project locally:
### **1. Clone the Repository**
```bash
git clone https://github.com/shivang1305/spotify.git
cd spotify
```
### **2. Install Dependencies**
```bash
npm install
```
### **3. Environment Variables**
Create a .env.local file in the root of the project and add the following variables:
```bash
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
STRIPE_SECRET_KEY=your_stripe_secret_key
NEXT_PUBLIC_STRIPE_PUBLIC_KEY=your_stripe_public_key
NEXT_PUBLIC_SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key
```
### **4. Run the Development Server**
```bash
npm run dev
```
Visit http://localhost:3000 to view the app in development mode.
## Deployments 🚀
The application has been deployed and is live! You can check it out here:
[Spotify Live](https://spotify-7s64j14zf-shivang1305s-projects.vercel.app/)
---
## Screenshots 📸
### **Authentication Page**
#### Register Page
#### Login Page
### **Homepage**
### **Liked Songs**
### **Search Songs**
### **Upload Songs**
### **Profile Page**
### **Player Functionality**
### **Subscriptions Page**
---
## Acknowledgements 🙏
This project wouldn’t have been possible without the following:
- **Supabase**: For seamless authentication and real-time database management.
- **Stripe**: For integrating payment gateway and subscription functionality.
- **Tailwind CSS**: For providing utility-first CSS for designing a modern UI.
- **Next.js**: For enabling server-side rendering and optimized frontend/backend integration.