Graphql With Node & React - Build Car Rental App With Apollo

Build Full Stack Car Rental App in Node.js and React with GraphQL, Apollo Server and Client | From Dev to Deployment

What you'll learn

Master the Power of GraphQL

Build highly scalable GraphQL APIs

Build a Real-World Car Rental App

Real Time Notifications with GraphQL Subscriptions & Websockets

Learn & Integrate Apollo Server & Client

Create and Manage a Shared Resources/Package

Integrate Google Maps for Location & Markers

Create a Powerful Admin Dashboard

Integrate Stripe for Payment

Build an Intuitive Booking System with Invoices

Implement Advanced Search and Filters

Handle Errors Like a Pro

Secure User Authentication Systems

Role Base Authorization Access

Manage Users, Forgot & Reset Passwords

Requirements

Must Know Basics of Nodejs & Express API

Must Know Basics of MongoDB

Must Know Basics of React

Must Know Basics of Tailwind CSS

Nothing else, YOU & YOUR TIME

Description

Welcome to our in-depth course on building modern web applications using GraphQL with Node.js, React and Apollo! Whether you're a beginner looking to dive into full-stack development or an experienced developer aiming to enhance your skills, this course is designed to guide you through every step of the process in a clear and engaging way.Course Overview:In this course, you’ll learn how to build a fully functional car rental application from scratch. We’ll start with the basics and work our way through setting up your environment, defining your data models, and integrating powerful tools like Apollo Client and Apollo Server.What You’ll Learn:Understanding GraphQLDiscover what GraphQL is, how it differs from REST, and why it's such a game-changer for modern APIs. Get hands-on with Apollo Client and Apollo Server.Building the Go Rental ApplicationCreate your project, connect to MongoDB, and integrate Apollo Server.Define your Car schema and resolvers to manage car data.Managing Car ResourcesBuild, read, update, and delete car data. Learn how to seed your database with sample data.Shared Resources among Frontend & BackendSet up a shared package that can be used on the frontend and backend after installation.Real-Time Booking NotificationsSend real-time booking notifications to admin with GraphQL Subscripts & WebsocketsDeveloping the React FrontendSet up your React application, integrate ShadCN for a sleek UI, and connect it with Apollo Client.Render car data, handle images, and build a responsive UI with components like loaders and headers. Integrating Google MapsIntegrate Google Maps for location-based features, including auto-complete and map rendering.Enable users to search for cars based on location and available dates.Advanced Features: Search, Pagination, and FiltersImplement search functionality, filters, and pagination both on the backend and frontend.Error HandlingCreate robust error-handling mechanisms for both backend and frontend, including user-friendly notifications and alerts.Authentication and AuthorizationBuild user authentication with registration, login, and secure password management.Integrate GraphQL Shield for authorization to control access to different parts of your app.User Profile ManagementAllow users to update their profiles and passwords, upload avatars, and integrate Cloudinary for image storage.Implement a secure process for users to recover their passwords.Car Booking SystemDevelop a car booking system, including a date picker component and payment integration with Stripe.Handle booking details, and updates, and generate invoices.Handling User ReviewsCreate and manage car reviews, allowing users to leave feedback and view ratings.Admin PanelBuild an admin dashboard to manage cars, bookings, users, and reviews.Add features for handling FAQs and coupon codes to enhance the app’s functionality.DeploymentLearn how to prepare your application for deployment and deploy it on Render.Why Enroll?Hands-On Experience: Build a real-world rental application from start to finish.Comprehensive Coverage: Cover every aspect of development, from setting up your environment to deploying your app.Engaging Content: Follow clear, easy-to-understand instructions with practical examples.Future-Proof Skills: Master GraphQL, Node.js, and React – technologies in high demand today.Join us in this course and transform your development skills with practical, hands-on learning!

Overview

Section 1: Introduction

Lecture 1 Introduction

Section 2: DEMO OF CAR RENTAL APP

Lecture 2 DEMO of Car Rental Project

Section 3: Setting Up Environment

