Cloning Facebook, a popular social media platform using React.js and Firebase!
A quick read on our experience building an actual interactive website from scratch!
Learning new things without implementing them anywhere makes us quickly forget them. At Masai, to favor this, the focus is more on building new products and applications. One such opportunity is to develop applications/clone popular websites during Construct Week at the end of each Unit.
Being in the Fifth Unit, we got a chance to clone Facebook.com, a popular social media platform that's been changing our lives and making conversations better. Hearing it made us excited, and we wanted to bring the best out of cloning the original website.
Planning out things:
We first checked out the website and came up with multiple plans and approaches to replicate it. We finalized the list of pages for our project and the functionalities to be included in each. Being in the final leg of the course gave us the advantage to explore and use any Framework/Library.
Fun experiences in building the UI:
After deciding on the pages to be built, we started to have individual pages to code and develop. Kumar Ankush took the Login and Signup pages, while Biswajit Das had fun coding the stories page. Piyush Ranjan was interested in bringing out the home page, and I enjoyed developing the User Profile page, and Niket Nayan was to get the Navbar of the application.
Making the application dynamic:
Building just a static page had us through it, and it was now time to make our application dynamic. Instead of going through MongoDB, we tried to step out of our comfort zone and tried integrating the application with Firebase. Thanks to the documentation and multiple resources, which made us familiar with Firebase. We configured our application with Firebase DB and enabled a real-time data experience for our users.
Key features of our application:
Few significant functionalities in our application:
- Users would be able to add new posts and see them on the landing page of our application in real-time without refreshing the page.
- In addition to adding new posts, users can also add new stories and view them easily.
Few snapshots of our work:
Login Page:
Signup Modal:
User Profile Page:
Stories Page:
Learnings/Challenges from the project:
- Even when being familiar with GitHub and its operations, a tingle always happens while typing "git push" in the terminal every time. :P
- Having used Mongo as the database for all our previous projects, we got a chance to learn Firebase through this opportunity, and I felt awe seeing how easily we could set a backend for an application.
Additional features planned:
Owing to the time constraint, we couldn't build another significant feature - messaging people. But, we're determined to take it up in the upcoming days and develop a chat feature for our application. As always said, Learning all things without getting anything done would take us nowhere.
People who love to check out the code, please get it here. To get a live demo of our application, please check this demo video.
We all had a great time building this clone and would love to work on many such projects in the future and, I am eager to share those experiences as well.
I'm hoping to meet you all again!
Until next time, Cheers!