Couchsurfing clone — Using React.

Gayathry JM
4 min readFeb 9, 2021

Welcome Reader! If u haven’t read my previous blog posts, I would like you to know a little about me. Myself Gayathry. I am a student at Masai School and aspire to become a Full Stack Web Developer. I have learned HTML, CSS, JavaScript and React within 3 months at Masai School.

This time, I got to clone the Couchsurfing website as a part of my project. It was a team project and I along with my teammates Harsh Gaur, Arshad Ali and Sahil Raj , successfully completed the cloning in 4 days. In this article, I will be sharing my experience while building this project.

Tech Stacks Used 💻

  • React
  • Redux
  • CSS
  • Heroku (for APIhosting)

Along with that, in order to store user data, we also used LocalStorage (aka browser storage).

Libraries Used 🌟

  1. Font-Awesome
  2. React-Redux
  3. React-hook-form
  4. UUID
  5. Redux
  6. React-router-dom
  7. Axios

You can install the libraries using the “npm install” command.

About Couchsurfing.com

CouchSurfing is a global hospitality exchange service accessible via a website and mobile app. If you want to visit a country or a city, you can visit this website to plan your trip. You can visit that country page, and see the number of hosts available, all the events happening, you can join or create your own events and whatnot.

So, our task was to cone this website with high precision and quality and implement the major functionalities of the website.

Accomplishments

At the end of our project, we were able to develop a website with the following pages and dynamic functionality. Given below is the map you would require if you use our cloned website:

  1. Sign Up and Login.

Make sure you do this process to land on the main dashboard.

2. Dashboard.

3. Visit the Country you want to explore with the Search bar at the top or click the respective country card.

4. Check and Join the Events happening or create a new Event using the Event icon on the Navbar.

5. Find groups that interest you and join them or create a new group using the Groups on the Navbar.

6. Filter the hosts on the basis of whether they are accepting guests or not, they are verified or not, the languages they speak, etc.

7. Have a query? Visit the discussion forum at the bottom of every country page. Post or reply to the queries.

Thanking Note

I had a very good experience and could learn a lot from my fellow teammates. We helped each other to eliminate our weaknesses and had the same commitment level to complete this project.

I would like to thank Masai School for their constant support and guidance throughout the project.

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.

--

--