Welcome to the Musica - Next Gen Music Site, a platform where music comes alive! This app is your gateway to endless grooves, from soft ballads to party anthems. Built with cutting-edge technology, it delivers an unparalleled user experience.
- Interactive Carousel: Swipe through your favorite albums effortlessly.
- Dynamic Playlists: Automatically updates across users when songs or playlists change.
- Global Play/Pause Control: Hit the spacebar and let the music take over.
- Dark Mode 🌙: Perfectly tuned for night-time listening.
- Responsive Design: Looks stunning on all devices.
- Real-time Updates: Stay synced with live changes.
- Custom Hover Effects: Enjoy a smooth UI while interacting with the app.
- Jam To Connect with Friends: Jam feature to play same song with your friends anywhere in world.
- Framework: Next.js 14
- Database: MongoDB Atlas
- Styling: Tailwind CSS, Custom Fonts, and CSS Animations
- Real-time Sync: Supabase Edge Functions
- Jam Feature: Supabase for real time jam connection
- Image Handling: Optimized with Next.js Image Component
-
Clone the repo:
git clone https://github.com/yourusername/nextjs-music-site.git
-
Navigate to the project directory:
cd nextjs-music-site
-
Install dependencies:
npm install
-
Start the development server:
npm run dev
Access the app at
http://localhost:3000
.
- Modify CSS animations in
styles/globals.css
. - Update album details in
data/albums.js
. - Configure MongoDB connection in
config/database.js
.
- Play a Song: Click on any song to start playing.
- Switch Albums: Use the carousel to explore more.
- Toggle Dark Mode: Hit the moon icon 🌙 for a night-time vibe.
- Keyboard Controls: Spacebar for play/pause.
- All sensitive data, like API keys, is stored in environment variables.
Feel free to fork this repository and open a pull request with improvements or bug fixes. Contributions are always welcome! 💪
- Live Demo: Music Site
- Contact: Email Us
All album covers and music belong to their respective artists and are used under fair use for demonstration purposes.
Made with ❤️ and 🎧 by Sachin.