Next.Js Full Stack Project Tutorial - Build Full stack Next js Application : Next Js, React Js, Tailwind Css, Google Place Api, Google map

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

Build Full stack Next js Application javascript react Next Js React Js Tailwind Css FullStack Google Place API FullStack NextJs React Tailwindcss App Google place api nextjs app google maps api places google maps app tutorial next js tutorial for beginners

Full Transcript

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.vercel.app/ 👉Hostinger Hosting Service: https://hostinger.com?REFERRALCODE=1GAME84 👉Source Code Github : https://github.com/rrs301/nextjs-google-place-app 👉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 #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

Continue this lesson in the app

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

Related Courses

ACCUPLACER Algebra & Functions Full COURSE - Updated weekly!

⭐ 4.0

8 ratings

3.5 hours

Affiliate Marketing Full Free Course (New Updated) by WsCube Tech

Embark on Your Affiliate Marketing Journey: Master Skills, Boost Earnings & Unlock Success with WsCube Tech's Comprehensive Step-by-Step Guide – Learn to Earn Big from Top Niches and Strategies, Whether You're a Beginner or Pro!

⭐ 5.0

3 ratings

12.3 hours