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

Focused View

Michael Guay

13:41:45

10 View

1. Introduction

1. Introduction.mp4

01:14

2. Project Demo.mp4

03:20

3. Course Audience.mp4

01:15

4. Course Resources.mp4

00:35

2. React UI Setup

1.1 Ending branch - UI.html

1. Create React App & Material UI.mp4

06:09

2.1 Ending branch - UI.html

2.2 Starting branch - UI.html

2. React Router DOM & Auth UI.mp4

14:26

3. NestJS Backend Setup & Users GraphQL CRUD

1.1 Ending branch - Backend.html

1. NestJS Setup & Users Resource.mp4

13:34

2.1 Ending branch - Backend.html

2.2 Starting branch - Backend.html

2. Abstract Repository.mp4

07:47

3.1 Ending branch - Backend.html

3.2 Starting branch - Backend.html

3. Users Repository & GraphQL CRUD - Part 1.mp4

13:20

4.1 Ending branch - Backend.html

4.2 MongoDB Compass.html

4.3 Starting branch - Backend.html

4. Users Repository & GraphQL CRUD - Part 2.mp4

13:19

5.1 Ending branch - Backend.html

5.2 Starting branch - Backend.html

5. Validation, Logging, & Config Cleanup.mp4

06:57

6.1 Ending branch - Backend.html

6.2 Starting branch - Backend.html

6. Database Migrations.mp4

11:23

7. Update User Bug.mp4

02:45

4. Apollo Client

1. UI Note.html

2.1 Ending branch - Backend.html

2.2 Ending branch - UI.html

2.3 Starting branch - Backend.html

2.4 Starting branch - UI.html

2. Apollo Client Setup.mp4

06:35

3.1 Ending branch - UI.html

3.2 Starting branch - UI.html

3. Create User.mp4

10:22

5. Backend Authentication

1.1 Ending branch - Backend.html

1.2 Starting branch - Backend.html

1. Passport & Local Strategy.mp4

09:34

2.1 Ending branch - Backend.html

2.2 Starting branch - Backend.html

2. Apply Local Strategy.mp4

08:21

3.1 Ending branch - Backend.html

3.2 Starting branch - Backend.html

3. JWT Functionality.mp4

11:35

4.1 Ending branch - Backend.html

4.2 Starting branch - Backend.html

4. JWT Strategy.mp4

10:04

5.1 Ending branch - Backend.html

5.2 Starting branch - Backend.html

5. Apply GQL Auth Guard.mp4

07:35

6. UI Authentication

1.1 Ending branch - UI.html

1.2 Starting branch - UI.html

1. UI Login.mp4

07:37

2.1 Ending branch - Backend.html

2.2 Ending branch - UI.html

2.3 Starting branch - Backend.html

2.4 Starting branch - UI.html

2. Auth Validation - Part 1.mp4

11:01

3.1 Ending branch - Backend.html

3.2 Ending branch - UI.html

3.3 Starting branch - Backend.html

3.4 Starting branch - UI.html

3. Auth Validation - Part 2.mp4

13:27

4.1 Ending branch - Backend.html

4.2 Ending branch - UI.html

4.3 Starting branch - Backend.html

4.4 Starting branch - UI.html

4. Auth Guard.mp4

14:55

5.1 Ending branch - UI.html

5.2 Starting branch - UI.html

5. Logout Link.mp4

08:14

6.1 Ending branch - UI.html

6.2 Starting branch - UI.html

6. Auth Redirect.mp4

05:47

7. Header

1.1 Ending branch - UI.html

1.2 Starting branch - UI.html

1. Header - Part 1.mp4

16:56

2.1 Ending branch - UI.html

2.2 Starting branch - UI.html

2. Header - Part 2.mp4

06:36

3.1 Ending branch - Backend.html

3.2 Ending branch - UI.html

3.3 Starting branch - Backend.html

3.4 Starting branch - UI.html

3. Logout.mp4

06:41

4.1 Ending branch - UI.html

4.2 Starting branch - UI.html

4. Authentication State.mp4

09:03

8. Snackbar

1.1 Ending branch - UI.html

1.2 Starting branch - UI.html

