Course Hive
Search

Welcome

Sign in or create your account

Continue with Google
or
Build Location-Based NextJs13 App : Google Place Api, Google Map, React, Tailwind Css, NextAuth
Play lesson

Next.Js Full Stack Project Tutorial - Build Location-Based NextJs13 App : Google Place Api, Google Map, React, Tailwind Css, NextAuth

Master Next.js & React Full Stack Development: Dive into AI-Powered App Creation with TubeGuruji – Build, Deploy, Conquer!

5.0 (2)
18 learners

What you'll learn

Learn to build and deploy full-stack applications using Next.js, React, and Tailwind CSS.
Master the integration of various APIs such as Google Maps, Clerk, and Firebase within Next.js apps.
Develop proficiency in using NextAuth for authentication in full-stack applications.
Gain skills in integrating AI technologies to enhance full-stack application functionalities.

This course includes

  • 346 hours of video
  • Certificate of completion
  • Access on mobile and TV

Summary

Keywords

Full Transcript

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-finder-nextjs 👉Hostinger Hosting Service: https://hostinger.com?REFERRALCODE=1GAME84 👉Complete React Native Course: https://www.udemy.com/course/learn-and-build-react-native-app-from-scratch-for-beginners 👉Full Stack Blog Website using React Js, Tailwind Css, Vite | React Js beginner tutorial : https://youtu.be/l_moN1w-vWY 👉Build Full Stack Next Js 13 app : Next Js, React, Tailwind Css, Firebase, NextAuth : https://youtu.be/Ai7HJH2I08s 👉Learn React Native By Building an Educational App (Complete PlayList): https://www.youtube.com/playlist?list=PLaBeGKL1tOU0FuOxkLHFy_zOlIqOWUcNc 👉Full Stack AI Chatbot : React Native, Next.js 13, Google Bard API, Expo : https://youtu.be/LhKguWePLp0 🔴Follow us on Instagram: https://www.instagram.com/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

Course Hive

Continue this lesson in the app

Install CourseHive on Android or iOS to keep learning while you move.

Related Courses

FAQs

Course Hive
Download CourseHive
Keep learning anywhere