Lecture 3 Setting Up Tools & Environment

Lecture 4 Install MongoDB On MacOS

Lecture 5 Install MongoDB On Windows

Section 4: Source Code of Project

Lecture 6 How to get Source Code & Follow along?

Section 5: What is GraphQL & Why we need it?

Lecture 7 What is GraphQL? REST vs GraphQL

Lecture 8 Apollo Client & Apollo Server

Section 6: Lets start Go Rental Application

Lecture 9 Create Project and Basic Setup

Lecture 10 Connect to MongoDB Database

Lecture 11 Integrate Apollo Server

Lecture 12 Define Car Type Defs

Lecture 13 Create Car Resolvers

Lecture 14 Define Car Controllers

Section 7: Handle Car Resource & Seeder

Lecture 15 Create Car Model

Lecture 16 Create & Save New Car

Lecture 17 Get Car Details by ID

Lecture 18 Update Car Details

Lecture 19 Delete Car

Lecture 20 Create Car Seeder

Section 8: Shared Resource Package

Lecture 21 Create Shared Package

Lecture 22 Use Car Interface from Shared in Server

Section 9: Go Rental Frontend with React & Apollo Client

Lecture 23 Create new React App & Go Rental Components

Lecture 24 Integrate ShadCN for UI

Lecture 25 Header & Footer Component

Lecture 26 Integrate Apollo Client

Lecture 27 Render Cars on Homepage

Lecture 28 Render Car Details

Lecture 29 Render Car Image Slider

Lecture 30 Star Ratings & Loader Component

Section 10: Search, Pagination & Filters

Lecture 31 Search by ID / Keyword - Backend

Lecture 32 Implement Filters - Backend

Lecture 33 Implement Pagination - Backend

Lecture 34 Search by keyword - Frontend

Lecture 35 Implement Filters - Frontend

Lecture 36 Implement Pagination - Frontend

Lecture 37 Fixing Filter BUG

Section 11: Error Handling - Backend & Frontend

Lecture 38 Create Error Wrapper for Backend

Lecture 39 Not Found Error Handler

Lecture 40 Frontend Error Toast

Lecture 41 Get GraphQL & Network Errors [OPTIONAL]

Lecture 42 Error or Success Alert

Section 12: Authentication - Backend & Frontend

Lecture 43 Create User Model

Lecture 44 User Schema & User Resolvers

Lecture 45 Register & Save User

Lecture 46 Encrypt User Password & Handle Duplicate Key Error

Lecture 47 Login User & Save Token in httpOnly Cookie

Lecture 48 Register User Frontend

Lecture 49 Create Register Zod Schema for Validation

Lecture 50 Login User

Section 13: Integrate GraphQL Shield for Authorization

Lecture 51 Integrate GraphQL Shield

Lecture 52 Get Current User Details

Lecture 53 Define isAuth & isAdmin permissions

Lecture 54 Fetch & Set User, isAuthenticated - Frontend

Lecture 55 Display User in Header & User Menu

Lecture 56 Protect & Authorize Frontend Routes

Lecture 57 Logout User

Section 14: Handle User Profile

Lecture 58 Update User Profile - Backend

Lecture 59 Update User Profile - Frontend

Lecture 60 Update User Password - Backend

Lecture 61 Update User Password - Frontend

Lecture 62 Integrate Cloudinary for Images

Lecture 63 Upload User Avatar - Backend

Lecture 64 Upload User Avatar - Frontend

Section 15: Forgot & Reset Password

Lecture 65 Generate Forgot Password Token & Template

Lecture 66 Setup Nodemailer for sending Emails

Lecture 67 Send Forgot Password Email

Lecture 68 Reset Password - Backend

Lecture 69 Reset Password - Frontend

Lecture 70 Send Emails in Production (Real Inbox)

Section 16: Handle Car Booking

Lecture 71 Create Booking Model

Lecture 72 Create New Booking - Backend

Lecture 73 Car Date Picker Component

Lecture 74 Handle Booking Form

Lecture 75 Create New Booking - Frontend

