Courses

Build a Real Time Chat App With React + NestJS + GraphQL

Build a full-stack, scaleable, production grade web app following best practices. Includes continuous delivery on AWS.

76 lessons 14 h 5 min

01Introduction

  1. 01Introduction1:14
  2. 02Project Demo3:21
  3. 03Updates

02React UI Setup

  1. 04Create React App & Material UI6:09
  2. 05React Router DOM & Auth UI14:26

03NestJS Backend Setup & Users GraphQL CRUD

  1. 06NestJS Setup & Users Resource13:34
  2. 07Abstract Repository12:19
  3. 08Users Repository & GraphQL CRUD - Part 113:20
  4. 09Users Repository & GraphQL CRUD - Part 213:19
  5. 10Validation, Logging, & Config Cleanup10:12
  6. 11Database Migrations11:23
  7. 12Update User Bug2:45

04Apollo Client

  1. 13UI Note
  2. 14Apollo Client Setup6:35
  3. 15Create User10:22

05Backend Authentication

  1. 16Passport & Local Strategy9:34
  2. 17Apply Local Strategy8:21
  3. 18JWT Strategy - Part 111:54
  4. 19JWT Strategy - Part 210:05
  5. 20Apply GQL Auth Guard7:35

06UI Authentication

  1. 21UI Login7:37
  2. 22Auth Validation - Part 111:01
  3. 23Auth Validation - Part 213:27
  4. 24Auth Guard14:55
  5. 25Logout Link8:14
  6. 26Auth Redirect5:47

07Header

  1. 27Header - Part 116:56
  2. 28Header - Part 26:36
  3. 29Logout6:41
  4. 30Authentication State9:03

08Snackbar

  1. 31Error Snack14:29

09Chat List

  1. 32Chat List11:22
  2. 33Conditional Rendering6:08
  3. 34Add Chat Modal14:11
  4. 35Create Chat Backend10:10
  5. 36GraphQL Type Generation & Create Chat UI14:30
  6. 37Get Chats8:30
  7. 38Update Cache4:47
  8. 39Add Chat Cleanup6:08

10Chat UI

  1. 40Chat UI - Part 110:10
  2. 41Chat UI - Part 27:30

11Messages

  1. 42Create Message Backend16:23
  2. 43Create Message UI6:44
  3. 44Get Messages11:22
  4. 45Update Messages Cache9:07
  5. 46Messages UI19:51

12Responsiveness

  1. 47Responsive UI6:40

13Subscriptions

  1. 48Backend Subscriptions14:16
  2. 49UI Subscriptions14:13
  3. 50Subscription Auth & Context17:59
  4. 51Update Messages Cache16:52

14Aggregation

  1. 52Messages Aggregation16:00
  2. 53Chats Aggregation16:49
  3. 54UI Entities10:53
  4. 55Latest Message Cache7:37
  5. 56Multiple Messages Subscriptions9:32

15Pagination

  1. 57Chats Backend Pagination11:53
  2. 58Chats UI Pagination20:37
  3. 59Messages Backend Pagination6:00
  4. 60Messages UI Pagination & Cleanup17:06

16File Upload

  1. 61AWS Setup10:03
  2. 62Backend File Upload23:11
  3. 63UI File Upload16:21
  4. 64User Profile Image Backend14:38
  5. 65User Profile Image UI7:20

17AWS Production Deployment

  1. 66AWS Branches
  2. 67Amplify UI9:49
  3. 68Elastic Beanstalk11:45
  4. 69Code Pipeline CI/CD17:07
  5. 70MongoDB Atlas & App Updates16:18
  6. 71SSL Certificate15:02
  7. 72CORS & App Cleanup23:56
  8. 73Redis Pub/Sub17:17
  9. 74Custom Domain20:53

18Updates

  1. 75Backend Updates: Mongoose, GraphQL & More5:53
  2. 76UI Updates: Vite & Latest Dependencies10:43