clone-airbnb's Introduction

Clone Airbnb with Next.js 13 AppDir : Tailwind ,Prisma ,MongoDB ,NextAuth.

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!

Setup .env file

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

clone-airbnb's People

Contributors

Watchers

clone-airbnb's Issues

got error after select range on calendar

I've been struggling to fix this error, and I don't know what to do. The error occurs when I try to select a range of dates , but after selecting, the error pops up.
error on console browser:

app-index.js:32 Warning: Cannot update a component (`HotReload`) while rendering a different component (`Calendar`). To locate the bad setState() call inside `Calendar`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    at Calendar (webpack-internal:///(app-client)/./node_modules/react-date-range/dist/components/Calendar/index.js:124:5)
    at DateRange (webpack-internal:///(app-client)/./node_modules/react-date-range/dist/components/DateRange/index.js:78:5)
    at Calendar (webpack-internal:///(app-client)/./components/inputs/Calendar.tsx:11:11)
    at div
    at ListingReservation (webpack-internal:///(app-client)/./components/listings/ListingReservation.tsx:7:11)
    at div
    at div
    at div
    at div
    at div
    at Container (webpack-internal:///(app-client)/./components/Container.tsx:5:11)
    at ListingClient (webpack-internal:///(app-client)/./app/listings/[listingId]/ListingClient.tsx:36:11)
    at InnerLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:227:11)