We're going to clone Airbnb with Next.js

Let's start a new project

Join the 2022 Full-Stack Web Dev Bootcamp!

With this post I’m starting a new series on the blog where I’ll show you how to build a clone of Airbnb using Next.js. The series will be pretty long, more than 20 posts, and we’ll tackle one part of the application every day. I hope you’ll enjoy it.

In this project we’re going to create an Airbnb clone with React and Next.js.

TIP: if you are completely new to React, or to React Hooks, download my React Handbook and use that as a companion reference.

Also download my Next.js Handbook. It contains in-depth explanations to many of the features provided by Next.js that we’re going to use.

This project will be full-stack: frontend and backend, with server-side rendering and routing. It’s going to have a huge set of features: browsing houses, logging in, booking a house, having the logic to determine if dates are already booked, paying the stay using Stripe, and then becoming hosts, adding our own houses with all the details, and selling them!

Of course we cannot build everything Airbnb provides, but we’ll replicate a significant part of the website.

Here’s what we’re going to implement:

  • Visualizing existing houses
  • A form to add new houses
  • A calendar to see houses availability
  • Login, user authentication
  • Data storage using Postgres
  • Booking houses
  • Managing payments using Stripe

And here’s what what we’re not going to do, at least initially (I might expand this project later on):

  • we’re not going to implement experiences, just houses renting
  • we drop search, since we’ll have just a few sample houses and search is not an optimal way when you can provide other discoverability tools
  • we drop many of the options you can have on a house
  • we drop comments and communication between host and guest
  • we are not going to implement multiple currencies, we’ll just use US dollars

Here are some pictures that will give you a good idea of the final result we’ll achieve in this project:

Want to become a better Web Developer? Join the 2022 Web Development Bootcamp!

⭐️⭐️⭐️ Join the 2022 Web Development Bootcamp ⭐️⭐️⭐️