Final Project: Airbrb - An Airbnb Clone made in React, Redux, and Rails

Posted by TheInvalidNonce on April 2, 2018

For my final project I decided to create an airbnb clone to showcase all of the knowledge I have made so far in the 8 months I have spent here at Flatiron.

To start this project I began by building out my API Endpoints and my React Component Hierarchy.

API Endpoints

Airbrrrb

Minimum Viable Product

Airbrrrb is a web application inspired by the world famous Airbnb site. The backend is built with a Rails 5 API and handles data persistence with a Postgresql database schema. The frontend is built with React & Redux and utilizes React Router and Redux Thunk middleware for state management. the app is also styled with Bootstrap CSS.

Features

  • User signup & Login w/ Auth0
  • Listings
  • Bookings
  • Reviews
  • Search (by location, availability, price)
  • Google Maps API integration

Bonus

  • Messaging
  • User/Host Profiles
  • Filtering

Implementation Timeline

Step 1: Rails API backend setup, DB setup & migrations

Objectives

  • Complete Rails backend and setup database schema.

Step 2: Frontend User Authentication with Auth0

Objectives

  • Fully functioning User Signup & Login.

Step 3: Listings model (CRUD actions) & components

Objectives

  • CRUD actions for listings in API.

Step 4: Listings Search (with Google Maps API)

Objectives

  • Implement listings search with Google Maps API.
  • SearchListingsContainer displays maps properly.

Step 5: Bookings

Objectives

  • Allow users to Book a Listing.
  • Set up endpoints and frontend components.

Step 6: Reviews

Objectives

  • Allow Users to leave a Review on ListingDetailPage.
  • Set up endpoints and frontend components.

Step 7: Styling and Debugging

Objectives

  • Implement Bootstrap styling & debug any critical issues.