YoVDO

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

Offered By: Code with Ania Kubów via YouTube

Tags

Next.js Courses Computer Science Courses Web Development Courses Content Management Systems Courses Google Fonts Courses GROQ Courses

Course Description

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


Taught by

Code with Ania Kubów

Related Courses

30 Days to Learn Laravel
Laracasts
3D Graphics for Web Developers
Pompeu Fabra University via FutureLearn
A Beginner’s Guide to Web Development with HTML5
Packt via FutureLearn
Accessibility Audit
Amazon Web Services via AWS Skill Builder
Expanding Your JS Skills with Angular
A Cloud Guru