A feature-rich Spotify clone built with Next.js, Supabase, and TypeScript. This application allows users to browse, play, and upload songs, manage their playlists, and enjoy a modern music streaming experience.
- 🎵 Music Playback: Play songs directly in the browser with seamless audio streaming.
- 📚 Music Library: Browse and manage a collection of songs.
- 🔍 Search: Search for songs by title, artist, or genre.
- 💾 Upload Songs: Authenticated users can upload their own songs.
- 🔒 User Authentication: Secure authentication with Supabase.
- 🎨 Responsive UI: Beautiful and responsive design using Tailwind CSS.
- 📊 Subscription Management: Manage user subscriptions using Stripe.
The Spotify clone leverages a variety of modern technologies to deliver a seamless music streaming experience. Below is a detailed list of the key technologies and tools used in this project:
- Next.js: A React framework for server-side rendering and static site generation. It provides a powerful routing system, optimized performance, and developer-friendly features.
- Supabase: An open-source Firebase alternative that provides a complete backend solution, including a PostgreSQL database, real-time subscriptions, user authentication, and file storage.
- React: A JavaScript library for building user interfaces. React's component-based architecture and hooks make it easy to build reusable UI components and manage state effectively.
- Tailwind CSS: A utility-first CSS framework that allows you to build custom designs directly in your markup. It provides a highly customizable and responsive design system.
- Zustand: A small, fast, and scalable state management solution for React. Zustand is used for managing global states, such as the visibility of modals in the application.
- React Hot Toast: A lightweight and customizable toast notification library for React. It provides easy-to-use APIs for showing success, error, and informational messages.
- Stripe: A powerful and secure payment processing platform. Stripe is integrated to manage subscriptions and handle payments securely.
- React Icons: A collection of popular icons as React components. This library is used to add scalable vector icons to the application for better UI/UX.
Each of these technologies has been carefully chosen to provide a robust, scalable, and maintainable codebase, allowing for a rich feature set and a smooth user experience.
Before you begin, ensure you have the following installed:
-
Clone the repository:
git clone https://github.com/yourusername/spotify-clone.git cd spotify-clone -
Install the dependencies:
npm install
# or
yarn install
- Environment Variables
Create a .env.local file in the root directory and add your environment variables:
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
NEXT_PUBLIC_STRIPE_PUBLIC_KEY=your-stripe-public-key
STRIPE_SECRET_KEY=your-stripe-secret-key
Replace the placeholders with your actual Supabase and Stripe credentials.
- Running Locally
Start the development server:
npm run dev
# or
yarn dev
Open http://localhost:3000 in your browser to see the application.