DEV Community

Ania Kubow
Ania Kubow

Posted on

6

Build an AirBnb Clone using Schemas and Types - with Sanity.io 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 ( http://bit.ly/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 (https://www.sanity.io/exchange) and the Sanity Slack Community (https://slack.sanity.io/).


In most videos I use Tabnine as my A.I autocompletion tool. You can download it for free here: http://bit.ly/tabnine-top-tool

If you would like to buy me a coffee, well thank you very much that is mega kind! : https://www.buymeacoffee.com/aniakubow

Sign up for weekly coding tips from my newsletter partnership: https://bit.ly/JS-tips

You can also find me on:
Twitter: https://twitter.com/ania_kubow
Instagram: https://www.instagram.com/aniakubow

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more