Build an AirBnb Clone with Sanity.io and Next.js! Using Schemas and Types

Build an AirBnb Clone with Sanity.io and Next.js! Using Schemas and Types

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

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: https://developers.google.com/maps

sanity next react javascript web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

Hire dedicated JavaScript Developers who are proficient in AngularJS, ReactJS, NodeJS, & VueJS frameworks. Get flexible hiring models as per your business requirements.

Why And Where To Use ReactJS For Web Development?

There are numerous frameworks and libraries accessible in this advanced digital world that can help you with agile web development. But…

Next.js vs. React: The Developer Experience

The developer experience for Next.js vs. React is similar in some ways and drastically different in others. In the world of React, Next.js has become a popular framework for “hitting the ground running.” Next.js builds on top of React to provide a streamlined development experience. There is definitely a different experience when building a project with Next.js vs. React.

Tendencias Javascript y Web 2020. React, Next.js, Deno

Tendencias Javascript y Web 2020. React, Next.js, Deno. En este video te voy a mencionar algunas herramientas y frameworks que fueron, seguirán siendo o van a ser tendencia en este 2020. Entre ellas están React, Next.js, Deno, los Headless CMS como Strapi, entre otros.