1. Error Snack.mp4

14:29

9. Chat List

1.1 Ending branch - UI.html

1.2 Starting branch - UI.html

1. Chat List.mp4

11:22

2.1 Ending branch - UI.html

2.2 Starting branch - UI.html

2. Conditional Rendering.mp4

06:08

3.1 Ending branch - UI.html

3.2 Starting branch - UI.html

3. Add Chat Modal.mp4

14:11

4.1 Ending branch - Backend.html

4.2 Starting branch - Backend.html

4. Create Chat Backend.mp4

10:10

5.1 Ending branch - UI.html

5.2 Starting branch - UI.html

5. GraphQL Type Generation & Create Chat UI.mp4

14:30

6.1 Ending branch - Backend.html

6.2 Ending branch - UI.html

6.3 Starting branch - Backend.html

6.4 Starting branch - UI.html

6. Get Chats.mp4

08:30

7.1 Ending branch - UI.html

7.2 Starting branch - UI.html

7. Update Cache.mp4

04:47

8.1 Ending branch - UI.html

8.2 Starting branch - UI.html

8. Add Chat Cleanup.mp4

06:08

10. Chat UI

1.1 Ending branch - Backend.html

1.2 Ending branch - UI.html

1.3 Starting branch - Backend.html

1.4 Starting branch - UI.html

1. Chat UI - Part 1.mp4

10:10

2.1 Ending branch - UI.html

2.2 Starting branch - UI.html

2. Chat UI - Part 2.mp4

07:30

11. Messages

1.1 Ending branch - Backend.html

1.2 Starting branch - Backend.html

1. Create Message Backend.mp4

16:23

2.1 Ending branch - UI.html

2.2 Starting branch - UI.html

2. Create Message UI.mp4

06:44

3.1 Ending branch - Backend.html

3.2 Ending branch - UI.html

3.3 Starting branch - Backend.html

3.4 Starting branch - UI.html

3. Get Messages.mp4

11:21

4.1 Ending branch - UI.html

4.2 Starting branch - UI.html

4. Update Messages Cache.mp4

09:07

5.1 Ending branch - UI.html

5.2 Starting branch - UI.html

5. Messages UI.mp4

19:51

12. Responsiveness

1.1 Ending branch - UI.html

1.2 Starting branch - UI.html

1. Responsive UI.mp4

06:40

13. Subscriptions

1.1 Ending branch - Backend.html

1.2 Starting brach - Backend.html

1. Backend Subscriptions.mp4

14:16

2.1 Ending branch - UI.html

2.2 Starting branch - UI.html

2. UI Subscriptions.mp4

14:12

3.1 Ending branch - Backend.html

3.2 Starting branch - Backend.html

3. Subscription Auth & Context.mp4

17:59

4.1 Ending branch - UI.html

4.2 Starting branch - UI.html

4. Update Messages Cache.mp4

16:52

14. Aggregation

1.1 Ending branch - Backend.html

1.2 Starting branch - Backend.html

1. Messages Aggregation.mp4

16:00

2.1 Ending branch - Backend.html

2.2 Starting branch - Backend.html

2. Chats Aggregation.mp4

16:49

3.1 Ending branch - UI.html

3.2 Starting branch - UI.html

3. UI Entities.mp4

10:53

4.1 Ending branch - UI.html

4.2 Starting branch - UI.html

4. Latest Message Cache.mp4

07:37

5.1 Ending branch - Backend.html

5.2 Ending branch - UI.html

5.3 Starting branch - Backend.html

5.4 Starting branch - UI.html

5. Multiple Message Subscriptions.mp4

09:32

15. Pagination

1.1 Ending branch - Backend.html

1.2 Starting branch - Backend.html

1. Chats Backend Pagination.mp4

11:46

2.1 Ending branch - UI.html

2.2 Starting branch - UI.html

2. Chats UI Pagination.mp4

20:37

3.1 Ending branch - Backend.html

3.2 Starting branch - Backend.html

3. Messages Backend Pagination.mp4

06:00

4.1 Ending branch - UI.html

4.2 Starting branch - UI.html

4. Messages UI Pagination & Cleanup.mp4

