Welcome to GrooveIt, a cutting-edge music application built with ReactJs and Firebase that seamlessly integrates with the Deezer music API to bring you an immersive music experience. GrooveIt not only provides a vast library of songs but also enhances your music journey with a user-friendly interface and a range of features to keep you in control.
GrooveIt is a music app designed to enhance your listening experience. With a clean and intuitive user interface, users can easily sign in, discover, and enjoy their favorite tunes. The app leverages the power of ReactJs for a dynamic frontend and Firebase for a scalable and reliable backend.
GrooveIt provides a seamless music listening experience with features such as user authentication, song playback controls, search functionality, playlist creation, and a customizable theme switcher.
-
User Authentication:
- Sign in, sign up, and password reset functionalities.
-
Playback Controls:
- Play, pause, skip, and loop songs with ease.
-
Volume Control:
- Adjust volume, mute/unmute while enjoying your music.
-
Search Functionality:
- Search for songs by song name, artist name, or album name.
-
Like Songs:
- Like your favorite songs to build a personalized collection.
-
Playlist Creation:
- Create and manage playlists tailored to your taste.
-
Song Details:
- Explore song details, including cover image, singer, and album information.
-
Persistent Music Player:
- A music player component accessible across all pages, allowing uninterrupted music playback.
-
Cross-Page Playback:
- Keep the music playing while navigating through different sections of the app.
-
Theme Switcher:
- Fully customizable theme switcher to personalize your visual experience.
Check out the live demo of GrooveIt here.
-
Frontend:
- ReactJs
- Vite
- React Query
- TailwindCSS
-
Backend:
- Firebase (Authentication, Firestore, Storage)
-
API Integration:
- Deezer Music API
To run GrooveIt locally, follow these steps:
-
Clone the repository:
git clone https://github.com/adaorachi/groove-it.git cd groove-it -
Install dependencies:
npm install
-
Start the server:
npm run dev
-
Create a new .env file and add the necessary firebase configurations. Firebase setup will be covered in the next step. We also created and hosted a CORS server on render.com in order to pull data from the deezer music API. Here is the github repo for the CORS server
VITE_PUBLIC_FIREBASE_API_KEY={apiKey} VITE_PUBLIC_FIREBASE_AUTH_DOMAIN={authDomain} VITE_PUBLIC_FIREBASE_PROJECT_ID={projectId} VITE_PUBLIC_FIREBASE_STORAGE_BUCKET={storageBucket} VITE_PUBLIC_CORS_URL=https://cors-redirect-service.onrender.com VITE_PUBLIC_DEEZER_API_URL=https://api.deezer.com VITE_PUBLIC_AUTH_RESET_PASS_ACTION_URL=http://localhost:5173/login
- Create a Firebase project here.
- Obtain your Firebase configuration details.
- Enable Authentication, Firestore, and Storage services.
- Deploy the firestore security rules/indexes and storage security rules if you are on a paid plan OR copy and paste them if you are not on a paid plan.
- Locate the above rules/indexes in the following files
- firestore security rules - firestore.rules
- firestore indexes - firestore.indexes
- storage security rules - storage.rules
- Customize password reset custom action URL from your firebase authentication dashboard. Go to Authentication, click on Templates menu, select Password reset tab and click on "Customize action URL" link. Add {domainURL}/verify-reset-password, eg - http://localhost:5173/verify-reset-password
-
Question: Should you have any questions, comments, or suggestions, kindly email us at annychuks07@gmail.com
-
Issues: Found a bug or have a feature request? Open an issue here.
-
License: This project is licensed under the MIT License.
Feel the rhythm, dive into the melodies, and let GrooveIt elevate your music experience! 🎶