/next13-airbnb-clone

I developed an Airbnb clone with comprehensive functionalities, covering everything from a responsive frontend to a robust backend to provide a complete experience to users.

Primary LanguageTypeScript

Full Stack Airbnb Clone with Next.js 13 App Router: React, Tailwind, Prisma, MongoDB, NextAuth 2023

Desktop (screenshot):

Home Info Propertie
airbnb1 airbnb2
Reserve My Trips
airbnb3 airbnb4
My Properties Location
airbnb11 airbnb5
Location Map Add Info Reservation
airbnb6 airbnb7
Upload Photo Title and Description
airbnb8 airbnb9

airbnb10

This is a repository for a Full Stack Airbnb Clone with Next.js 13 App Router: React, Tailwind, Prisma, MongoDB, NextAuth.

DEPLOY

Features:

  • Tailwind design
  • Tailwind animations and effects
  • Full responsiveness
  • Credential authentication
  • Google authentication
  • Github authentication
  • Image upload using Cloudinary CDN
  • Client form validation and handling using react-hook-form
  • Server error handling using react-toast
  • Calendars with react-date-range
  • Page loading state
  • Page empty state
  • Booking / Reservation system
  • Guest reservation cancellation
  • Owner reservation cancellation
  • Creation and deletion of properties
  • Pricing calculation
  • Advanced search algorithm by category, date range, map location, number of guests, rooms and bathrooms
    • For example we will filter out properties that have a reservation in your desired date range to travel
  • Favorites system
  • Shareable URL filters
    • Lets say you select a category, location and date range, you will be able to share URL with a logged out friend in another browser and they will see the same results
  • How to write POST and DELETE routes in route handlers (app/api)
  • How to fetch data in server react components by directly accessing database (WITHOUT API! like Magic!)
  • How to handle files like error.tsx and loading.tsx which are new Next 13 templating files to unify loading and error handling
  • How to handle relations between Server and Child components!

Prerequisites

Node version 14.x

Cloning the repository

git clone https://github.com/Luancss/next13-airbnb-clone

Install packages

npm install

Setup .env file

DATABASE_URL=
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
GITHUB_ID=
GITHUB_SECRET=
NEXTAUTH_SECRET=

Setup Prisma

npx prisma db push

Start the app

npm run dev

Available commands

Running commands with npm npm run [command]

command description
dev Starts a development instance of the app