Building an Airbnb Clone with Sanity.io and Next.js
Offered By: Code with Ania Kubów via YouTube
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
Complete beginners introduction to web developmentUdemy Responsive Web Design Essentials - HTML5 CSS3 Bootstrap
Skillshare CRUD Angular - Node - MEAN
Udemy Code your own portfolio – HTML & CSS basics
Skillshare Typography for Website
YouTube