Build Location-Based NextJs13 App : Google Place Api, Google Map, React, Tailwind Css, NextAuth
In this video, I will show you how to build a full-stack location-based app with Next.js 13, Google Maps, Google Places API, React, Tailwind CSS, and NextAuth.js.
We will start by creating a new Next.js app and installing the necessary dependencies. Then, we will use NextAuth.js to add authentication to our app so that users can sign in and sign out. Then, we will use the Google Maps API to create a map and add markers to the map. We will also use the Google Places API to search for places near the user's current location.
Finally, we will use NextAuth.js to add authentication to our app so that users can sign in and sign out.
By the end of this video, you will have learned how to build a full-stack location-based app with Next.js 13, Google Maps, Google Places API, React, Tailwind CSS, and NextAuth.js.
🔗 GitHub Repository: https://github.com/rrs301/restaurant-...
👉Hostinger Hosting Service: https://hostinger.com?REFERRALCODE=1GAME84
👉Complete React Native Course: https://www.udemy.com/course/learn-an...
👉Full Stack Blog Website using React Js, Tailwind Css, Vite | React Js beginner tutorial : • Full Stack Blog Website using React J...
👉Build Full Stack Next Js 13 app : Next Js, React, Tailwind Css, Firebase, NextAuth : • Build Full Stack Next Js 13 app : Nex...
👉Learn React Native By Building an Educational App (Complete PlayList): • Learn React Native By Building an Edu...
👉Full Stack AI Chatbot : React Native, Next.js 13, Google Bard API, Expo : • Build Full Stack React Native App : R...
🔴Follow us on Instagram: / tubeguruji
🔴Telegram Channel: https://t.me/tubeguruji
🔴Buy Me a Coffee: https://www.buymeacoffee.com/tubegurujiw
#NextJS #ReactJS #TailwindCSS #googlemap #NextAuth #googleplace#FullStackDevelopment #webapplication
=========Course Content Chapter==========
00:00:00 Introduction
00:03:09 Technology
00:05:06 Create NextJs/React App
00:07:13 Files & Folder Explain
00:11:04 NextAuth.js Authentication
00:28:44 Header/NavBar
00:39:54 Add Google Font
00:41:15 Update App Layout
00:43:24 Category/Food Type List
00:54:09 Radius & Rating Selection
01:06:45 Integrate Google Map
01:13:42 Custom Google Map Styling
01:18:30 Display User Location on Map
01:27:15 Google Place API
01:33:03 Make Google Place API Call
01:44:48 Display Place List
02:04:28 Business Marker on Map
02:19:05 Distance & Direction
02:29:13 Final
