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.

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.

[truongkhanguyen]

your tutorial is really what i have been looking for all this time, nest, next, mantine. For me this is perfect

[quochuynguyen]

thanks man, great video, your voice is so warm and easy to listen

[rkpers]

awsome build. Do you see any blockers to use this backend code in docker-compose and to mainly help it scalable ?

[nl]

Hello, I use NextJS instead of Vite. It has SSR and server actions. From what I've read online, those 2 features might replace some part of the tech stack if I'm not wrong. As you have more experience in your stack, could you please tell me, if you know, which parts of your stack/proj could I replace with stuff already in NextJS? Or if there's anything I should do differently. Thanks

[PattySpicy]

More more more !! your Project is really helpful. Looking forward to learn full tack react for frontend and NestJS for backend with relational database from you

[smastudioru]

Hey mate! Could you record some video using Prisma NestJs graphql but with federation? And gateway?

[satindersingh]

Hey bro I getting Authentication failed error after npx prisma migrate dev --name init this cmd "Error: P1000: Authentication failed against database server at `localhost`, the provided database credentials for `johndoe` are not valid."

[dorrakadri]

im stuck in something the subscription dont get generated so i cant import the UserStoppedTypingSubscription for exemple i dont get why can anyone help ?

[akshatkumartripathi]

At 38:19 Why we are using findUnique while we put this property only to the id but not email.
Also in the VS code its throwing error

[blackvlog]

you can building a project e-commmerce with NestJS, Prisma, next js, redux toolkit, typescript please

[adarshrathi]

please this type of project using next js, graphql, prisma also

[hasanulhaquebanna]

Just amazing❤❤
Any thinking to bring video chat app without using any third party provider? Because with Nestjs there is no such tutorial!

[davutdurmaz]

I love your videos but timestamps would be great for related parts of the video.

[changhonghe]

Hi, very nice tutorial video, helpful very much! Do you mind to share how to re-generate schema.prisma when my prosma data model got changed?

[abdulkabirsultan]

Can I follow this tutorial if I am new to nestjs

[rahulpandey]

Hey mate, this is a great video learned lot for it, Can you make a project using nextjs, graphql, react-query, redis. Thanks in advance

[rkpers]

the below 2 errors happening... for a dev like you, it shd be very minor fix..haha. But awsome product having all features

[박공부-mh]

위 영상을 따라할 경우 graphql-upload 오류가 발생합니다 . 하지만 나는 해결방법을 찾아 공유합니다. (1. "graphql-upload": "^13.0.0" 버전 내리기 2. import { GraphQLUpload, graphqlUploadExpress } from 'graphql-upload'; 으로 수정하면 코드가 잘 동작합니다.

[dorrakadri]

the appolo client file got me confuused

[nabinsaud]

But a lot of outdated packages it's bad i think using the outdated packages i saw your code using an outdated way of doing in apollo server