HOT

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

Development

Build a Real Time Chat App With React + NestJS & GraphQL, available at $54.99, has an average rating of 4.69, with 75 lectures, based on 75 reviews, and has 899 subscribers.

Rating4.7
Enroll Now

You will learn about 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 This course is ideal for individuals who are Intermediate developers looking to learn best practices for building & deploying a scaleable, production grade web app or Intermediate developers looking to learn how to deploy a web app on AWS with continuous delivery It is particularly useful for Intermediate developers looking to learn best practices for building & deploying a scaleable, production grade web app or Intermediate developers looking to learn how to deploy a web app on AWS with continuous delivery.

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

Summary

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

Price: $54.99

Average Rating: 4.69

Number of Lectures: 75

Number of Published Lectures: 75

Number of Curriculum Items: 75

Number of Published Curriculum Objects: 75

Original Price: $49.99

Quality Status: approved

Status: Live

What You Will 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 Should Attend

  • 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

Target Audiences

  • 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

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!

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Lecture 2: Project Demo

Lecture 3: Course Audience

Lecture 4: Course Resources

Chapter 2: React UI Setup

Lecture 1: Create React App & Material UI

Lecture 2: React Router DOM & Auth UI

Chapter 3: NestJS Backend Setup & Users GraphQL CRUD

Lecture 1: NestJS Setup & Users Resource

Lecture 2: Abstract Repository

Lecture 3: Users Repository & GraphQL CRUD – Part 1

Lecture 4: Users Repository & GraphQL CRUD – Part 2

Lecture 5: Validation, Logging, & Config Cleanup

Lecture 6: Database Migrations

Lecture 7: Update User Bug

Chapter 4: Apollo Client

Lecture 1: UI Note

Lecture 2: Apollo Client Setup

Lecture 3: Create User

Chapter 5: Backend Authentication

Lecture 1: Passport & Local Strategy

Lecture 2: Apply Local Strategy

Lecture 3: JWT Strategy – Part 1

Lecture 4: JWT Strategy – Part 2

Lecture 5: Apply GQL Auth Guard

Chapter 6: UI Authentication

Lecture 1: UI Login

Lecture 2: Auth Validation – Part 1

Lecture 3: Auth Validation – Part 2

Lecture 4: Auth Guard

Lecture 5: Logout Link

Lecture 6: Auth Redirect

Chapter 7: Header

Lecture 1: Header – Part 1

Lecture 2: Header – Part 2

Lecture 3: Logout

Lecture 4: Authentication State

Chapter 8: Snackbar

Lecture 1: Error Snack

Chapter 9: Chat List

Lecture 1: Chat List

Lecture 2: Conditional Rendering

Lecture 3: Add Chat Modal

Lecture 4: Create Chat Backend

Lecture 5: GraphQL Type Generation & Create Chat UI

Lecture 6: Get Chats

Lecture 7: Update Cache

Lecture 8: Add Chat Cleanup

Chapter 10: Chat UI

Lecture 1: Chat UI – Part 1

Lecture 2: Chat UI – Part 2

Chapter 11: Messages

Lecture 1: Create Message Backend

Lecture 2: Create Message UI

Lecture 3: Get Messages

Lecture 4: Update Messages Cache

Lecture 5: Messages UI

Chapter 12: Responsiveness

Lecture 1: Responsive UI

Chapter 13: Subscriptions

Lecture 1: Backend Subscriptions

Lecture 2: UI Subscriptions

Lecture 3: Subscription Auth & Context

Lecture 4: Update Messages Cache

Chapter 14: Aggregation

Lecture 1: Messages Aggregation

Lecture 2: Chats Aggregation

Lecture 3: UI Entities

Lecture 4: Latest Message Cache

Lecture 5: Multiple Message Subscriptions

Chapter 15: Pagination

Lecture 1: Chats Backend Pagination

Lecture 2: Chats UI Pagination

Lecture 3: Messages Backend Pagination

Lecture 4: Messages UI Pagination & Cleanup

Chapter 16: File Upload

Lecture 1: AWS Setup

Lecture 2: Backend File Upload

Lecture 3: UI File Upload

Lecture 4: User Profile Image Backend

Lecture 5: User Profile Image UI

Chapter 17: AWS Production Deployment

Lecture 1: AWS Branches

Lecture 2: Amplify UI

Lecture 3: Elastic Beanstalk

Lecture 4: Code Pipeline CI/CD

Lecture 5: MongoDB Atlas & App Updates

Lecture 6: SSL Certificate

Lecture 7: CORS & App Cleanup

Lecture 8: Redis Pub/Sub

Lecture 9: Custom Domain

Instructors

Rating Distribution

  • 1 stars: 0 votes
  • 2 stars: 2 votes
  • 3 stars: 1 votes
  • 4 stars: 19 votes
  • 5 stars: 53 votes

Frequently Asked Questions


How long do I have access to the course materials?


You can view and review the lecture materials indefinitely, like an on-demand channel.


Can I take my courses with me wherever I go?


Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

You may also like

Email Marketing. Increase Sales With Email Marketing!

TikTok Marketing Domination : Mastering Marketing Strategies

Video Email Marketing Made Easy