🏠 Airbnb Clone - Full Stack Booking Platform

A production-ready Airbnb clone with property listings, reservations, and advanced search functionality. Built with Next.js 15, React 19, Tailwind CSS, Prisma, MongoDB, and NextAuth for authentication with Google and GitHub OAuth support.

Credit: This project is based on the tutorial by Antonio Erdeljac (Code With Antonio)

✨ Features

🔐 Authentication

• 📧 Email/Password - Traditional credential-based authentication
• 🐙 GitHub OAuth - Sign in with GitHub account
• 🔵 Google OAuth - Sign in with Google account
• 🔒 Secure Sessions - JWT-based session management with NextAuth
• 🔑 Prisma Adapter - Seamless database integration for auth

🏡 Property Listings

• ➕ Multi-Step Creation - Intuitive 6-step listing creation wizard
• 🏷️ Category Selection - Choose from 15 unique property categories
• 🗺️ Location Picker - Interactive map with country autocomplete
• 🛏️ Amenities Counter - Guests, rooms, and bathrooms configuration
• 🖼️ Image Upload - Cloudinary CDN integration for property photos
• 💰 Pricing Setup - Set nightly rates for your property

🏷️ Property Categories

• 🏖️ Beach - Properties close to the beach
• 🌬️ Windmills - Properties with windmills
• 🏛️ Modern - Modern architecture properties
• 🌄 Countryside - Rural countryside properties
• 🏊 Pools - Properties with swimming pools
• 🏝️ Islands - Island properties
• 🎣 Lake - Lakeside properties
• ⛷️ Skiing - Ski-in/ski-out properties
• 🏰 Castles - Historic castle properties
• 🏕️ Camping - Camping and glamping spots
• ❄️ Arctic - Arctic adventure properties
• 🦇 Cave - Unique cave dwellings
• 🏜️ Desert - Desert oasis properties
• 🏚️ Barns - Converted barn properties
• 💎 Lux - Luxury premium properties

📅 Reservations System

• 📆 Date Range Picker - Interactive calendar for booking dates
• 💰 Price Calculation - Automatic total price based on selected dates
• 🚫 Date Blocking - Prevents double bookings with reserved date validation
• 📋 Booking Management - Create and cancel reservations

🔍 Search & Filters

• 📍 Location Filter - Search by country/region with map preview
• 📅 Date Filter - Filter by check-in and check-out dates
• 👥 Guest Filter - Filter by number of guests
• 🛏️ Room Filter - Filter by number of rooms
• 🚿 Bathroom Filter - Filter by number of bathrooms
• 🏷️ Category Filter - Browse by property category

👤 User Dashboard

• ❤️ Favorites - Save and manage favorite listings
• 🧳 My Trips - View all your upcoming and past reservations
• 🏠 My Properties - Manage your listed properties
• 📥 Guest Reservations - View reservations made on your properties

🚀 Core Platform Features

• 📱 Responsive Design - Mobile-first approach with Tailwind CSS
• ⏳ Loading States - Smooth loading indicators and skeletons
• ❌ Error Handling - User-friendly error pages
• 🍞 Toast Notifications - Real-time feedback with react-hot-toast
• 🗺️ Interactive Maps - Leaflet-powered location display
• 🌍 Country Data - World countries with flags and coordinates

🛠️ Tech Stack

Frontend

• Next.js 15 - React framework with App Router & Turbopack
• React 19 - UI library
• TypeScript - Type safety
• Tailwind CSS 4 - Utility-first styling
• React Hook Form - Form handling
• Zustand - Lightweight state management
• React Icons - Icon library
• React Spinners - Loading indicators

Backend & Database

• Next.js API Routes - Serverless API endpoints
• Prisma - TypeScript ORM
• MongoDB - NoSQL database
• NextAuth.js - Authentication for Next.js
• bcrypt - Password hashing

Maps & Location

• Leaflet - Interactive maps
• React Leaflet - React components for Leaflet
• World Countries - Country data
• Country Flag Icons - Flag icons
• React Select - Country autocomplete dropdown

Media & Utilities

• Cloudinary - Image upload and CDN
• next-cloudinary - Cloudinary integration for Next.js
• Axios - HTTP client
• date-fns - Date utility library
• react-date-range - Date range picker
• query-string - URL query string parsing
• react-hot-toast - Toast notifications

📋 Prerequisites

Before you begin, ensure you have:

• Node.js (v18 or higher)
• npm, yarn, pnpm, or bun
• Git
• Accounts for:
  • MongoDB Atlas (Database)
  • Cloudinary (Image uploads)
  • GitHub Developer (OAuth - optional)
  • Google Cloud Console (OAuth - optional)

🚀 Getting Started

1. Clone the repository

git clone https://github.com/git-adventures/airbnb-clone.git
cd airbnb-clone

2. Install dependencies

npm install
# or
bun install

3. Setup Environment Variables

Create a .env file in the root directory:

# MongoDB Database
DATABASE_URL=mongodb+srv://<username>:<password>@<cluster>.mongodb.net/<database>

# NextAuth Configuration
NEXTAUTH_SECRET=your_nextauth_secret_generate_with_openssl
NEXTAUTH_URL=http://localhost:3000

# GitHub OAuth (optional)
GITHUB_ID=your_github_oauth_client_id
GITHUB_SECRET=your_github_oauth_client_secret

# Google OAuth (optional)
GOOGLE_CLIENT_ID=your_google_oauth_client_id
GOOGLE_CLIENT_SECRET=your_google_oauth_client_secret

# Cloudinary (for image uploads)
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name

4. Setup Prisma Database

# Generate Prisma client
npx prisma generate

# Push schema to database
npx prisma db push

# (Optional) Open Prisma Studio to manage database
npx prisma studio

5. Start the development server

npm run dev
# or
bun run dev

Open http://localhost:3000 in your browser.

📦 Available Scripts

Command	Description
npm run dev	Start development server with Turbopack
npm run build	Build for production
npm start	Start production server
npm run lint	Run ESLint

🔧 Troubleshooting

Database Issues

• Ensure DATABASE_URL is correct and includes the database name
• Run npx prisma db push to sync schema
• Check MongoDB Atlas dashboard for connection status
• Whitelist your IP address in MongoDB Atlas Network Access

Authentication Issues

• Verify OAuth credentials are correct
• Check callback URLs match your NEXTAUTH_URL
• Ensure NEXTAUTH_SECRET is set (generate with openssl rand -base64 32)
• For Google OAuth, configure authorized redirect URIs

Image Upload Issues

• Verify NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME is set correctly
• Configure upload presets in Cloudinary dashboard
• Check browser console for CORS errors

Map Not Loading

• Leaflet requires client-side rendering (already handled with dynamic imports)
• Check if location data is being passed correctly

📚 Resources

• Next.js Documentation
• Prisma Documentation
• NextAuth.js Documentation
• Tailwind CSS Documentation
• MongoDB Atlas Documentation
• Cloudinary Documentation
• Leaflet Documentation

🙏 Acknowledgments

• YouTube Tutorial - Full 8+ hour build tutorial
• Code With Antonio - Course creator
• Vercel - Deployment platform

---

⭐ If you found this project helpful, please give it a star!

📚 Resources:

• Try MongoDB Atlas - Cloud database
• Try Cloudinary - Media management
• Try NextAuth.js - Authentication library
• Try Prisma - Next-generation ORM
• Try Vercel - Deployment platform