GraphQL from Scratch - Realtime MERN Stack with React Node
4.8 (25 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,241 students enrolled

GraphQL from Scratch - Realtime MERN Stack with React Node

Learn GraphQL from Scratch with MERN Stack (Mongo Express React Node) and Firebase to build Truly Realtime Web Apps
4.8 (25 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,241 students enrolled
Created by Ryan Dhungel
Last updated 6/2020
English
English [Auto]
Current price: $13.99 Original price: $19.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 19 hours on-demand video
  • 2 articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • GraphQL from Scratch
  • Mastering GraphQL Queries Mutations and Subscriptions
  • Build FullStack GraphQL Project with MERN Stack
  • Apollo GraphQL Server with Node Express MongoDB
  • Apollo GraphQL Client with React and Firebase
  • Firebase Authentication (Client Side / Server Side)
  • Realtime GraphQL Subscriptions
  • CRUD (Create Read Update Delete) with MongoDB
  • Multiple Image Uploads
  • Authentication and Authorization
  • User Dashboard with Custom Layout
  • Private and Public Routing
  • Reusable React Components
  • 100% Usage of React Hooks
  • State Management with Context API and Apollo Client Cache
  • Using Latest React Router Hooks
  • Using Latest Apollo GraphQL Hooks for Queries Mutations and Subscriptions
  • Deployment to Heroku
  • Plus Tons of Real World Examples that you can use in your future projects
Course content
Expand all 137 lectures 19:13:46
+ GraphQL Node Server, Type Definitions and Resolvers
11 lectures 01:45:50
Download source code bundle for each lectures
00:33
Express server
11:02
GraphQL server
10:54
GraphQL express server
09:23
Multiple TypeDefs
08:45
Multiple resolvers
09:51
Mongo atlas setup
11:05
Local MongoDB connection
06:26
Post query
11:18
Post mutation
14:01
Input type and query variables
12:32
+ GraphQL React Client and Query Hooks
4 lectures 45:04
React setup
09:53
GraphQL query
14:50
useQuery hook
11:11
useLazyQuery hook
09:10
+ Authentication with Firebase and React (Client Side)
16 lectures 02:39:04
Firebase auth flow
08:25
Firebase setup
07:04
State management with context and reducer hooks
10:56
Using dispatch context and router hooks
11:59
Navbar
06:51
React router
06:48
User register form
10:31
Confirmation email using firebase
15:37
Toast notification and loading
09:28
Complete registration form
13:00
Register with email and password
14:49
Dispatch user info to context state
06:31
User onAuthStateChanged
09:19
Logout from firebase
06:30
Login with firebase
14:11
Login with google
07:05
+ Authentication with Firebase Node MongoDB (Server Side)
13 lectures 01:56:26
Server auth logic
08:40
GraphQL auth logic
07:20
GraphQL req headers auth logic
05:29
Firebase admin verify authtoken
16:14
Apollo client authtoken in headers
11:12
User model
10:59
User create typeDefs
04:43
User create mutation
08:04
Create or update user in mongodb
08:04
Mutation from apollo client
13:12
User update or create in login
06:19
Reusable auth form
11:15
Code refactor in login and register complete
04:55
+ User Dashboard
8 lectures 01:00:43
What is next?
04:51
Private route
12:20
Dashboard with static nav
02:28
Dashboard pages and nav links update
10:02
Password forgot
14:31
Password update form
09:57
Password update with firebase
03:58
Code refactoring typeDefs
02:36
+ Public Profile
11 lectures 01:21:36
User input and image types
08:30
User update mutation
12:28
User profile query
06:56
Scalar type datetime
04:22
Profile query apollo client
07:45
useMemo hook
03:45
Profile update form
10:47
useMutation hook to update profile
12:55
Remove typename from mutation
05:08
GraphQL fragments
04:36
Queries and mutations refactor
04:24
+ Multiple Image Upload and Resize
9 lectures 01:02:46
Cloudinary setup
04:34
Upload flow and more middlewares
04:35
Upload image to cloudinary
04:56
Delete image and auth middleware
06:21
Cloudinary config
02:35
Image resize in react
08:32
Cloudinary upload react
16:08
Display images
07:22
Delete image
07:43
+ Code Refactor
4 lectures 28:44
Code refactor profile form
11:06
Code refactor image upload and delete
08:54
Code refactor display images and delete
04:51
Code refactor image component
03:53
+ Public Routes
8 lectures 01:03:06
Countdown to redirect
10:27
Public route
07:44
Public profile query and resolver
06:18
All users query and resolvers
04:54
useQuery hook all users
10:05
User card component
06:08
Public profile component
08:28
Profile query using route param
09:02
Requirements
  • Basic Understanding of React and Node
Description

Learn Realtime Web Development with GraphQL from absolute scratch along with React Node MongoDB (Full Stack / MERN Stack) and Firebase (for authentication).

  • In this course you learn GraphQL from Scratch in fun and easy learning environment

  • You will learn GraphQL from the very beginning

  • Learn to build Apollo GraphQL Server with Node Express and MongoDB

  • Learn to build Apollo GraphQL Client with React hooks and Firebase

  • Client side state management with React Context API and Apollo Client Cache

  • Build a true Realtime Web Application

  • Build Production ready Authentication System with email activation, forgot/reset password etc using Firebase

  • Learn Multiple Image Uploads

  • Build entire frontend using latest Hooks from React, React Router and Apollo Client

  • Tons of real world skills (Performing GraphQL Queries, Mutations, Subscriptions, Authentication, Authorization, CRUD, Uploads etc)

  • Learn to Deploy GraphQL Server and Client to Heroku Cloud

  • Gain theoretical and practical knowledge necessary to build your next big GraphQL Project with MERN Stack

  • Most up to date course that uses 100% React Hooks including Context API (to achieve Redux like architecture), Latest React Router Hooks and Latest Apollo GraphQL Hooks for performing Queries, Mutations and Subscriptions

So if you are looking to Build Lightning Fast Realtime Web Apps using GraphQL with MERN Stack, don't waste your valuable time wandering around and trying to learn it from 10 different resources.

I have packed everything into this course for you to fully understand all the practical GraphQL concepts... from basic to advance.

Ready to go FullStack GraphQL with Node React MongoDB Firebase Authentication CRUD Realtime Subscriptions Deployment and more

Join me :)

Who this course is for:
  • React Node Developers looking to learn GraphQL from Scratch
  • React Node Developers looking to build Modern Realtime Web Apps with MERN Stack