bri-nb

Live Demo

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
• Product Design
• Technologies
• Possible Future Features

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.

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.

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

Product Design

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

• MVP List
• Schema
• State Shape
• Frontend Routes
• Backend Routes

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