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

Create a React app with TypeScript template, build a chat UI using Material UI and icons, enable dark mode with a theme provider and container, and run on port 3000.

This lecture demonstrates building a responsive login and signup authentication UI with React Router and Material UI, capturing email and password with useState for a smooth login flow.

Set up a NestJS backend with the CLI, connect MongoDB via a config module and Joy validation, and scaffold a GraphQL code-first users resource with CRUD and a playground.

Create a reusable abstract repository and base document for Mongo, enabling type-safe CRUD operations. Implement lean queries, logging, and 404 handling to manage find, update, and delete operations.

Set up the users repository and schema with NestJS Mongoose and GraphQL, exposing the email and hiding the password, and enable a GraphQL create mutation for users.

Implement GraphQL user create, read, update, and delete via bcrypt hashing of passwords, and updated inputs, using the user repository for create, read, update, and delete operations in MongoDB.

Apply NestJS validation via validation pipe with class validator and class transformer to enforce dto decorators and data integrity across routes, and configure NestJS Pino logging for development and production.

Set up database migrations with migrate mongo in NestJS app, using on module init, migrations folder and change log, and create a unique index on user emails to prevent duplicates.

Fix the update user mutation by hashing the password only when provided, avoiding undefined password errors, and validate updates via login and credentials in GraphQL with bcrypt and JWT.

Configure Apollo Client in a React UI to connect to the GraphQL server, using an in-memory cache and env-var based API URL with ApolloProvider.

Create a useCreateUser hook with Apollo Client to execute the GraphQL createUser mutation from a createUserInput (email and password) and return the user’s id and email.

Implements passport local strategy to authenticate users by email and password, issue a json web token, and attach user info to requests, protecting routes with a 401 on invalid credentials.

Expose the local strategy as a guard, authenticate users via a login route, return a JWT, and attach it as an HTTP-only cookie.

Configure nestjs jwt with a secret and expiration, create a token payload with id and email, generate a JWT, and set an HTTP-only authentication cookie.

Implement a NestJS JWT strategy with passport JWT, extract from cookies, validate using the config secret, attach the user to requests, and secure REST and GraphQL endpoints with guards.

Apply the GCL auth guard to GraphQL mutations and queries, securing user routes with JWT cookies, using the current user decorator to update or delete only the authenticated user.

Create a useLogin hook to post email and password to /auth/login, handle errors, and refresh Apollo cached queries after login, returning the login function and error state.

Enhance auth feedback with an optional error prop and material UI error states for login and signup forms, showing 'credentials are not valid' and standardizing GraphQL error handling.

Implement robust auth validation by extracting and formatting GraphQL error messages, handling duplicate email errors with clear messages, and distinguishing 401 unauthorized from unknown errors in login and signup flows.

Implement an auth guard to protect routes by verifying a JWT via a get me query. Exclude login and signup routes.

Guard routes with an auth check and redirect to login on 401 GraphQL responses. Implement a logout link in Apollo that resets the store and navigates to login.

Implement an auth redirect flow that automatically navigates authenticated users to the home page after login or signup, leveraging Apollo's get me query, refetching, and the useNavigate hook.

Refactor the header by extracting a desktop navigation and a settings component, wire the pages prop to render links with Material UI, and move mobile files into a dedicated folder.

Learn to implement a logout feature by clearing the httpOnly JWT cookie via a backend /auth/logout route and refreshing the client store after redirecting to the login page.

Learn to manage authentication state with Apollo Client's reactive variable to conditionally render header elements and navigation, showing login and sign up options when unauthenticated and settings when authenticated.

Implement global error handling in a React and NestJS GraphQL app with a shared snack bar. Show an unknown error toast for server issues on logout and get me call.

Design a responsive chat sidebar using material UI lists and grid, display chat rooms with avatars and latest messages, and add a header with a floating add button.

Implement a chat list add modal to create new chats, wiring an add chat handler, open state, and a private/public switch with user search or name field.

Create a real-time chat backend using NestJS, GraphQL code-first, and Mongo, building chats module, chat entity, repository, and a create mutation guarded by authentication.

Generate type-safe GraphQL types for your React UI with the GraphQL code generator, watch for schema changes, and apply auto-generated types to a create chat mutation.

Retrieve and display chats in the app by implementing a chat resolver, creating a get chats hook, and using GraphQL fragments to fetch all chat data for the chat list.

Update the Apollo client cache after creating a chat by using useMutation's update, cache.modify, and writeFragment to append the new chat to the chats query and refresh the UI.

Implements a cleanup of the add chat flow by awaiting chat creation, closing the modal on success, removing dummy chats, and enforcing required chat name validation with error handling.

Implement per-chat navigation in a real-time chat app by refactoring the backend to fetch chats by underscore id, building a chat UI with React, NestJS, and GraphQL.

Refactor the chat UI to always show the chat list for individual chats, add a bottom-aligned message bar with a material UI stack, input, divider, and send icon.