Skip to content
forked from webdevoir/bri-nb

Full-stack clone of Airbnb's website using React-Redux and Ruby on Rails

Notifications You must be signed in to change notification settings

amruizva/bri-nb

 
 

Repository files navigation

bri-nb

A clone of Airbnb

Bri-nb is an online marketplace which lets people rent out their properties or spare rooms to guests. Bri-nb's design is intended to be a clone Airbnb's UI/UX.

Bri-nb makes use of a Rails/PostgreSQL backend with a React.js and Redux frontend.

This project was designed and built in a 10-day deadline, although style changes and features will be added over time.

This README covers the following:

Features

  • Secure frontend and backend user authentication using BCrypt
  • Users can search a location and be presented with a map populated with markers indicating homes
  • Users can also view an index of homes availble in the area
  • Once logged in, users may leave reviews and make reservations for specific homes

Signup & Login Modals

Users are able to navigate the site and the homes, and should only being required to login when they want to leave a review and make a reservation. To login/signup, users can click on the corresponding button to get a modal to pop up.

modal

This was done by dispatching an openModal action whenever the signup or login buttons were clicked.

function Modal({ modal }) {
    if (!modal) {
        return null;
    }
    let component;
    switch (modal[0]) {
        case 'login':
            component = <LoginFormContainer />;
            break;
        case 'signup':
            component = <SignupFormContainer />;
            break;
        default:
            return null;
    }
    return (
        <div className="modal-background" onClick={ closeModal }>
            <div className="modal-child" onClick={e => e.stopPropagation()}>
                {component}
            </div>
        </div>
    );
}

Search

Users can search for a location, and an autocomplete dropdown will appear under the searchbar. The autocomplete feature was done in conjunction with Places Autocomplete from Maps JavaScript API.

search

Home Show

Users view a specific home show page where they can view a larger photo, leave a review, and make a reservation for that home.

Leaving a review

review

Product Design

Application features and design documents can be accessed in the project wiki. The following design documents are available:

Technologies

Bri-nb was built with the purpose of creating a full-stack, single-page application (SPA) within a relatively short timeline (10 days). The technologies that were used in the application are not necessarily those that are best suited for scalability.

Technologies Used:
  • JavaScript
  • Ruby on Rails
  • PostgreSql
  • HTML
  • CSS
Libraries Used:
  • React.js
  • Redux.js
  • Amazon S3, Amazon AWS
  • Google Maps JavaScript API
  • Places Autocomplete

Possible Future Features

  • Allow users to edit/delete their reviews
  • Allow users to view their reservations, along with edit/delete them.
  • Get search to work for other locations
  • User profiles
  • Host views

Developed by Brian Jeong

alt text alt text alt text alt text

About

Full-stack clone of Airbnb's website using React-Redux and Ruby on Rails

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 53.9%
  • CSS 42.4%
  • Ruby 3.3%
  • Other 0.4%