https://github.com/pedroestevaodev/spotify-clone
This is a full-featured Spotify clone built with a modern full-stack tech stack. It provides a complete music streaming experience with music upload, user authentication, playlist management, and subscription payments via Stripe.
https://github.com/pedroestevaodev/spotify-clone
authentication full-stack music-streaming nextjs postgresql react spotify spotify-clone stripe supabase supabase-auth tailwindcss typescript
Last synced: 21 days ago
JSON representation
This is a full-featured Spotify clone built with a modern full-stack tech stack. It provides a complete music streaming experience with music upload, user authentication, playlist management, and subscription payments via Stripe.
- Host: GitHub
- URL: https://github.com/pedroestevaodev/spotify-clone
- Owner: pedroestevaodev
- License: mit
- Created: 2024-05-02T14:22:28.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-08-21T14:40:42.000Z (about 2 months ago)
- Last Synced: 2025-08-21T15:48:59.323Z (about 2 months ago)
- Topics: authentication, full-stack, music-streaming, nextjs, postgresql, react, spotify, spotify-clone, stripe, supabase, supabase-auth, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://spotify-clone-pedroestevao.vercel.app
- Size: 126 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Spotify Clone - Full Stack Music Streaming App
A full-featured **Spotify Clone** built with the latest **Next.js App Router**, fully responsive and integrated with **Supabase**, **Stripe**, and **PostgreSQL**. This project reproduces key features of the real [**Spotify**](https://open.spotify.com/) app, including audio streaming, authentication, playlists, payments, and more. All with a modern UI powered by **Tailwind CSS**.
## About the Project
This application is the result of a comprehensive full stack tutorial that guides developers through the process of creating a **production-ready music streaming service**.
You’ll find implementations for:
- User authentication (via email/password and GitHub)
- Audio playback with a custom player
- File uploads (images and songs)
- Playlists and liked songs
- Premium subscription via Stripe
- Protected routes and access control
- Data fetching via server components
> **Disclaimer**: This is a **learning project** and not intended for commercial use. Spotify™ is a trademark of Spotify AB.
## Tech Stack
The project was built using the following technologies and tools:
- [Next.js (App Router)](https://nextjs.org/) - React framework for web applications.
- [React](https://react.dev/) - JavaScript library for building user interfaces.
- [TypeScript](https://www.typescriptlang.org/) - JavaScript superset for static typing.
- [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework for fast and customizable design.
- [Supabase](https://supabase.com/) (auth, storage, PostgreSQL)
- [Stripe](https://stripe.com/) (subscriptions and payments)
- [PostgreSQL](https://www.postgresql.org/)
- [Zustand](https://github.com/pmndrs/zustand) (state management)
- [React Hook Form](https://react-hook-form.com/) (form handling)
- [React Toast](https://react-hot-toast.com/) (notifications)
## Features
- **Play Songs**: Stream music directly in-app
- **Advanced Audio Player**: Responsive and persistent across pages
- **Upload Songs & Images**: Via Supabase Storage
- **Authentication**: Email/password and GitHub login
- **Database**: Full CRUD with Supabase (PostgreSQL)
- **Liked Songs System**
- **Playlists Creation**
- **Stripe Integration**: Premium subscription with recurring payments
- **Protected Routes**
- **Client-side and server-side validations**
- **Responsive UI with transitions and animations**
- **Server Components with direct DB queries (no API routes needed)**
## Setup & Installation
### 1. Clone the repository
```bash
git clone https://github.com/pedroestevaodev/spotify-clone.git
cd spotify-clone
```
### 2. Install dependencies
```bash
$ npm install
```
### 3. Environment Variables
Create a `.env.local` file in the root and configure the following variables:
```bash
NEXT_PUBLIC_SUPABASE_URL="tobemodified"
NEXT_PUBLIC_SUPABASE_ANON_KEY="tobemodified"
SUPABASE_SERVICE_ROLE_KEY="tobemodified"
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="tobemodified"
STRIPE_SECRET_KEY="tobemodified"
STRIPE_WEBHOOK_SECRET="tobemodified"
```
> You need to set up storage buckets in Supabase (for music and images) and activate Stripe with your plans/subscriptions.
### 4. Start the development server
```bash
$ npm run dev
```
Open your browser and visit `http://localhost:3000` to see the project in action.
You can start editing the homepage by modifying the `app/layout.tsx` file. The browser will automatically update as you make changes to the code.
## Available Commands
Here are the main commands available for the project:
| Command | Description |
| ---------------- | ----------------------------- |
| `dev` | Starts the development server |
| `build` | Builds the app for production |
| `start` | Runs the built app |
| `lint` | Lints the code using ESLint |
## Resources
To learn more about the technologies used in this project, check out the following resources:
- [Next.js Docs](https://nextjs.org/docs) - Learn more about Next.js features and APIs.
- [Next.js Learn](https://nextjs.org/learn) - Interactive tutorial to learn Next.js.
- [React Docs](https://pt-br.react.dev/learn) - Access the official React guide.
- [Tailwind CSS Docs](https://tailwindcss.com/docs) - Learn how to use Tailwind CSS to style your application.
- [Supabase Docs](https://supabase.com/docs) - Learn how to get up and running with Supabase through tutorials, APIs and platform resources.
## Deploy
The easiest way to deploy your Next.js application is by using the [Vercel Platform](https://vercel.com/new), created by the developers of Next.js.
Check out the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
> Make sure to set the environment variables in Vercel > Settings > Environment Variables.
## License
This project is open source and available under the [MIT License](https://mit-license.org/).
---
**Built with ☕ by [Pedro Estevão](https://www.pedroestevao.com)**