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

Pubblicato il: 13 luglio 2023
sul canale di: 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

In questa pagina del sito puoi guardare il video online Build Full stack Next js Application : Next Js, React Js, Tailwind Css, Google Place Api, Google map della durata di ore minuti seconda in buona qualità , che l'utente ha caricato TubeGuruji 13 luglio 2023, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 21,801 volte e gli è piaciuto 628 spettatori. Buona visione!

3,223

127