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-sanity-backend
- https://github.com/kubowania/airbnb-sanity-frontend
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: https://twitter.com/ania_kubow
Instagram: https://www.instagram.com/aniakubow
#codingbootcamp #coding
Видео I built an AirBnB clone with structured content! Using Sanity.io and Next.js канала Code with Ania Kubów
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-sanity-backend
- https://github.com/kubowania/airbnb-sanity-frontend
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: https://twitter.com/ania_kubow
Instagram: https://www.instagram.com/aniakubow
#codingbootcamp #coding
Видео I built an AirBnB clone with structured content! Using Sanity.io and Next.js канала Code with Ania Kubów
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
Next.js 12 is a BeastI built the same app 10 times // Which JS Framework is best?Build and sell your own API $$$ (super simple!)🔴 Airbnb REACT.JS Challenge | Day 1 (Next.js, Tailwind CSS, Calendar Picker, Mapbox)Sanity.io Crash Course | Headless CMSHow to build a static website with Gatsby and Sanity.ioBuild a Recipe Blog using Node.js and MongoDB (Express, EJS, Mongoose & more...) CRUD🔴 Build an Airbnb Clone with REACT JS for Beginners!Content Platforms Explained in 100 Seconds // Build your own with Sanity🔴 Airbnb REACT.JS Challenge | Day 2 (Frontend Build - Next.js, Tailwind CSS, SSG, API)Build and Deploy THE BEST Modern Blog App with React | GraphQL, NextJS, Tailwind CSS12HR+ YouTube Coding Bootcamp 2021!Client-Side VS Server-Side Rendering - Data Fetching with Next.jsLet's build Spotify with REACT.JS! (Next.js, Tailwind CSS, Spotify API, NextAuth, Recoil) 🔥🚀Build a Fullstack App With Strapi and Next.js | 1-Hour Tech Talk | DigitalOceanPersonal/Agency Website | SEO Optimized Responsive Portfolio Website Using Next.jsFrom Figma to Github using AnimaBuild and Deploy a Modern Real Estate App | React Website TutorialBuild a Responsive Online Portfolio from scratch!