Full Stack Musictify App with Next.js 13.4, React 18, Supabase(PostgreSQL), Stripe, Sass

API Deploy:

https://musictify-app.vercel.app/

---

🎯 Objective

Recreate Full Stack Spotify Clone with Next.js 13.4 new App Router, React 18.2, TypeScript, Sass, Supabase(PostgreSQL), Stripe.

---

🗝 Features

• Song upload
• File and image upload using Supabase storage
• Stripe integration
• Full responsive for all devices
• State management with zustand
• Credential authentication with Supabase
• Github authentication integration
• Client form validation and handling using react-hook-form
• Server error handling with react-toast
• Play song audio
• Favorites system
• Liked songs system
• Advanced Player component
• Stripe recurring payment integration
• 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

---

🚀 Getting started

Prerequisites:

• Node version 14.x

If you want to run the site locally, you can:

1. Clone the project.

git clone https://github.com/Johndev85/musictify-app.git

2. Go to project's folder

cd musictify-app

3. Install packages

npm i

4. Start the app

npm run dev

---

🔌 API - Descripcion

API Routes Next.js, in route handlers (app/api)

• https://nextjs.org/docs/pages/building-your-application/routing/api-routes

Supabase Firebase alternative

• Postgres database

• Authentication

• Storage

• Realtime subscriptions

• https://supabase.com/

Stripe for Subscriptions products

• Recurring payment integration

• Use Stripe Testing Cards

• https://stripe.com/

Using Stripe Test Cards

• https://stripe.com/docs/testing?testing-method=card-numbers#cards

---

🛠 Deployment

• Deploy: Vercel

---

🧾 License

• The MIT License (MIT)

---

➕ Contributing

• If you want to contribute with this project, just make a Pull Request explaining the improving ✨.

---

💻 Technologies:

• Typescript (JavaScript)
• React
• Next.js
• Sass - CSS3
• HTML5
• Supabase
• Stripe
• zustand (Store)
• Radix-UI