Full Stack Real-Time Chat App: NestJS, Prisma, Postgres, GraphQL, Redis, React, Zustand & Mantine UI

Hey there,

It’s time for another complex build! We’re going to use NestJS, Prisma, GraphQL, Redis, Postgres, ReactJS, Apollo Client, Zustand, and the UI library Mantine to create a FullStack TypeScript Real-time Chat app. Ensure you have Docker set up on your system.

Here are the main features our chat app will include:

Authentication Flow: This allows users to register, log in, and log out. We’ll manage authentication using JWT Tokens, stored as HttpOnly cookies, which will be necessary for accessing protected mutations and queries.

Profile Management: Users can update their name and profile avatar.

Chatrooms: Users can create chatrooms and add members.

Real-time Features: Using GraphQL subscriptions built on top of WebSockets, we’ll implement real-time features. This will enable users to receive messages instantly, see typing indicators, and more.

Online User Tracking with Redis: We’ll use Redis to store live users in a chatroom. As users join or leave, the list gets updated in real-time on the backend. Subscribed clients will instantly see these changes.

Source code: https://github.com/thebeautyofcoding/nestjs_graphql_react_chat_app

Enjoy 🙂

#fullstack #typescript #nestjs

Timestamps:
0:00 Intro: Talk about the technologies being used and some of the features the real-time chat app will have.
00:02 Creation of a docker-compose file for running Postgres and Redis container. Setting up Nestjs with Prisma, GraphQL and Postgres. Implementation of register, login, and logout services & resolvers. Also, implementation of functionality for updating the user profile on the backend.
00:58 Building out the Sidebar, frontend routing, using react-router-dom, and building out the AuthModal component, housing the Login and Register component.
2:52 Building the ProfilSettingsModal for updating the user’s profile (name and avatarImage)
3:22 Creation of the chatroomModule on the backend, responsible for creating, and deleting chatrooms, as well as sending messages.
3:54 Building the RoomList and AddChatroom component on the frontend
4:41 Building the Chatwindow component, responsible for real-time messaging.