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
30 Days to Learn LaravelLaracasts 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