DEV Community

Ania Kubow
Ania Kubow

Posted on

Build an AirBnb Clone using Schemas and Types - with and Next.js! (video)

In this video I show you how to build an AirBnB Clone, as well as manage all your data visually. We are going to build a backend for the app that defines the relationships between our data thanks to Schemas and Types, and add data using Sanity Studio ( ).

Topics we will be touching on:

  • Schemas
  • Types
  • Content Management Systems
  • Geolocation
  • Google Maps API
  • Clustering Markers
  • Next.js
  • ServerSideProps
  • Sanity SDK
  • React Hooks

and much more!

0:00 - Introduction
2:39 - Getting started with Sanity
11:43 - Creating our Sanity Schemas
24:55 - Creating PropertyImage Type
30:15 - Creating Review Schema
34:44 - Creating Traveller Schema
35:50 - Creating Person Schema
42:28 - Adding Data to our Sanity Studio
52:17 - Getting Started with Next.js
56:00 - Connecting our Sanity App to our Next app
1:00:20 - Querying our Data with GROQ
1:03:57 - Building our Next.js pages
1:24:23 - Styling with CSS and Google Fonts
1:31:10 - Adding in our images
1:43:25 - Adding in our AirBnB property information styling
1:46:45 - Adding in Review information
1:54:25 - Adding in Location information
2:06:01 - Adding Links with Next.js
2:07:15 - Building our AirBnB’s home page
2:17:40 - Building our NavBar component
2:21:30 - Adding our AirBnB logo
2:23:35 - Adding a Cluster Map
2:30:25 - Conclusion

The code for my GitHub can be found here:

Google Maps API info can be found here:

If you get stuck, the Sanity community I was talking about can be found here on the Sanity Exchange ( and the Sanity Slack Community (

In most videos I use Tabnine as my A.I autocompletion tool. You can download it for free here:

If you would like to buy me a coffee, well thank you very much that is mega kind! :

Sign up for weekly coding tips from my newsletter partnership:

You can also find me on:

Discussion (0)