17:06

16. File Upload

1.1 Ending branch - Backend.html

1.2 Starting branch - Backend.html

1. AWS Setup.mp4

10:03

2.1 Ending branch - Backend.html

2.2 Starting branch - Backend.html

2. Backend File Upload.mp4

23:11

3.1 Ending branch - Backend.html

3.2 Ending branch - UI.html

3.3 Starting branch - Backend.html

3.4 Starting branch - UI.html

3. UI File Upload.mp4

16:21

4.1 Ending branch - Backend.html

4.2 Starting branch - Backend.html

4. User Profile Image Backend.mp4

14:37

5.1 Ending branch - UI.html

5.2 Starting branch - UI.html

5. User Profile Image UI.mp4

07:20

17. AWS Production Deployment

1. AWS Branches.html

2. Amplify UI.mp4

09:49

3. Elastic Beanstalk.mp4

11:45

4. Code Pipeline CICD.mp4

17:07

5. MongoDB Atlas & App Updates.mp4

16:18

6. SSL Certificate.mp4

15:02

7. CORS & App Cleanup.mp4

23:55

8. Redis PubSub.mp4

17:17

9. Custom Domain.mp4

20:53

Description

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

What You'll Learn?

Build & deploy a real-time messaging web application
Implement JWT authentication on the backend & UI
Use Material UI to develop a consistent & responsive UI
Develop a GraphQL API for CRUD functionality
Save data using MongoDB & the Abstract Repository pattern
Execute automatic DB migrations
Use Apollo Client to manage UI state & cache application data
Use GraphQL WebSocket Subscriptions to publish & consume messages in real time
Custom UI routing with React Router
Use code generation tools to automatically generate types from GraphQL schema
Implement server-side pagination to implement infinite scrolling
Use MongoDB aggregation to perform single operation lookups & DB calls
File upload to Amazon S3
Production deployment to AWS all on free-tier
Continuous Delivery & CI/CD
Connect a Pub/Sub app to Redis to allow for distributed messages & horizontal scaling
Connect a app to a custom domain & secure HTTPS traffic

Who is this for?

Intermediate developers looking to learn best practices for building & deploying a scaleable, production grade web app

Intermediate developers looking to learn how to deploy a web app on AWS with continuous delivery

What You Need to Know?

Experience with Node/Express backends, preferably NestJS & TypeScript

Experience with building React UIs

More details

Description
In this course, we go beyond the documentation &Â small simple starter apps to build a real-world full-stack chatting application. This application is built from the ground up to be scaleable & production-grade. The goal of the course is for you to be comfortable developing full-stack web apps so you can develop your own afterward.
We use a NestJS backend, a popular Node.js library that allows us to quickly create clean-code HTTP APIs. Our CRUD functionality will be served by a GraphQLÂ API that persists data using a MongoDBÂ database. We'll use this same GraphQLÂ API to create our messaging subscription which allows for WebSocket connection to our UIÂ to facilitate messaging. Of course, everything will be secured with industry-standard JWTÂ auth.
On the UIÂ we will create a React App using the beautiful Material UIÂ to easily create a responsive UI and interact with our backend. We'll choose Apollo Client for state management so we can easily interact with our GraphQLÂ APIÂ &Â cache data.
Finally, all of this will be deployed onto AWSÂ Elastic Beanstalk &Â Amplify. Backed by a continuous delivery CI/CD pipeline, whenever we push code our latest changes will get built &Â deployed to our environment of choice.
By the end of the project, you will have learned everything you need to get started in building &Â deploying your very own production-grade web apps!
Who this course is for:
Intermediate developers looking to learn best practices for building & deploying a scaleable, production grade web app
Intermediate developers looking to learn how to deploy a web app on AWS with continuous delivery

User Reviews

Rating

average 0

Total votes0

Focused display

I am a Professional Software Engineer with 10+ years of experience crafting enterprise-grade software. I currently work in the Financial Technology space.My YouTube channel posts monthly about Full Stack Development and has 10k+ subscribers. I specialize in building scaleable Node.js Microservices & deploying them to Kubernetes.I enjoy sharing what I know with others & learning new things from them.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.