CF

Build a Realtime App with React Hooks and GraphQL

4h 32m 39s
English
Paid

Master the latest and greatest features in React by building a full-stack, real-world app from scratch. This course guides you through creating a realtime React app with a GraphQL server (Apollo Server 2) backend, leveraging a cloud MongoDB database (Mongo Atlas), and utilizing React Hooks for state management. Enhance your app with Social Authentication (Google OAuth2), realtime data with GraphQL Subscriptions, and image uploads via Cloudinary, among other advanced features.

Course Overview

You'll develop a live geolocation app called GeoPins, allowing users to 'pin' various locations on a map and share content with others in real-time. Share pictures, and reviews, interact with other users through comments on pins, and manage the pins you've created.

Key Concepts Covered

  • Building a robust GraphQL Server with Authentication using Apollo Server 2

  • In-depth utilization of Apollo Client and GraphQL Request libraries

  • State management with useContext and useReducer Hooks, replacing Redux

  • Understanding GraphQL concepts: Queries, Mutations, Subscriptions, etc.

  • Mastering major Hooks: useState, useEffect, useContext, useReducer

  • Creating Custom Hooks for additional application functionality

  • Implementing Social Login integration with Google OAuth

  • Displaying App Changes in Realtime with GraphQL Subscriptions

  • Dynamic image uploads with the Cloudinary API

  • Utilizing MongoDB in the cloud with MongoDB Atlas

  • Building models and CRUD operations with Mongoose

  • Designing apps with Material UI component library and Icons

  • Responsive design using the Material UI 'useMediaQuery' Hook

  • Developing maps applications with Mapbox API and ReactMapGL

  • Using the Geolocation API for users' current location

  • Creating Route Guards and Protected Routes with React Router v4

  • Authentication and authorization with GraphQL/Apollo

  • Handling errors in the server and React client

  • Using Async/await functions and exploring ES6/ES7 concepts

  • Deploying applications with Heroku and Now v2

Prerequisites

  • Basic understanding of React/React Hooks (prior completion of a React Hooks course is recommended)
  • Familiarity with GraphQL

Target Audience

  • React/JavaScript developers seeking to learn advanced development tools and techniques
  • Developers aspiring to build comprehensive real-world JavaScript applications

What You'll Learn

  • Developing practical, feature-rich apps with React Hooks and GraphQL
  • State management in real-world applications using React Hooks
  • Building full-stack apps with React Hooks and GraphQL
  • Integrating GraphQL client/server libraries with React Hooks

About the Author: Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 37 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 37 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: What You Need For This Course
All Course Lessons (37)
#Lesson TitleDurationAccess
1
What You Need For This Course Demo
01:40
2
How To Get the Most Out Of This Course
01:35
3
Git Clone Repo and Install Dependencies
01:25
4
Creating our GraphQL Server
04:09
5
Creating Database with MongoDB Atlas
04:25
6
Creating Mongoose Models for User / Pin Data
06:40
7
Exploring our React App
03:49
8
Setting up Google OAuth
04:54
9
Adding Google Login Button
05:07
10
Authenticating Users from Apollo Server
18:37
11
Managing App State with useContext / useReducer
07:32
12
Styling Splash Page / App Cleanup
05:10
13
Creating Protected Route for App
07:47
14
Build Header Component
05:24
15
Build Signout Button
05:40
16
Creating and Styling our Map
09:33
17
Placing a Pin at User's Current Position
07:14
18
Adding Draft Pin
06:05
19
Adding Blog Area for Pin Content
05:09
20
Building / Styling Blog Components
07:26
21
Managing Pin Content State and Deleting Draft Pins
07:28
22
Uploading Images with Cloudinary
06:32
23
Creating New Pins with CREATE_PIN Mutation
14:42
24
Create Custom GraphQL Request Hook
08:16
25
Displaying Created Pins on the Map
12:34
26
Highlighting Newly Created Pins
03:11
27
Adding Popup to our Pins
08:08
28
Deleting Pins with DELETE_PIN Mutation
07:05
29
Building Out / Styling Pin Content
07:24
30
Building out Components to Create / Display User Comments
06:28
31
Creating Comments with CREATE_COMMENT_MUTATION
16:19
32
Handling Expired Auth Token Errors
02:43
33
Setting up Subscriptions on the Backend
11:34
34
Subscribing to Live Data Changes with Apollo Client
10:28
35
useMediaQuery for Easy Mobile / Response Design
10:13
36
Fixing App Issues
05:59
37
Deploying with Now v2 and Heroku
14:14
Unlock unlimited learning

Get instant access to all 36 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

Frequently asked questions

What is Build a Realtime App with React Hooks and GraphQL about?
Master the latest and greatest features in React by building a full-stack, real-world app from scratch. This course guides you through creating a realtime React app with a GraphQL server (Apollo Server 2) backend, leveraging a cloud…
Who teaches this course?
It is taught by Udemy. You can find more courses by this instructor on the corresponding source page.
How long is the course?
It contains 37 lessons with a total runtime of 4 hours 32 minutes. Every lesson is available to watch online at your own pace.
Is it free to watch?
It is part of CourseFlix's premium catalog. A subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch it online?
The course is available to watch online on CourseFlix at https://courseflix.net/course/build-a-realtime-app-with-react-hooks-and-graphql. The page hosts every lesson with the integrated video player; no download is required.