ereljapco / airbnb-clone

This Airbnb Clone is the final requirement for Bayan Academy's Back-End Web Development 101.

Airbnb Clone

Airbnb Clone is the final output for Bayan Academy's Backend Web Development.

Table of Contents

• Airbnb Clone
  • Table of Contents
  • Overview
    • The requirements
      • Landing Page
      • Sign-In Page
      • Sign-Up Page
      • Individual Listing Page
    • Screenshots
  • Set-up
  • My process
    • Built with
    • Continued development
  • Author

Overview

The requirements

Landing Page

The landing page should list down all the active listing of the website. In this page, there should be an option for sign-in and sign-up.

• The user should be able to see all the listings regardless if loggSed in or not. Each list must have the following details:
  • Name of Listing
  • Username of the Uploader
  • Short Description
  • Address
• A sign-in button must be present.
• A sign-up button must be present.
• The user can click listing and view its full details. If signed-in, the user should be able to add a review to the list. If not, no option should be given to the user.
• If signed in, a sign out button must be present.

Sign-In Page

• The user should be able to sign-in and go back to the page once signed-in.
• Sign-out option must be present if the user is signed-in.

Sign-Up Page

• The user should be able to register his/her username and password.
• Should be able to sign-in once registered.

Individual Listing Page

• Individual Listing must have the following details:
  • Name of Listing
  • Username of the Uploader
  • Detailed Description
  • Address
  • Date posted
  • Map (Use Map API)
  • Reviews
• Option to add a review if the user is signed-in.

Screenshots

Set-up

1. Clone this repo.

   clone https://github.com/erelropeta/airbnb-clone.git
   

2. Generate an API key from the Google Cloud Platform and place your API key in an .env file.

   API_KEY = /* place your API key here */
   

3. Install dependencies.

   npm i
   

4. Create your MongoDB database locally by running seeds.js.

   node seeds.js
   

5. Run index.js and visit http://localhost:3000/ on your browser.

   node index.js
   

My process

Built with

• HTML
• CSS
• BEM
• Node.js
• Express.js
• EJS
• MongoDB
• Maps Javascript API
• Geocoding API

Continued development

I'm planning to deploy this soon with additional features such as:

• Improve and updated UI
• Database using MongoDB Atlas
• Authentication using Auth0 or Passport
• Create a filtering feauture for the displayed active listing

Author

• LinkedIn - /erelropeta
• Github - /erelropeta
• Frontend Mentor - @ereljapco