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

Опубликовано: 13 Июль 2023
на канале: 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


На этой странице сайта вы можете посмотреть видео онлайн Build Full stack Next js Application : Next Js, React Js, Tailwind Css, Google Place Api, Google map длительностью часов минут секунд в хорошем качестве, которое загрузил пользователь TubeGuruji 13 Июль 2023, поделитесь ссылкой с друзьями и знакомыми, на youtube это видео уже посмотрели 21,801 раз и оно понравилось 628 зрителям. Приятного просмотра!