Airbnb clone

  • Category: Web application
  • Date: May 2024 - Jun 2024
  • Role performed: Full-Stack developer
  • Technologies:
  • Next.js 14 React TypeScript MongoDB NextAuth 2024 Tailwind Prisma
    Go to App GitHub

Description

  • This project is the result of following an online course to get started with React + Next.js.
  • You can see the tutorial in the following link. I made adjustments to migrate the original project from Next 13 to Next 14.
  • 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 templating files to unify loading and error handling
    • How to handle relations between Server and Child components!