Projects - Full-stack music streaming with real billing
A full Spotify-style music app built end to end: a responsive player, a Postgres catalog on Supabase, and real subscription billing through Stripe Checkout. Auth, data, and payments in one project.
- Web Project
- Spotify Clone
- Year
- Use Case
- Music Player
Revolutionary Full Stack Spotify Clone
Architected using Next.js, React, Tailwind CSS, Supabase, PostgreSQL, and Stripe for an immersive music listening experience.
Experience enhanced features such as Song Upload, Stripe Integration, Database Handling, Sleek UI, Responsiveness, Secure Authentication, File/Image Upload, Form Validation, Error Handling, Audio Playback, Favorites System, Playlists/Liked Songs System, and more.
Efficient data fetching in server React components by directly accessing the database.
Overview
Built with Next.js and React, the application ensures a seamless, single-page experience. It features a sleek and responsive interface, crafted using Tailwind CSS, to emulate the acclaimed UI of Spotify. The interface is fully responsive, providing compatibility across all devices.
For authentication, the application utilizes Supabase, a modern alternative to Firebase. Supabase enables secure user registration and login processes, including OAuth via GitHub. Additionally, it offers powerful database management capabilities, allowing the creation of schemas and data manipulation using PostgreSQL.
The application also integrates with Stripe, enabling premium subscriptions within the platform. It handles recurring payments, subscription management, and service cancellations efficiently.
Key features include efficient song upload management, creation and management of playlists, favoriting songs, and an interactive music player. Supabase storage supports file and image uploads, while react-hook-form and react-toast handle form validation and error handling.
Data fetching in server React components directly accesses the database, eliminating the need for an API. The project also demonstrates route handling for POST, GET, and DELETE requests, and manages relations between Server and Child components in real-time environments.
Technologies Used
- Stripe Checkout
- Supabase
- React.js
- Next.js
- Tailwind CSS
- PostgreSQL
- React Hook Form
- React Toast