A web music player where you can listen & add your favorite songs to your customized playlists. This web application is a clone of Spotify so the information generated is not genuine. This application is not intended for commercial use.
Visit the website from here.
This project is inspired by this video ❤️
To test payment, use stripe's test cards or credit card 4242424242424242 for short.
- Authentication using either GitHub or email & password using NextAuth.js
- Sidebar & navbar navigation
- Create, edit, and delete playlists
- Upload images to your playlists using Cloudinary
- Upload songs to your playlists using Cloudinary
- Edit songs information (title, artist, album, and image)
- Delete songs from your playlists
- Search for songs, artists, and albums
- View your recently played songs & playlists
- Play songs, pause, skip, and go back via a global web music player using useAudioPlayer
- Premium monthly subscription using Stripe
- Saving music player state using Zustand
- Server-side & client-side validation using Zod & react-hook-form
- React.js
- Next.js 13
- TypeScript
- Zod
- Tailwind CSS
- Cloudinary
- Stripe
- Prisma
- CockroachDB
- NextAuth.js
- useAudioPlayer
- Zustand
- RippleUI
- react-hook-form
- react-toastify
- Headless UI
Clone the repo and navigate to it:
git clone https://github.com/devkarim/spotify-clone.gitcd spotify-clone
Use one of the following commands to install the packages:
npm iyarnpnpm i
These environment variables are required for the app to work:
DATABASE_URL=
SHADOW_DATABASE_URL=
NEXTAUTH_SECRET=
NEXTAUTH_URL=
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
NEXT_PUBLIC_STRIPE_PUBLIC_KEY=
STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET=
STRIPE_PREMIUM_PLAN_ID=
You can check .env.example for more information.
Use this to push and generate PrismaClient:
npx prisma db push
Use one of the following commands to start the development server:
npm run devyarn devpnpm dev
This project is made by @devkarim.
This project is licensed under the MIT License - feel free to explore, modify, and share.