/airbnb-sanity-frontend

This is the frontend for my AirBnb Project built using Next.js and Sanity.io

Primary LanguageJavaScript

AirBnb Sanity.io Frontend

This repository is to support my tutorial on how to build an AirBnb Clone with structured 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 backend 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

Getting Started

First, install the packages:

npm i

Second, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.