https://github.com/saddamarbaa/airbnb-clone-app-nex-js
==> Building Airbnb Clone App with React Js + Next Js + TypeScript + Tailwind CSS + Heroicons + Mapbox + Vercel Hosting + User Authentication (a mobile-friendly)
https://github.com/saddamarbaa/airbnb-clone-app-nex-js
heroicons image-optimization mapbox nextjs react server-side-rendering tailwind-css typescript
Last synced: 7 days ago
JSON representation
==> Building Airbnb Clone App with React Js + Next Js + TypeScript + Tailwind CSS + Heroicons + Mapbox + Vercel Hosting + User Authentication (a mobile-friendly)
- Host: GitHub
- URL: https://github.com/saddamarbaa/airbnb-clone-app-nex-js
- Owner: saddamarbaa
- License: mit
- Created: 2021-10-01T17:01:08.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-07-31T12:30:36.000Z (over 2 years ago)
- Last Synced: 2025-03-30T05:11:24.557Z (about 1 month ago)
- Topics: heroicons, image-optimization, mapbox, nextjs, react, server-side-rendering, tailwind-css, typescript
- Language: TypeScript
- Homepage: https://airbnb-clone-app-nex-js.vercel.app/
- Size: 1.22 MB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](#Author)
- [Demo](#Demo)
- [Technologies](#Technologies)
- [Related Projects](#Related_Projects)
- [Optimizations](#Optimizations)
- [Contributing](#Contributing)
- [Status](#status)
- [Features](#Features)
- [Inspiration](#inspiration)
- [Support](#Support)
- [Feedback](#Feedback)
- [Run Locally](#Run_Locally)
- [Environment Variables](#Environment)
- [Screenshots](#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 [email protected].
# Feedback
If you have any feedback, please reach out to me at [email protected]
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
```bash
https://github.com/saddamarbaa/airbnb-clone-app-nex-js
```
Go to the project directory
```bash
cd airbnb-clone-app-nex-js
```
Install dependencies
```bash
npm install
```
Start the server
```bash
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
