Airbnb Frontend Clone

This is a frontend clone of Airbnb with a Firebase backend which holds listings data.

Deployed At: https://airbnb-clone-cuge.onrender.com/

(Note: your browser may show a warning when attempting to visit this site because it is an Airbnb clone)

This project is a personal portfolio website used to showcase projects and share relevant experience. It is open sourced and can be forked. Users only need to edit a json file with relevant data (see section: How To Use).

Demonstration

Demo	Desktop
Dark Mode
Light Mode
Skeleton Loading

Purpose

I built this to learn React fundamentals of reuseable components, routing and props.

It was also my introduction to a NoSQL database, specifically Firebase. I learned how to use CRUD methods on these documents.

Additionally, I refined HTML skills: flexbox, margin, padding, sticky elements, skeleton loading.

The actualy booking system is still to be continued.

Skills Demonstrated

• React: First "big" project using React for routing between homepage, a user page and a listing. I learned how to work in a component-focused manner.
• Data structure: Learned what is necessary and how to structure the data of a listing. This way the app can be easily extended by users (adding listings, comments etc) as well as interactions between users.
• Firebase (NoSql): CRUD methods on documents
• GoogleMaps API: Coordinates from a listing will pinpoint location on GoogleMaps
• CSS: Flexbox, grid, organize CSS based on components, i.e. limit name clashing

Tech Stack

• React : Frontend
• Github: Deployment
• Firebase: Listings Database

Notable Features

• Skeleton loading
• Scroll widget for property features
• Listing page interface is 1:1 with airbnb as of Nov 2022.

Icons

• https://fonts.google.com/

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

Deployment

How to deploy documentation: https://facebook.github.io/create-react-app/docs/deployment