Tailwind Resources Logo Tailwind Resources
Airbnb Build screenshot

Airbnb Build

Author Avatar Theme by Sashenjayathilaka
Updated: 22 Jul 2023
345 Stars

Full Stack Airbnb Clone with Next.js 13 Tailwind-css, Prisma, MongoDB, NextAuth, Framer-motionSocial, Login (Google and Facebook), Image upload, Cloudinary CDN, Location selection, Map component, Country autocomplete, Fetching listings with server components

Github Live Preview

Categories

Nextjs React Prisma Fullstack

Overview:

The Airbnb Clone with Next.js 13 project is a replica of the popular Airbnb platform, built using Next.js framework. The project includes features like reservation functionality, listing creation, searching, favorites, individual listing views, and more. With a tech stack that includes Cloudinary, Google Cloud Platform, and NextAuth, this project provides a comprehensive Airbnb-like experience.

Features:

  • Reservation Functionality: Users can make reservations for listings.
  • Listing Creation: Ability to create new listings with descriptions and prices.
  • Favorite Functionality: Users can mark listings as favorites.
  • Searching Functionality: Allows users to search for specific listings.
  • Individual Listing View: Detailed view for each listing.
  • Listing Reservation Component: Component dedicated to handling reservations.

Installation:

  1. Install Node.js on your computer.
  2. Sign up for a Cloudinary account and set up the required environment variables.
  3. Sign up for a Google Cloud Platform account and set up the required environment variables.
  4. Sign up for Meta for Developers and obtain the Lookup API Key.
  5. Add the necessary environment variables to your .env file (DATABASE_URL, GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, FACEBOOK_ID, FACEBOOK_SECRET, NEXTAUTH_SECRET, NEXTAUTH_URL, NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME, NEXT_PUBLIC_LOOKUP_KEY).
  6. Clone the project and navigate to the project directory.
  7. Install project dependencies using npm.
  8. Start the server to run the project locally.
  9. Access the project at http://localhost:3000 in your browser.

Summary:

The Airbnb Clone with Next.js 13 project offers a platform that closely resembles Airbnb’s functionality. With features like reservation handling, listing creation, searching, and favorites, users can experience a similar environment to the original platform. The project utilizes a tech stack that includes Cloudinary, Google Cloud Platform, and NextAuth for enhanced functionality. By following the installation guide, users can set up and run the project locally to explore its features.