FullStack Respotify 🎼🎹

🔆 The website to play a music 🎵
🌊 Respotify with Nextjs 14, Authjs, Server actions, TailwindCSS, NeonDB(PostgreSQL), Drizzle, Stripe.

✨ Demo

Preview 1	Preview 2
Preview 3	Preview 4

Features

• 🛠️ Built in Next.js 14
• 💻 Uses server actions
• 🔑 Authentication using Auth.js
• 💿 CRUD operations for songs, playlists, and photos. Functions include listening, replaying, and shuffling music playlists
• 🌜 Dark/Light mode
• 🌅 Lazy loading images and component mounting on scroll
• 🛒 Spotify Premium purchase via Stripe
• 🖥️ Applies Drizzle for type ORM
• 🌟 Clean, modern UI using shadcn-ui
• ✉️ Login/Register with Credentials, Google or GitHub
• ⌨️ 100% written in TypeScript
• 🎁 ...much more

Cloning the repository

git clone https://github.com/sonwjnn/respotify.git

Install

bun install

Setup .env file

DATABASE_URL=
NEXT_PUBLIC_APP_URL=
NEXT_PUBLIC_VERCEL_URL=

GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=

GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

UPLOADTHING_SECRET=
UPLOADTHING_APP_ID=

AUTH_SECRET=

NEXT_PUBLIC_UNSPLASH_ACCESS_KEY=
NEXT_PUBLIC_UNSPLASH_SECRET_KEY=
NEXT_PUBLIC_UNSPLASH_CLIENT_ID=

STRIPE_WEBHOOK_SECRET=
STRIPE_API_KEY=

Usage

bun dev

Author

👤 Hoang Son

• Github: @sonwjnn

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page. You can also take a look at the contributing guide.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2024 Hoang Son.
This project is MIT licensed.