https://github.com/mrkchoi/airbnb_clone

Airbnb clone with React, Redux, and Rails backend. Allows users to sign up, find listings, book a stay and much more!
https://github.com/mrkchoi/airbnb_clone

Last synced: about 1 month ago
JSON representation

Airbnb clone with React, Redux, and Rails backend. Allows users to sign up, find listings, book a stay and much more!

• Host: GitHub
• URL: https://github.com/mrkchoi/airbnb_clone
• Owner: mrkchoi
• Created: 2019-06-27T03:40:46.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-11-06T17:43:40.000Z (about 1 year ago)
• Last Synced: 2024-08-05T08:07:27.730Z (5 months ago)
• Language: JavaScript
• Homepage:
• Size: 1.73 MB
• Stars: 77
• Watchers: 4
• Forks: 27
• Open Issues: 28
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• Open-Source-Ruby-and-Rails-Apps - airbnb_clone - Airbnb clone with React, Redux, and Rails backend. Allows users to sign up, find listings, book a stay and much more! 🔥 ✅ 🚀 (Happy Exploring 🤘)

README

        
# Aerbnb

**Aerbnb** is a single-page, full stack web application **(SPA)** inspired by Airbnb where users can view, book, and search for listings by location.

It utilizes **Ruby on Rails** with a **PostgreSQL** database on the back-end, and **React.js** and **Redux** on the front-end. 

### Screenshots

![AirBnB clone screenshot Kenneth Choi](https://raw.githubusercontent.com/mrkchoi/WHR_data_visualization/master/dist/assets/screenshots/aerbnb_screenshot.gif)

### Key Features

#### [Aerbnb Design Documents](https://github.com/mrkchoi/airbnb_clone/wiki)

#### User Authentication

* Users can sign up or log in to use the application

* Users can also log in through a demo account

User credentials are securely hashed, salted, and stored as a password digest

```ruby

class User < ApplicationRecord

  validates :username, :session_token, uniqueness: true

  validates :username, presence: true

  validates :password, length: {minimum: 6, allow_nil: true}

  // ..

  

  attr_reader :password

  before_validation :ensure_session_token

  def self.find_by_credentials(username, password)

    @user = User.find_by(username: username)

    return nil unless @user

    @user.is_password?(password) ? @user : nil

  end

  def password=(password)

    @password = password

    self.password_digest = BCrypt::Password.create(password)

  end

  def is_password?(password)

    BCrypt::Password.new(self.password_digest).is_password?(password)

  end

  def ensure_session_token

    self.session_token ||= SecureRandom::urlsafe_base64

  end

  def reset_session_token!

    self.session_token = SecureRandom::urlsafe_base64

  end

end

```

#### Listings

* Listings are displayed on the homepage

* Users are able to search for listings via Google Maps Places API

As a user moves the map around, the new bounds (coordinates) will get updated in realtime and send the correct listings from the backend (PostgreSQL database)

```ruby

class Listing < ApplicationRecord

  // ..

  

  def self.in_bounds(bounds)

    bounds = JSON.parse(bounds)

    self.where('lat < ?', bounds["northEast"]["lat"].to_f)

      .where('lat >?', bounds["southWest"]["lat"].to_f)

      .where('long < ?', bounds["northEast"]["lng"].to_f)

      .where('long > ?', bounds["southWest"]["lng"].to_f)

  end

  

  // ..

end

```

The Google Maps API is integrated into the appropriate React frontend components

```ruby

class ListingMap extends React.Component {

  constructor(props) {

    super(props);

    this.renderMap = this.renderMap.bind(this);

    this.handleMarkerClick = this.handleMarkerClick.bind(this);

  }

  

  // ..

  renderMap() {

    const mapOptions = {

      center: this.props.mapSearchCoords,

      zoom: 13,

      gestureHandling: "greedy"

    };

    this.map = new google.maps.Map(this.mapNode, mapOptions);

    this.MarkerManager = new MarkerManager(this.map, this.handleMarkerClick);

    this.registerListeners();

    this.MarkerManager.updateMarkers(this.props.listings);

  }

  registerListeners() {

    google.maps.event.addListener(this.map, 'idle', () => {

      const { north, south, east, west } = this.map.getBounds().toJSON();

      

      let bounds = {

        northEast: { lat: north, lng: east },

        southWest: { lat: south, lng: west }

      };

      this.props.updateFilter("bounds", bounds);

    });

    

    // ..

  }

```

#### Bookings

* A logged in user is able to view his or her bookings

* A logged in user is able to make valid bookings on listings and delete any booking he or she made

#### Technology Stack

Aerbnb is a single-page web application with one backend route responsible for rendering HTML. User interactions in the front-end side trigger AJAX requests to the back-end, which is responsible for rendering database information in JSON format.

### Front-end

#### React

The Rails backend API is connected to a React frontend to efficiently render to the virtual DOM.

#### Redux

Redux manages the front-end state of Aerbnb. When database information is retrieved, Redux state is updated first and re-renders the appropriate React components.

### Back-end

#### Ruby on Rails

Ruby on Rails is the back-end framework used to query the database.

#### Database

Aerbnb uses a PostgreSQL database to store its relational data.

#### Future Plans

* Implement ability for users to upload profile pictures and edit profile page

* Infinite scrolling or pagination on the index pages

* Implement ability to interact with friends, i.e. messaging

* Additional filters for listings