Next Js And Google Maps Api : Location-Based Ride Requests

Unlock the World: Geo-Enabled App Development with Next.js and Google Maps API with Supabase in the backend

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