Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/zeyu-chen/spotify-clone

A modern full-stack Spotify clone that allows users to upload, stream, and manage music with premium subscription features.
https://github.com/zeyu-chen/spotify-clone

nextjs stripe supabase tailwind-css typescript

Last synced: 26 days ago
JSON representation

A modern full-stack Spotify clone that allows users to upload, stream, and manage music with premium subscription features.

Host: GitHub
URL: https://github.com/zeyu-chen/spotify-clone
Owner: Zeyu-Chen
Created: 2024-05-01T15:29:15.000Z (8 months ago)
Default Branch: main
Last Pushed: 2024-11-08T14:00:57.000Z (about 2 months ago)
Last Synced: 2024-11-08T14:19:39.634Z (about 2 months ago)
Topics: nextjs, stripe, supabase, tailwind-css, typescript
Language: TypeScript
Homepage: https://spotify-clone-fstack.vercel.app/
Size: 649 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Spotify Clone

![Next.js](https://img.shields.io/badge/Next.js-13-000000?logo=next.js&logoColor=white)
![React](https://img.shields.io/badge/React-18-61DAFB?logo=react&logoColor=black)
![TypeScript](https://img.shields.io/badge/TypeScript-5-3178C6?logo=typescript&logoColor=white)
![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-3-06B6D4?logo=tailwind-css&logoColor=white)
![Supabase](https://img.shields.io/badge/Supabase-2-3ECF8E?logo=supabase&logoColor=white)
![Stripe](https://img.shields.io/badge/Stripe-12-008CDD?logo=stripe&logoColor=white)

A modern full-stack Spotify clone that allows users to upload, stream, and manage music with premium subscription features.

## Features

- 🎵 Song Upload - Upload and manage your music library
- 💳 Premium Subscription - Stripe integration for premium features
- 🎧 Audio Player - Full-featured music player with controls
- 💖 Favorites System - Like and save your favorite songs
- 📱 Responsive Design - Works seamlessly across devices
- 🔐 Authentication - Secure login with credentials or GitHub
- 📂 File Management - Upload and store songs and images
- 📝 Playlist Creation - Create and manage playlists

## Tech Stack

- **Framework:** Next.js 13
- **Styling:** Tailwind CSS
- **Database:** Supabase
- **Authentication:** Supabase Auth
- **Payment:** Stripe
- **State Management:** Zustand
- **UI Components:** Radix UI
- **Audio Playback:** use-sound
- **Form Handling:** react-hook-form

## Getting Started

### Prerequisites

- Node.js 14+
- npm/yarn
- Supabase account
- Stripe account

### Installation

1. Clone the repository

```
git clone [email protected]:Zeyu-Chen/Spotify-Clone.git
cd spotify-clone
```

2. Install dependencies

```
npm install
```

3. Set up environment variables

```
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_key
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_key
STRIPE_SECRET_KEY=your_stripe_secret
STRIPE_WEBHOOK_SECRET=your_webhook_secret
```

4. Start the development server

```
npm run dev
```

5. Start Stripe webhook listener (optional)

```
npm run stripe:listen
```

## Project Structure

```
spotify-clone/
├── app/ # Next.js app directory
├── components/ # Reusable components
├── hooks/ # Custom React hooks
├── libs/ # Utility functions
├── providers/ # Context providers
├── public/ # Static assets
└── types/ # TypeScript type definitions
```

## Database Schema

The application uses Supabase with the following main tables:
- songs
- liked_songs
- users
- subscriptions
- products
- prices

## API Routes

- `/api/webhooks` - Stripe webhook handler
- `/api/create-checkout-session` - Create payment session
- `/api/create-portal-link` - Create customer portal