College Music Web Application

Listen, Love, and Buy - Your Melodies, Your Way! Listen to the songs composed by our talent students Loved it, right? Add to Fav or Cart Shop with React!! Unleash Melodic Magic

Comment

Inspiration

In my college, I noticed the incredible talent of my fellow music club students who created their own compositions. However, their work often went unnoticed and lacked appreciation due to a lack of exposure. I felt this songs needed attention and appreciation, this inspired me to build a React project that allows users to buy songs online after a 15-second preview. Integrating Razorpay for payments and Firebase for secure backend functionalities ensured a user-friendly and safe platform for aspiring musicians to showcase their talent and gain recognition. github link deployed link detailed explanation link

What it does

The project allows users to buy songs online after listening to a 15-second preview. It leverages the power of React to create a smooth and interactive user experience. Users can browse through various compositions created by aspiring musicians from a college music club in Daily releasing album. Upon finding a song of interest, they can listen to a 15-second preview to get a glimpse of the composition. If they like the preview and wish to hear the full song, they have the option to purchase it with Razorpay.

How we built it

We built the project by ideating and planning the concept. Our technology stack included:

Frontend We utilized React for its robustness and ability to create dynamic user interfaces, enabling a smooth and interactive user experience. We built Single Page Applications kind of web applications that load a single HTML page and dynamically update the content as the user interacts with the application, without requiring a full page reload. To enhance the appearance and functionality of our application, we integrated Material UI, which provides a comprehensive set of pre-designed components that seamlessly integrate with React, allowing developers to build modern and attractive web applications efficiently.

Backend For handling backend functionalities, we opted for Firebase, which, when combined with React, forms a powerful duo for seamless web app development. We leveraged the robustness of React for interactive user interfaces and utilized Firebase's backend services, such as authentication, real-time database, cloud functions, and hosting capabilities. This combination provided us with a smooth and efficient development experience.

Payment Integration To ensure secure and hassle-free online song purchases, we integrated Razorpay as the payment gateway solution. With this integration, users can make seamless transactions within our React web application.

Challenges we ran into

  1. Authentication with Phone Number Implementing authentication with phone numbers was a challenging task, especially when the native support for phone number authentication by Firebase was limited in test mode. We explored alternative authentication methods but eventually integrated with Firebase due to its robustness and reliability.

  2. Web App Hosting Deploying the web app on Firebase Hosting led to unexpected issues. However, we successfully resolved potential conflicts and properly configured the hosting settings. As a result, the web app now works seamlessly in the production environment.

  3. Razorpay API + Cloud Functions Integrating the Razorpay API with cloud functions presented its own set of challenges, particularly in protecting sensitive environment variables. To address this, we implemented robust security measures to prevent unauthorized access to critical information.

4.App Structure and Scalability Our app boasts a well-structured and scalable design. To manage the growing complexity of the project over time, we have maintained clean code and adhered to best practices. This approach ensures easy maintenance and scalability of our app.

Accomplishments that we're proud of

Smooth User Experience: Users experiences fast and responsive interfaces, and achieving this in a React project is commendable. Works well on different devices and screen sizes

Firebase Integration: Utilizing Firebase for all our backend functionalities, demonstrates my ability to work with a variety of technologies and services. Scalable Architecture as firebase is a part of GCP as we can easily increase the infrastructure, implemented with consideration for potential growth and increased user traffic.

User Authentication and Secure Payment Integration with Razorpay: Implementing user authentication securely is vital for any application dealing with payments and personal data. Successfully implementing this functionality is a major accomplishment.

Code Quality and Maintainability: clean and well-structured code, adhering to best practices, and followed coding standards making it easier to maintain and build upon in the future.

What we learned

  1. Gained a deeper understanding of React and its ecosystem, including components, state management, hooks, and other essential concepts in React.

  2. Integrating a payment gateway like Razorpay involved learning how to handle financial transactions securely, handle callbacks, and manage payment-related errors.

  3. By utilizing Firebase for authentication, database storage, cloud functions, and hosting, gained valuable experience with Firebase's features and capabilities.

  4. Deployment and Hosting: Successfully deployed React application in firebase, link

  5. API Integration, Version Controling link , followed best practices, code standards, Error Handling and Debugging

What's next for College Music Web Application

  1. Removing all the manual work like uploading songs to firebase, will make it automated, clean code so it is easy to integrate composers role
  2. Will implement Podcast using WebSocket Protocol WebRTC
  3. Seach option using vector db which gives excellent results

Built With

Share this project:

Updates