Skip to content

Sachin-fsd/musica

Repository files navigation

🎵 Musica - Next Gen Music Site 🎶

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.

Home Page

Image 2 Image 1


🚀 Features

  • 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.

🎯 Tech Stack

  • 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

🌌 Screenshots

Home Page 🌟

Home Page Screenshot

Party Albums 🎉

Party Albums Screenshot

Trending Albums 💿

Soft Albums Screenshot

Hit Albums 💿

Hit Albums Screenshot

Light Mode ✨

Light Mode Screenshot


🛠 Installation

  1. Clone the repo:

    git clone https://github.com/yourusername/nextjs-music-site.git
  2. Navigate to the project directory:

    cd nextjs-music-site
  3. Install dependencies:

    npm install
  4. Start the development server:

    npm run dev

    Access the app at http://localhost:3000.


🌈 Customization

  • Modify CSS animations in styles/globals.css.
  • Update album details in data/albums.js.
  • Configure MongoDB connection in config/database.js.

🎧 Usage

  1. Play a Song: Click on any song to start playing.
  2. Switch Albums: Use the carousel to explore more.
  3. Toggle Dark Mode: Hit the moon icon 🌙 for a night-time vibe.
  4. Keyboard Controls: Spacebar for play/pause.

🛡 Security

  • All sensitive data, like API keys, is stored in environment variables.

🤝 Contributions

Feel free to fork this repository and open a pull request with improvements or bug fixes. Contributions are always welcome! 💪


🔗 Links


📢 Disclaimer

All album covers and music belong to their respective artists and are used under fair use for demonstration purposes.


🎉 Credits

Made with ❤️ and 🎧 by Sachin.

Releases

No releases published

Packages

No packages published