Lecture 76 Payment Method Page

Lecture 77 Update Booking Method

Lecture 78 Disable Booked Dates on Date Picker

Lecture 79 Get Current User Bookings & Stats

Lecture 80 Render Current User Bookings & Stats

Section 17: Integrate Payment & Generate Invoice

Lecture 81 Integrate Stripe for Payment

Lecture 82 Create Booking Checkout Session

Lecture 83 Setup Stripe Webhook

Lecture 84 Setup Stripe Webhook [WINDOWS]

Lecture 85 Update Booking Status on Payment

Lecture 86 Booking Invoice Component

Lecture 87 Generate & Download Invoice

Lecture 88 Auto Delete Unpaid Bookings from DB

Section 18: Integrate Google Maps - AutoComplete, Maps

Lecture 89 Integrate Google Maps API

Lecture 90 Generate Car Coordinates before Saving

Lecture 91 Google Map Places AutoComplete

Lecture 92 Render Google Map on Homepage

Lecture 93 Render Google Advance Marker for Each Car

Section 19: Search with Location & Dates Filter

Lecture 94 Search Component & Set Values in Query

Lecture 95 Search by Location Filter with Radius

Lecture 96 [BUG FIXED] Load Google Maps API

Lecture 97 Available Car Between Dates Filter

Lecture 98 Filter by Budget

Section 20: Handle User Reviews & Ratings

Lecture 99 Create Review Model

Lecture 100 Create/Update Reviews - Backend

Lecture 101 Create/Update Reviews - Frontend

Lecture 102 Render All Car Reviews

Lecture 103 Can User Review

Section 21: ADMIN PANEL - Dashboard, Cars

Lecture 104 Create Admin Layout

Lecture 105 Get Dashboard Stats between Dates

Lecture 106 Render Booking Stats

Lecture 107 Render Chart [Sales, Bookings]

Lecture 108 [BUG FIXED] Sales & Booking Incorrect Data

Lecture 109 Get & Render All Cars

Lecture 110 Create New Form & Zod Schema

Lecture 111 Create New Car

Lecture 112 Handle Car Images

Lecture 113 Update Car Details - Backend

Lecture 114 Update Car Details with Images - Frontend

Lecture 115 Delete Car Image

Lecture 116 Delete Car with Images

Lecture 117 Admin Mobile Menu

Section 22: ADMIN PANEL - Bookings, Users, Reviews

Lecture 118 Render All Booking

Lecture 119 Update Booking Dialog

Lecture 120 Update Booking

Lecture 121 Handle Booking Invoice

Lecture 122 Delete Booking

Lecture 123 Render All Users

Lecture 124 Update User Details

Lecture 125 Delete User

Lecture 126 Render All Reviews

Lecture 127 Delete Review

Section 23: ADMIN PANEL - FAQs, Coupons

Lecture 128 FAQ Model & Get All FAQs

Lecture 129 Create New FAQ & Render FAQs on Car Details Page

Lecture 130 Update FAQ

Lecture 131 Delete FAQ

Lecture 132 Coupon Code Model

Lecture 133 Create Coupon Code & Get All Coupon Codes

Lecture 134 Update & Delete Coupon

Lecture 135 Apply Coupon Code

Lecture 136 Protect All Queries & Mutations

Section 24: GraphQL Subscriptions & Web-sockets

Lecture 137 GraphQL Subscriptions & Setup Websockets

Lecture 138 New Booking Notification

Section 25: Not Found, Mode Toggle

Lecture 139 Not Found Page

Lecture 140 Mode Toggle

Lecture 141 Fixing Small Issues

Section 26: Deployment

Lecture 142 Generate Backend, Frontend & Shared Build Scripts

Lecture 143 Prepare App for Deploy

Lecture 144 Deploy on Render

Section 27: End of the Course

Lecture 145 Congratulations

Any Developer who wants to learn a new Skill,Anyone who wants to learn GraphQL with Node & React,Anyone who wants to leran GraphQl with Apollo,Anyone who wants to upscale in Full Stack Development