https://github.com/nayak-nirmalya/spotify-clone
Full Stack Spotify Clone with Next.js 13.4 App Router: React, Tailwind, Supabase, PostgreSQL, Stripe & TypeScript.
https://github.com/nayak-nirmalya/spotify-clone
nextjs13 postgresql reactjs stripe supabase tailwindcss typescript
Last synced: 7 months ago
JSON representation
Full Stack Spotify Clone with Next.js 13.4 App Router: React, Tailwind, Supabase, PostgreSQL, Stripe & TypeScript.
- Host: GitHub
- URL: https://github.com/nayak-nirmalya/spotify-clone
- Owner: nayak-nirmalya
- License: mit
- Created: 2023-05-30T02:31:11.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-06-03T05:49:31.000Z (over 2 years ago)
- Last Synced: 2025-01-22T12:12:00.111Z (9 months ago)
- Topics: nextjs13, postgresql, reactjs, stripe, supabase, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://spotify-clone-kappa-eight.vercel.app
- Size: 302 KB
- Stars: 0
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Full Stack Spotify Clone with Next.js 13.4 App Router: React, Tailwind, Supabase, PostgreSQL, Stripe & TypeScript
Tutorial Followed: [Code With Antonio - Full Stack Spotify Clone](https://youtu.be/2aeMRB8LL4o)
Instructor: [Antonio Erdeljac](https://github.com/antonioerdeljac)
Key Features:
- Song upload
- Stripe integration
- Tailwind design for sleek UI
- Tailwind animations and transition effects
- Full responsiveness for all devices
- Credential authentication with Supabase
- Github authentication integration
- File and image upload using Supabase storage
- Client form validation and handling using react-hook-form
- Server error handling with react-toast
- Play song audio
- Favorites system
- Playlists / Liked songs system
- Advanced Player component
- Stripe recurring payment integration
- POST, GET, and DELETE routes in route handlers (app/api)
- Fetch data in server React components by directly accessing the database
- Handling relations between Server and Child components in a real-time environment
- Cancelling Stripe subscriptions
### Prerequisites
**Node version 14.x**
### Cloning the repository
```shell
git clone https://github.com/nayak-nirmalya/spotify-clone.git
```
### Install packages
```shell
npm i
```
### Setup .env File
```js
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET=
```
### Add SQL Tables
Use `database.sql` file to create songs and liked_songs table in Supabase.
### Start the App
```shell
npm run dev
```
## Available commands
Running commands with npm `npm run [command]`
| command | description |
| :-------------- | :-------------------------------------------------- |
| `dev` | Starts a development instance of the app |
| `build` | Starts a building final version for production |
| `start` | Run final production build version |
| `lint` | Run lint check as configured in .eslintrc.json file |
| `gen:dbtypes` | Generate Types for Databases |
| `stripe:login` | Login to Stripe from stripe-cli |
| `stripe:listen` | Listen to Webhooks for Stripe Events |