Airbnb Clone!

Full Stack Airbnb Clone with Next 14, Tailwind CSS, Prisma, MongoDB, NextAuth (Google OAuth), Stripe, Live Chat using socket.io

Tech Stack

Features

OAuth authentication
Properties Reviews
Image upload using Cloudinary CDN
Reservation system
Properties Management
Search properties
Basic Admin Dashboard
Stripe Payment
Fetching Data with React Server Components (Without API!)
Live Chat using Socket.io, tanstack query for infinite loading of messages in batches, Websocket fallback: Polling with alerts

🧰 Getting Started

⚙️ Create a projects folder in ur pc

Clone the project (open terminal in the folder)

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

Open your project in code editor

Right click the airbnb-clone folder and open in vscode?

‼️ Prerequisites

• Install Node JS in your computer HERE
• Sign up for a Cloudinary account HERE
• Sign up for a Google Cloud Platform HERE
• And other accounts needed depending on the environment variable

Create .env and .env.local file to Setup Environment Variables

DATABASE_URL=""
NEXTAUTH_SECRET=""
NEXTAUTH_URL=
GITHUB_ID=
GITHUB_SECRET=
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

NEXT_PUBLIC_GMAP_GEOCODING_API_KEY=
NEXT_PUBLIC_GMAP_PLACES_API_KEY=
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=""
NEXT_PUBLIC_STRIPE_API_KEY=
NEXT_PUBLIC_STRIPE_WEBHOOK_SECRET=

Install required packages in the terminal

npm i

Setup Prisma

npx prisma db push

Start the app

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

Any errors, kindly google and stackoverflow answers will help

Don't forget to leave a star ⭐️