Our First Project in React

Arshad Ali
3 min readFeb 8, 2021

In this project, we have tried to make a look-alike clone of CouchSurfing. With our efforts and the technology stack, that we have learned so far in the Masai school, we were able to clone the front end with high precision and quality.

Cloned Landing Page

CouchSurfing 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. Harassment is against the terms of service. Members set up user profiles on which other members can post reviews.

Cloned Dashboard Page

Dashboard page has search functionality, to search a country by typing a name in the search bar and also go any country page clicking on it,

Dashboard Page

As you see the user name at the left side of the page is changing dynamically by API.

Country page

In the above, country page user can see in a particular country how many hosts have to organize events, and used like any events in events section they will join the event by clicking on the join button, in the discussion section user able to discuss the country related like how is best to others, and also this page data change dynamically by server.

Events Page

In the events page, user can find how many events are going on and also find it by filter functionality to select any country name. If user like any event they will join the event by clicking on the join button, remove events from Events I am Attending section and create an event.

Host Page

In the host page, user can search the host by using filter functionality filter using by there interest like, language, accepting guest etc, and also see the detail by clicking on it.

Some static pages

Technology Stack Used

In this project, we have used the following tech stack.

  • React
  • Redux
  • CSS
  • Heroku (for API hosting)

Along with that, 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

Team Members

Arshad Ali (me)

Harsh gaur

Sahil Raj

Gayathry

I hope you like our project, Click here to see the Github project

Thank You.

--

--