The backend for our Airbnb App, built using Sanity.io.

Overview

AirBnb Sanity.io Backend

This repository is to support my tutorial on how to build an AirBnb Clone with strucutred content using Sanity.io and Next.js. View the full tutorial here 📺

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 ( https://www.sanity.io/ )

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

If you get stuck, the Sanity community I was talking about can be found here on the Sanity Exchange (https://www.sanity.io/exchange) and the Sanity Slack Community (https://slack.sanity.io/).

The front end to my project, can be found here

Google Maps API info can be found here


In most videos I use Tabnine as my A.I autocompletion tool. You can download it for free here

If you would like to buy me a coffee, well thank you very much that is mega kind! : https://www.buymeacoffee.com/aniakubow

Sign up here for weekly coding tips from my newsletter partnership.

You can also find me on:
Twitter: https://twitter.com/ania_kubow
Instagram: https://www.instagram.com/aniakubow

You might also like...

AirBnb Javascript Style Guide'ının Türkçe diline çevrildiği repository

Airbnb JavaScript Stil Kılavuzu() { JavaScript'e büyük ölçüde mantıklı/makul bir yaklaşım Not: Bu kılavuz sizin Babel kullandığınızı varsayar ve babel

Dec 29, 2022

Airbnb-like project

Solution for a challenge from Devchallenges.io. Demo | Challenge Table of Contents Built With How to use Contact Built With NextJS Styled Components H

Jul 24, 2022

📆 The modern, open source "Airbnb style" date picker.

Date Picker A pretty, modern date picker. Coming soon. 💡 Get Started wip wip 🧪 Testing pnpm test 📈 Changelog Please see our releases page for more

Oct 11, 2022

Recreating the Airbnb frontend with Vivid!

Recreating the Airbnb frontend with Vivid!

Airbnb Clone Building an Airbnb clone with Vivid - the in-browser styling editor that makes Tailwind CSS even faster. Hacktoberfest 2022! Getting Star

Dec 19, 2022

A boilerplate for ExpressJs projects configured with ESLint, Prettier & Airbnb Setup. The boilerplate utilises RESTful architecture and uses Mongodb.

A boilerplate for ExpressJs projects configured with ESLint, Prettier & Airbnb Setup. The boilerplate utilises RESTful architecture and uses Mongodb.

ExpressJs-Boilerplate An ExpressJs boilerplate configured with ESLint, Prettier & Airbnb Setup. The boilerplate utilises RESTful architecture and uses

Mar 8, 2023

A minimal e-commerce store using Gatsby, SANITY, Stripe, Use-Shopping-Cart and Netlify

🏪 Gatsby Starter Stripemart Like a supermarket but for Stripe. No ongoing monthly costs. Perfect for artists, creators and independent builders doing

Nov 14, 2022

Gatsby-Formik-contact-form-with-backend-panel - Full working contact form with backend GUI panel.

Gatsby minimal starter 🚀 Quick start Create a Gatsby site. Use the Gatsby CLI to create a new site, specifying the minimal starter. # create a new Ga

Jan 2, 2022

Venni backend - The backend of the Venni client apps implementing the credit card payments, matching algorithms, bank transfers, trip rating system, and more.

Cloud Functions Description This repository contains the cloud functions used in the Firebase backend of the Venni apps. Local Development Setup For t

Jan 3, 2022
Owner
Ania Kubow
I make #JavaScriptGames for fun!
Ania Kubow
Generate link preview using our app, API or our NPM package.

get-link-preview ?? View the link preview using our App. Use the API to generate link preview in your app or use the NPM package to use the custom hoo

Siddhi Gate 25 Dec 21, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
BMI Calculator can give us the bmi result of our bmi on the basis of our corresponding height and weight.

BMI means body mass index. Body Mass Index (BMI) is a person's weight in kilograms divided by the square of height in meters.

Bipronath Saha 1 Jan 20, 2022
MUI Core is a collection of React UI libraries for shipping new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components.

MUI Core MUI Core contains foundational React UI component libraries for shipping new features faster. Material UI is a comprehensive library of compo

MUI 83.6k Dec 30, 2022
My personal website – Built using Next.js, TypeScript, MDX, Sanity.io and Tailwind

kenaqshal.com Framework: Next.js Database: PlanetScale ORM: Prisma Authentication: NextAuth.js Deployment: Vercel CMS: Sanity Styling: Tailwind CSS Ov

Ken Aqshal Bramasta 6 Nov 24, 2022
Stablo is a minimal blog website template built with Next.js, TailwindCSS & Sanity CMS

Stablo Blog Template - Next.js & Sanity CMS Stablo is a JAMStack Starter template built with Next.js, Tailwind CSS & Sanity CMS by Web3Templates. Clic

Web3Templates 159 Dec 30, 2022
Student reviews for OMS courses. Built with NextJS and Typescript. Backed by Sanity CMS. Deployed on Vercel.

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

OMS Tech 27 Dec 3, 2022
This project, is about restructuring our Awesome books app code and make it more organized using modules and ES6 sintax. Built with HTML, CSS, JavaScript.

Awesome Books with ES6 This project, is about restructuring our Awesome books app code and make it more organized using modules and ES6 sintax. Built

Dino Ronald Quispe Arias 7 Jul 21, 2022