I tried building the Couchsurfing clone
Hi reader, I hope you have landed here while searching for web development project ideas or maybe you got this blog recommended by your friend, or you have randomly searched for web development or maybe https://www.couchsurfing.com/. Well, as you are here, I would like to tell you a bit about me first. I am Harsh Gaur and I have been learning web development at www.masaischool.com for over 3 months now. In this blog, I would like to share with you a little project that I and a few of my fellow colleagues have made.
What is www.couchsurfing.com and what did we actually achieve?
If you have never visited https://www.couchsurfing.com/, it is a global hospitality exchange service accessible via a website and mobile app. Members can request lodging publicly or directly from other members, “hang out” with other members or join/create events. We used a technology stack containing React, Redux, CSS, JavaScript, and preprocessors like SASS and LESS to add more flavor to the website.
There was just one major challenge that we faced while developing this project. As we were building it during the last few days of 2020, the website had many offers for customers and thus it was very dynamic in that duration, and sometimes it happened that once we had developed a section, the next day it was gone. Keeping the challenges aside we enjoyed getting our hands dirty and working on applying the things we have learned so far, such as managing user data using LocalStorage (something which the original website does too), redux, API's and react-form-hook, and making the cloned project pixel perfect.
What did we actually clone?
We tried to implement a workflow where a user could do the following things.
- Register and/or log in.
- Goto a particular country page.
- Find a host in a particular country.
- Filter the hosts on the basis of whether they are accepting guests or not, they are verified or not, the languages they speak, etc.
- Find all the upcoming events in a country and RSVP for them.
- Find groups of their interest and join them.
- Post questions in the discussion forum.
- Chat or reply to other user's doubts.
A little about the teammates and their contributions.
I can’t thank Sahil Raj, Arshad Ali, and Gayathry enough, who worked hard for this project to become what it is today. I think the best way to thank them would be to mention their contribution and let their work speak for them.
Sahil was responsible for designing the hosts page and all the features you’ll find on that page. He took care of all the little, but important, things such as making the design of cards which simply take the user experience to the next level. He also worked hard on filtering to provide the user to filter search results.
Arshad was responsible for designing the dashboard page along with the events and groups page. He also worked to manage the filtering of the information based on the countries.
Gayathry was responsible for making the landing page of each and every country along with the login page.
Though this project was not a piece of cake and neither our 3 days journey was all rainbows, I would say that managing these guys was fun. I used to merge all our codes at night and was tracking the progress of all of us. Along with that I created the whole server, managed authentication, implemented discussions and chat feature, and finally modified the pages to look identical to the original website. I found very few merge conflicts during merging, which is a good thing because it shows how flawlessly we worked.
Ending notes
In our humble attempt to clone the https://www.couchsurfing.com/ website we tried our best to achieve the preciseness with whatever limited knowledge we possess.
If you want to check out the repository and try it yourself, please go to https://github.com/iharshgaur/Couchsurfing-Bravo and fork the repository.
In the end, I would like to thank you for sticking around to the end. Please like, share, and comment your suggestions down below.
