What you'll learn
Understand Next JS Fundamentals: key concepts and features of Next JS, including server-side rendering and the overall structure of Next JS projects
Master Google Maps API Integration: gain proficiency in integrating Google Maps API into Next JS applications
Implement Location-Based Services: Develop to ability to implement location-based services in web applications
Utilize Supabase Geo-Queries: Explore and implement Supabase's powerful geoqueries to enhance location-based functionalities
Requirements
Javascript
React JS
Description
Welcome to: Mastering Google Maps API in Next.JS: Building a Simplified Ride Request App. Learn and practice Next.JS by creating a location-based ride request app with the the Google Maps API. This hands-on project-based course is designed for developers eager to elevate their skills in Next.js and seamlessly integrate Google Maps API for powerful geo-enabled applications. Discover the art of building a ride request app without the complexities of real-time features, connecting users to static drivers for a streamlined learning experience. Throughout the course, we leverage the robust tech stack of Next.js, Google Maps API, and Supabase for a seamless development process. The curriculum is crafted with clarity in mind, making it accessible for developers with basic knowledge of React JS. Guided by expert instruction, you'll gain a deep understanding of the intricacies of Next.js and Google Maps API integration, providing a solid foundation for future projects. Upon completion, you'll not only possess a fully functional ride request app but also the skills to create diverse geo-enabled applications. From ride-sharing platforms and delivery apps to location-based social networks and interactive map-driven e-commerce platforms, the possibilities are limitless. Enroll now to unlock the world of geo-enabled app development and take your coding skills to new heights.I will be using:WindowsNext.JS 14React.JS 18Node V20.9Javascript, instead of TypescriptNOTES: I haven't done the user authentication yet. It will do if requested by students.
Overview
Section 1: Introduction
Lecture 1 Introduction / Welcome to the course
Lecture 2 Creating a Next JS app
Lecture 3 What's inside a Next JS app
Lecture 4 Routing and Navigation
Lecture 5 Components in Next JS
Lecture 6 Another way of navigating (introducing client side components)-Part 1
Lecture 7 Another way of navigating (introducing client side components)-Part 2
Section 2: Next Js and Google Maps API
Lecture 8 Getting started with the Google Maps API
Lecture 9 Next JS/Google Maps API - Integration - Part 1
Lecture 10 Next JS/Google Maps API - Integration - Part 2
Lecture 11 Next JS/Google Maps API - Integration - Part 2
Lecture 12 Next JS/Google Maps API - Integration - Part 3
Lecture 13 Using Markers
Lecture 14 Using Markers - Part 2 : Custom icons
Lecture 15 Using Markers - Part 3 : Marker options
Lecture 16 Using Markers - Part 4: Marker events
Lecture 17 Using Markers - Part 5 : The InfoWindow component
Section 3: Getting started with our app
Lecture 18 Getting started with ou app
Lecture 19 Making a trip request
Lecture 20 Enabling the Google Places API
Lecture 21 Using the Google Places Search Results (origin)
Lecture 22 Using the Map Object / Applying restrictions on Plcaes Search
Lecture 23 Using the Google Places Search Results (destination)
Lecture 24 Using the Directions API query result
Section 4: Getting started with Supabase for the backend
Lecture 25 Introducing Supabase
Lecture 26 Creating a project in Supabase
Lecture 27 Fetching data with Supabase
Lecture 28 Fetching data from the server
Lecture 29 Creating a Geo-Enabled table in Supabase
Lecture 30 Inserting data in the "requests" table
Section 5: Finalizing the app
Lecture 31 Building the request detail page - part 1
Lecture 32 Building the request detail page - part 2
Lecture 33 Using the request data - part 1
Lecture 34 Using the request data - part 2
Lecture 35 Creating the drivers table / Adding drivers
Lecture 36 Fetching the drivers table
Lecture 37 Filtering the drivers by distance - part 1
Lecture 38 Filtering the drivers by distance - part 2
Lecture 39 Drivers' InfoWindow
Lecture 40 Directions/Route between drivers and the request origin
Lecture 41 Deploying the app to vercel
Lecture 42 Getting a domain name / Updating Google Maps Keys and Credentials
Map Lovers,Anyone Interested in Location-Based App Development,React Developers,Supabase learners



Download link

rapidgator.net:

Código:

https://rapidgator.net/file/ecbef11743440173d66cbc05f3f7ced2/bnzbi.Next.Js.And.Google.Maps.Api..LocationBased.Ride.Requests.part1.rar.html
https://rapidgator.net/file/03011bbf7137f233eac0d021307d0a8b/bnzbi.Next.Js.And.Google.Maps.Api..LocationBased.Ride.Requests.part2.rar.html
https://rapidgator.net/file/3327dad685000ca75faea3bb5d2236cb/bnzbi.Next.Js.And.Google.Maps.Api..LocationBased.Ride.Requests.part3.rar.html
https://rapidgator.net/file/db10dc5e729e4e3171c0227ed4441274/bnzbi.Next.Js.And.Google.Maps.Api..LocationBased.Ride.Requests.part4.rar.html

uploadgig.com:

Código:

https://uploadgig.com/file/download/fe98c44C08D3760d/bnzbi.Next.Js.And.Google.Maps.Api..LocationBased.Ride.Requests.part1.rar
https://uploadgig.com/file/download/3fE544787cca67a7/bnzbi.Next.Js.And.Google.Maps.Api..LocationBased.Ride.Requests.part2.rar
https://uploadgig.com/file/download/9c571Cc643c63b15/bnzbi.Next.Js.And.Google.Maps.Api..LocationBased.Ride.Requests.part3.rar
https://uploadgig.com/file/download/9405AC87Ec06ded9/bnzbi.Next.Js.And.Google.Maps.Api..LocationBased.Ride.Requests.part4.rar

ddownload.com:

Código:

https://ddownload.com/zgqk08wu5ml1/bnzbi.Next.Js.And.Google.Maps.Api..LocationBased.Ride.Requests.part1.rar
https://ddownload.com/1ihj73s9pu8i/bnzbi.Next.Js.And.Google.Maps.Api..LocationBased.Ride.Requests.part2.rar
https://ddownload.com/eun1o2bdg37k/bnzbi.Next.Js.And.Google.Maps.Api..LocationBased.Ride.Requests.part3.rar
https://ddownload.com/k6fazcsdxrxm/bnzbi.Next.Js.And.Google.Maps.Api..LocationBased.Ride.Requests.part4.rar