Airbnb Clone

As a final portfolio project for my completion of my software engineering bootcamp at Flatiron, I chose to clone airbnb using react as a frontend library and ruby-on-rails a backend. Bofore I start developing the clone, I tried to study every aspect of airbnb's webpage.

Backend

The backend for the project was developed by using ruby-on-rails. In creating the backend, I migrated four models to represent categories, homes, cities and hosting. The hosting models is a join table model to link the other three models. The category model is used to model the different categories of postings that are hosted in airbnb. These categories include apartments, entire homes, cabins etc. While the city model is used to describe the address or location of the particular hosting. The last model is to represent the different aspects of a given hosting. Home model represents the description details of the hosting, the price and etc.

FrontEnd

In the frontend of the clone application, I used react library to create the user interface. The interface was designed to have three pages. The landing page, a signup page and a page that renders the available apartments for hire in a particular city. The user is presented with a form that the user could enter the name of the city. Moreover, the checkin and checkout dates are also rendered in the landing page. Once the user enters and clicks the search button, the user will be directed to the details page where all the apartments available
for hire.

In developing the interface, I used different libraries. Among these libraries I used google-maps-react and react-google-places-autocomplete to render google map functionalists to the application. As the user is required to pick the checkin and checkout dates, react-datepicker was implemented to render two months calendar for the user to pick the two dates.