https://github.com/paschal533/next-spotify-clone
https://github.com/paschal533/next-spotify-clone
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/paschal533/next-spotify-clone
- Owner: paschal533
- License: mit
- Created: 2023-06-12T21:14:37.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-13T22:31:41.000Z (almost 3 years ago)
- Last Synced: 2025-02-08T06:15:18.827Z (over 1 year ago)
- Language: TypeScript
- Size: 8.79 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- 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
For DEMO, use [Stripe Testing Cards](https://stripe.com/docs/testing)
This is a repository for a Full Stack Spotify Clone with Next.js 13.4 App Router: React, Tailwind, Supabase, PostgreSQL, Stripe
[VIDEO TUTORIAL](https://youtu.be/2aeMRB8LL4o)
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
- How to write POST, GET, and DELETE routes in route handlers (app/api)
- How to fetch data in server React components by directly accessing the database (WITHOUT API! like Magic!)
- 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/AntonioErdeljac/next13-spotify.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, create songs and liked_songs table (there is a video tutorial)
### 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 |