Realtime Chat App with NextJS, GraphQL, NodeJS, MongoDB, Prisma, TypeScript (iMessage Clone) 💬🔥 | P3

👉 Repo link: https://github.com/shadeemerhi/imessage-graphql

❤️ Tips & Donations Link: https://paypal.me/shadeemerhi?country.x=CA&locale.x=en_US
( Thank you very much for your support!)

❗️This video is Part 3 of a multi-part series. I’m currently working on the new parts and am planning to release them every 4-7, so be sure to subscribe for those!

❗️ Please comment with any feedback, questions, or concerns!
👾 JOIN MY DISCORD FOR DIRECT ACCESS TO ME! I WANT TO HELP YOU! 👉 https://discord.gg/Vs6HGMRPFs

Build Technologies:
✅ NEXTJS
✅ APOLLO GRAPHQL
✅ CHAKRA UI
✅ NODEJS
✅ MONGO DB
✅ PRISMA

Mentioned Links:
ConversationItem Component: [https://github.com/shadeemerhi/imessage-graphql-tutorial/blob/master/frontend/src/components/Chat/Conversations/ConversationItem.tsx](https://github.com/shadeemerhi/imessage-graphql-tutorial/blob/master/frontend/src/components/Chat/Conversations/ConversationItem.tsx)

FeedHeader Component: [https://github.com/shadeemerhi/imessage-graphql-tutorial/blob/master/frontend/src/components/Chat/Feed/Messages/Header.tsx](https://github.com/shadeemerhi/imessage-graphql-tutorial/blob/master/frontend/src/components/Chat/Feed/Messages/Header.tsx)

formatUsernames Function: [https://github.com/shadeemerhi/imessage-graphql-tutorial/blob/master/frontend/src/util/functions.ts](https://github.com/shadeemerhi/imessage-graphql-tutorial/blob/master/frontend/src/util/functions.ts)

Part 3 Chapters:
0:00 – Intro & Preface
1:05 – Database Modelling & Prisma Schema
21:39 – createConversation Resolver (Prisma Create & Prisma Validator)
36:30 – Storing Conversations & Participants
43:55 – Redirecting Users w/ Next.JS Router
50:21 – Conversations Query 1 (conversations Resolver definition, ConversationFields typeDefs)
59:46 – Conversations Query 2 (conversations useQuery, Prisma TypeScript Types)
1:11:13 – Conversations Query 3 (conversations Resolver completion, fetch conversations)
1:17:17 – ConversationItem Component Creation
1:21:46 – Subscriptions & WebSockets w/ Apollo Client (graphql-ws, wsLink, splitLink)
1:27:35 – Subscriptions & WebSockets w/ Apollo Server (WebSocket Server, Subscription endpoint & Context)
1:42:34 – conversationCreated Subscription Backend (Publish/Subscribe Pattern, PubSub Class)
1:47:43 – conversationCreated Subscription Frontend (subscribeToMore function, updateQuery)
1:57:38 – Testing the conversationCreated Subscription
2:04:09 – conversationCreated Subscription Troubleshooting (fixing typeDefs)
2:07:10 – Filtering Subscription Events (withFilter function)
2:16:16 – ConversationItem & FeedHeader Components
2:36:50 – Outro & Part 4 Preface

#react #javascript #softwareengineer