Airbnb Clone

Building Airbnb Clone App with React Js, Next Js, TypeScript, Redux, Tailwind CSS, Heroicons, Firebase, Vercel Hosting, with complete user authentication (a mobile-friendly).

Table of contents

• Author
• Demo
• Technologies
• Related Projects
• Optimizations
• Contributing
• Status
• Features
• Inspiration
• Support
• Feedback
• Run Locally
• Environment Variables
• Screenshots

Author

@Saddam Arbaa

Technologies

Client:

• React Js
• Next Js
• TypeScript
• Redux
• Tailwind CSS
• Heroicons

Server:

• Vercel Hosting
• Firebase Google Authentication

Demo

LIVE DEMO

Optimizations

• Next' Js Image component
• Next' Js file-system based router
• Next' Js Server-side rendering
• Memoization (useMemo, Memo)
• Function components
• React hooks
• React useEffect cleanup

Features

• Complete user authentication users can sign in, sign out
• Search and Calendar Functionality

Contributing

Contributions are always welcome!

Related_Projects

Amazon Clone App built with React Js + TypeScript + Redux + Styled Components

Github Repo

LIVE DEMO

Tesla Clone App built with React Js + TypeScript + Redux + Styled Components + Material-UI + Vercel Hosting

Github Repo

LIVE DEMO

Netflix Clone App built with React Js + TypeScript + Redux + Stripe Checkout/Payments + Vercel Hosting + Firebase

Github Repo

LIVE DEMO

LinkedIn Clone App built with React Js + TypeScript + Redux + Styled Components + Material-UI + Firebase Realtime Database + Vercel Hosting

Github Repo

LIVE DEMO

Facebook Clone App built with React Js + Next Js + TypeScript + Redux + Styled Components

Github Repo

LIVE DEMO

Instagram Clone App built with React Js + Next Js + TypeScript + Redux + Tailwind CSS + Heroicons

Github Repo

LIVE DEMO

Support

For support, email saddamarbaas@gmail.com.

Feedback

If you have any feedback, please reach out to me at saddamarbaas@gmail.com

Twitter https://twitter.com/ArbaaSaddam/

Linkedin. https://www.linkedin.com/in/saddamarbaa/

Github https://github.com/saddamarbaa

Instagram https://www.instagram.com/saddam.dev/

Facebook https://www.facebook.com/saddam.arbaa

Run_Locally

Clone the project

 https://github.com/saddamarbaa/airbnb-clone-app-nex-js

Go to the project directory

  cd airbnb-clone-app-nex-js

Install dependencies

  npm install

Start the server

npm run dev
# or
yarn dev

Environment

• To run this project, you will need to create a new project on firebase, setup Firebase google authentication and add the following environment variables to your next.config.js

• API_KEY

• AUTH_DOMAIN

• PROJECT_ID

• STORAGE_BUCKET

• MESSAIN_SENDER_ID

• APPID

• MAP_BOX_ACCESS_TOKEN (map box token key)

Status

Project is now complete in (React js + Next js + Tailwind CSS) so my next step I would love to converted to (React + TypeScript + Next.js + Node.js + Express + MongoDB)

Inspiration

Build By Saddam Arbaa Project inspired by [Airbnb] https://www.airbnb.com/

Screenshots

Home Page

Search Page

LogIn Page

Loading Screen

Responsiveness