{"id":13818910,"url":"https://github.com/mrkchoi/airbnb_clone","last_synced_at":"2025-05-16T04:31:54.313Z","repository":{"id":38295434,"uuid":"194017798","full_name":"mrkchoi/airbnb_clone","owner":"mrkchoi","description":"Airbnb clone with React, Redux, and Rails backend. Allows users to sign up, find listings, book a stay and much more!","archived":false,"fork":false,"pushed_at":"2023-11-06T17:43:40.000Z","size":1814,"stargazers_count":78,"open_issues_count":28,"forks_count":26,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-19T18:44:56.167Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mrkchoi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-06-27T03:40:46.000Z","updated_at":"2024-10-25T23:11:57.000Z","dependencies_parsed_at":"2024-01-13T15:41:02.331Z","dependency_job_id":"df307ce4-21d1-4d67-82e4-bf5e0a1fcdf4","html_url":"https://github.com/mrkchoi/airbnb_clone","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrkchoi%2Fairbnb_clone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrkchoi%2Fairbnb_clone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrkchoi%2Fairbnb_clone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrkchoi%2Fairbnb_clone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mrkchoi","download_url":"https://codeload.github.com/mrkchoi/airbnb_clone/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254469019,"owners_count":22076412,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T08:00:35.590Z","updated_at":"2025-05-16T04:31:53.001Z","avatar_url":"https://github.com/mrkchoi.png","language":"JavaScript","funding_links":[],"categories":["Happy Exploring 🤘"],"sub_categories":[],"readme":"# Aerbnb\n**Aerbnb** is a single-page, full stack web application **(SPA)** inspired by Airbnb where users can view, book, and search for listings by location.\n\nIt utilizes **Ruby on Rails** with a **PostgreSQL** database on the back-end, and **React.js** and **Redux** on the front-end. \n\n### Screenshots\n\n![AirBnB clone screenshot Kenneth Choi](https://raw.githubusercontent.com/mrkchoi/WHR_data_visualization/master/dist/assets/screenshots/aerbnb_screenshot.gif)\n### Key Features\n#### [Aerbnb Design Documents](https://github.com/mrkchoi/airbnb_clone/wiki)\n\n#### User Authentication\n* Users can sign up or log in to use the application\n* Users can also log in through a demo account\n\nUser credentials are securely hashed, salted, and stored as a password digest\n\n```ruby\nclass User \u003c ApplicationRecord\n  validates :username, :session_token, uniqueness: true\n  validates :username, presence: true\n  validates :password, length: {minimum: 6, allow_nil: true}\n\n  // ..\n  \n  attr_reader :password\n  before_validation :ensure_session_token\n\n  def self.find_by_credentials(username, password)\n    @user = User.find_by(username: username)\n    return nil unless @user\n    @user.is_password?(password) ? @user : nil\n  end\n\n  def password=(password)\n    @password = password\n    self.password_digest = BCrypt::Password.create(password)\n  end\n\n  def is_password?(password)\n    BCrypt::Password.new(self.password_digest).is_password?(password)\n  end\n\n  def ensure_session_token\n    self.session_token ||= SecureRandom::urlsafe_base64\n  end\n\n  def reset_session_token!\n    self.session_token = SecureRandom::urlsafe_base64\n  end\nend\n\n```\n\n#### Listings\n* Listings are displayed on the homepage\n* Users are able to search for listings via Google Maps Places API\n\nAs 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)\n\n```ruby\nclass Listing \u003c ApplicationRecord\n  // ..\n  \n  def self.in_bounds(bounds)\n    bounds = JSON.parse(bounds)\n\n    self.where('lat \u003c ?', bounds[\"northEast\"][\"lat\"].to_f)\n      .where('lat \u003e?', bounds[\"southWest\"][\"lat\"].to_f)\n      .where('long \u003c ?', bounds[\"northEast\"][\"lng\"].to_f)\n      .where('long \u003e ?', bounds[\"southWest\"][\"lng\"].to_f)\n  end\n  \n  // ..\nend\n```\nThe Google Maps API is integrated into the appropriate React frontend components\n\n```ruby\nclass ListingMap extends React.Component {\n  constructor(props) {\n    super(props);\n    this.renderMap = this.renderMap.bind(this);\n    this.handleMarkerClick = this.handleMarkerClick.bind(this);\n  }\n  \n  // ..\n\n  renderMap() {\n    const mapOptions = {\n      center: this.props.mapSearchCoords,\n      zoom: 13,\n      gestureHandling: \"greedy\"\n    };\n\n    this.map = new google.maps.Map(this.mapNode, mapOptions);\n    this.MarkerManager = new MarkerManager(this.map, this.handleMarkerClick);\n\n    this.registerListeners();\n    this.MarkerManager.updateMarkers(this.props.listings);\n  }\n\n  registerListeners() {\n    google.maps.event.addListener(this.map, 'idle', () =\u003e {\n      const { north, south, east, west } = this.map.getBounds().toJSON();\n      \n      let bounds = {\n        northEast: { lat: north, lng: east },\n        southWest: { lat: south, lng: west }\n      };\n\n      this.props.updateFilter(\"bounds\", bounds);\n    });\n    \n    // ..\n  }\n```\n\n#### Bookings\n* A logged in user is able to view his or her bookings\n* A logged in user is able to make valid bookings on listings and delete any booking he or she made\n\n#### Technology Stack\nAerbnb 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.\n\n### Front-end\n#### React\nThe Rails backend API is connected to a React frontend to efficiently render to the virtual DOM.\n\n#### Redux\nRedux manages the front-end state of Aerbnb. When database information is retrieved, Redux state is updated first and re-renders the appropriate React components.\n\n### Back-end\n#### Ruby on Rails\nRuby on Rails is the back-end framework used to query the database.\n\n#### Database\nAerbnb uses a PostgreSQL database to store its relational data.\n\n#### Future Plans\n* Implement ability for users to upload profile pictures and edit profile page\n* Infinite scrolling or pagination on the index pages\n* Implement ability to interact with friends, i.e. messaging\n* Additional filters for listings\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrkchoi%2Fairbnb_clone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmrkchoi%2Fairbnb_clone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrkchoi%2Fairbnb_clone/lists"}