Build Full stack Next js Application : Next Js, React Js, Tailwind Css, Google Place Api, Google map

Veröffentlicht am: 13 Juli 2023
auf dem Kanal: TubeGuruji

21,801

628

Learn how to build a full stack Next.js application with React, Tailwind CSS, Google Places API, and Google Maps.

In this video, we will build a simple application that allows users to search for places on Google Maps. We will use Next.js to render our pages statically, React to build our user interface, Tailwind CSS to style our application, and Google Places API and Google Maps to power our search functionality.

👉App Demo : https://nextjs-google-place-app.verce...

👉Hostinger Hosting Service: https://hostinger.com?REFERRALCODE=1G...

👉Source Code Github : https://github.com/rrs301/nextjs-goog...

👉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 Js, Ta...

👉Build Full Stack Next Js 13 app : Next Js, React, Tailwind Css, Firebase, NextAuth :    • Build Full Stack Next Js 13 app : Next Js,...

👉Learn React Native By Building an Educational App (Complete PlayList):    • Learn React Native By Building an Educatio...

👉Full Stack AI Chatbot : React Native, Next.js 13, Google Bard API, Expo :    • Build Full Stack React Native App : React ...

🔴Follow us on Instagram:   / tubeguruji

🔴Telegram Channel: https://t.me/tubeguruji

🔴Buy Me a Coffee: https://www.buymeacoffee.com/tubegurujiw

#nextjs #react #tailwindcss #googleapi

00:00:00 Introduction
00:03:36 Technology Using for This Course
00:05:06 Create Next App
00:07:01 Folder Structure & Run App
00:10:59 Install Tailwind Css
00:13:49 Side Nav Bar
00:29:49 Search Bar
00:33:21 Category List
00:45:49 Business List Component
01:00:53 Generate Google Place Api
01:05:11 Create Google Place API
01:14:13 Get/Fetch Places From API
01:22:45 Iterate Business Place
01:27:35 Google Place Photo
01:34:45 useContext()
01:39:18 Shimmer Loading Effect
01:47:25 Get Current User Location Cord
01:57:31 Integrate Google Map
02:01:50 Show User On Google Map
02:07:43 Business Markers on Map
02:15:42 Show Selected Business on Map
02:24:00 Calculate Distance
02:40:31 Search Business
02:42:08 Quick Update/Fix

Auf dieser Seite können Sie das Online-Video Build Full stack Next js Application : Next Js, React Js, Tailwind Css, Google Place Api, Google map mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer TubeGuruji 13 Juli 2023 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 21,801 Mal angesehen und es wurde von 628 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!

3,223

127