Step into a world where music knows no boundaries! With the power of ReactJS and Redux, "Spotify Clone" offers a seamless and immersive music streaming experience that will elevate the way you listen to your favorite tunes. Check out what's in store:

For a live demonstration, explore Spotify Clone Demo.

• Overview
• Pages
• Features
• Tech Stack
• API
• Dependencies

The Spotify Clone project provides users with a seamless music streaming experience similar to the popular Spotify platform. With a clean and intuitive interface, users can discover new music, create playlists, and enjoy their favorite tracks anywhere, anytime.

         

• Home Page: Discover a variety of Spotify-generated playlists, right at your fingertips.
• Playlists Page: Explore curated playlists with ease and discover new releases.
• Albums Page: Dive deep into your favorite albums and explore tracklists.
• Artists Page: Celebrate your favorite artists and explore their discography.
• Liked Songs Page: Curate your musical sanctuary with all your liked songs neatly organized in one place.
• Search Page: Explore endless genres: Hindi, Punjabi, Ghazals, Love, Trending, Mood, Telugu, and more!
• Search Results Page: Instantly find tracks, playlists, albums, and artists tailored to your taste with every query.

• 🎵 Song Playing: Immerse yourself in the melodies with seamless song playback. Please note that the app currently supports 30-second song previews.
• ❤️ Liking Songs: Express your musical appreciation by liking songs and curating your personal favorites library.
• ➕ Adding Songs to Playlist: Create customized playlists effortlessly, adding your favorite tracks with just a click.
• 🚫 Removing Liked Songs: Fine-tune your liked songs library by removing songs that no longer resonate with you.
• 🌈 Endless Possibilities: From chart-topping hits to hidden gems, uncover the music that moves you like never before.
• 🔊 Volume Controls: Adjust the volume to your liking for the perfect listening experience.
• 🔒 Authentication: Implemented a seamless sign-in process to verify user identities and ensure a secure experience for all. Say hello to hassle-free access to your favorite tunes! (Please note: As the app is in development, authentication with Spotify API is currently restricted to project owner permissions.)
• 🔑 Authorization: Grant users various scopes and permissions, empowering them to tailor their music journey .
• 🎨 Customized Background Colors: Customized background colors generated from the cover image, enhancing the visual experience and creating a unique atmosphere for your music exploration journey
• 👻 Skeleton Screens: Enjoy lightning-fast loading times and a smooth user experience with skeleton screens that seamlessly fill content areas while data loads in the background.

• Frontend: ReactJS
• Styling: CSS modules
• Icons: MUI Icons
• Navigation: React Router
• State Management: Redux Toolkit
• Data Fetching: Spotify Web API
• Hosting: Firebase

This project fetches data from Spotify Web API. To set up the necessary API key, follow these steps:

1. Create a .env file in the root of your project.
2. Add the following line to the .env file:

   REACT_APP_CLIENT_ID = your_spotify_api_key_here
   REACT_APP_CLIENT_SECRET = your_spotify_secret_here

   Replace your_spotify_api_key_here and your_spotify_secret_here with your actual Spotify API key.

• React
• MUI Icons
• React Router
• Redux Toolkit
• Spotify Web Api
• Firebase

For a complete list of dependencies, refer to the package.json file.