I built an AirBnB clone with structured content! Using Sanity.io and Next.js
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
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 code for my GitHub can be found here:
- https://github.com/kubowania/airbnb-s...
- https://github.com/kubowania/airbnb-s...
Google Maps API info can be found here: https://developers.google.com/maps
____
In most videos I use Tabnine as my A.I autocompletion tool. You can download it for free here: http://bit.ly/tabnine-top-tool
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 for weekly coding tips from my newsletter partnership: https://bit.ly/JS-tips
You can also find me on:
Twitter: / ania_kubow
Instagram: / aniakubow
#codingbootcamp #coding
Watch video I built an AirBnB clone with structured content! Using Sanity.io and Next.js online, duration hours minute second in high quality that is uploaded to the channel Code with Ania Kubów 01 January 1970. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 117,352 times and liked it 2.9 thousand visitors.
