Building an Airbnb Clone with Sanity.io and Next.js

Overview

Build an AirBnB clone with structured content using Sanity.io and Next.js in this comprehensive tutorial video. Learn to create a backend that defines data relationships through Schemas and Types, and manage content visually with Sanity Studio. Explore topics such as Content Management Systems, Geolocation, Google Maps API, Clustering Markers, ServerSideProps, Sanity SDK, and React Hooks. Follow step-by-step instructions to set up Sanity, create schemas, add data, integrate Next.js, query data with GROQ, build pages, style with CSS and Google Fonts, implement images and property information, add reviews and location details, create a navbar, and incorporate a cluster map. Gain practical experience in full-stack development while creating a functional AirBnB-like application.

Syllabus

- Introduction
- Getting started with Sanity
- Creating our Sanity Schemas
- Creating PropertyImage Type
- Creating Review Schema
- Creating Traveller Schema
- Creating Person Schema
- Adding Data to our Sanity Studio
- Getting Started with Next.js
- Connecting our Sanity App to our Next app
- Querying our Data with GROQ
- Building our Next.js pages
- Styling with CSS and Google Fonts
- Adding in our images
- Adding in our AirBnB property information styling
- Adding in Review information
- Adding in Location information
- Adding Links with Next.js
- Building our AirBnB’s home page
- Building our NavBar component
- Adding our AirBnB logo
- Adding a Cluster Map
- Conclusion