Building a clone of JioSaavn.com using HTML, CSS, and REACT.js
A short experience on how we built a full-stack web application from scratch within just six days!
Is it strenuous to build a website from scratch?
If anyone had asked me this question five months ago, I would’ve said YES! But now, I know that it is not hard, and there can’t be an easy thing as building a website(Thanks to Masai!).
I am Sabareesh Subramanian, studying Full Stack Web Development at Masai School. Every Unit at Masai School ends with a Construct week — a week where we build projects/clone popular websites and have fun learning new things from our peers and other resources.
This time, I, along with Pulkit Tyagi, Rupendra Singh, and Mahipal Singh Haritwal, got the chance to clone a popular music streaming website, JioSaavn.com. JioSaavn is a website that allows us to play songs, search songs, add them to the playlist, queue, and many more. Of the lot, we’ve replicated a few distinct features in our project.
Designing a Pixel-Perfect Clone:
Unlike the previous construct weeks, we had the chance to collaborate with the Designers — Rahul Garhwal and Chaitanya Madgundi from DesignShift. The Design team had worked hard in creating the designs for the product and helped us understand the process of reading and inspecting the elements from the Figma file. Being the first time, we initially faced difficulties in going through the file and getting the inputs. Thanks to the team for making us clear at each time and helping us build products effectively.
Allocation of Work:
As the first step, we decided to split the work among the team members, not based on the functionalities but corresponding pages, as we thought building an individual page would provide more exposure than creating single items. To get the fun part, I chose the Landing page, Pulkit developed the Login Page, Mahipal enjoyed building the search functionality, and Rupendra learned a lot while implementing the Library pages.
Key features of our website:
- We developed the entire website using React.js, and we’ve fetched all the relevant songs data from concerned APIs using Axios.
- For the login part, we’ve used a mock server and implemented Firebase Authentication supporting mobile logins.
- We can search and play any song according to our choice or play the ones available on the Home page from the default list.
- We’ve also implemented debouncing feature in the search functionality.
Learnings encountered:
Doing work without learning new things doesn’t sound well, and doesn’t make us productive. A few of the many learnings we had in this project through the requirements and the issues encountered are:
- To build products by referring to the Figma layouts and not the original application.
- To integrate the firebase authentication system with our application.
- To play audio files in our application to provide users a flawless, real-time experience of visiting a music streaming platform.
- To manage merge conflicts while pushing our codes to Github. We faced issues while merging our code, as we all had to play around with the same set of files.
A Glimpse of our work:
Home Page:
Original Website:
Our Clone:
Login Page:
Original Website:
Our Clone:
Signup Page:
Original Website:
Our Clone:
Search Bar:
Original Website:
Our Clone:
History Page:
Our Clone:
Favorites Page:
Our Clone:
Please try playing songs and enjoy the experience of streaming music online from our website.
People who’d love to check our code, please access it here. If you’d like to experience our product visually, please check out this demo video.
It was indeed a great experience learning a lot while building this application. We also enjoyed developing this application and will plan to use it for our personal needs :P. Thanks to Masai School for the support and confidence you provide us. Thanks to all my teammates for slogging off for the entire week in getting an amazing product!
Looking forward to working with you all on our upcoming projects!
Until next time, Cheers!
