Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/meharsulaiman/spotify-clone
https://github.com/meharsulaiman/spotify-clone
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/meharsulaiman/spotify-clone
- Owner: meharsulaiman
- Created: 2024-01-09T05:55:36.000Z (almost 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-12T11:54:51.000Z (12 months ago)
- Last Synced: 2024-02-20T17:37:22.270Z (11 months ago)
- Language: TypeScript
- Size: 8.77 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
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
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/meharsuleiman/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, 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 |