ChitChat- Real Time Messaging System

Table of Contents

  1. Introduction
  2. Used Technologies
  3. Core Features
  4. Live Demo
  5. Source Code - github.com/hunter-420/ChitChat
  6. Building Process Step By Step

Introduction

ChitChat empowers users to create custom usernames and facilitates easy search functionalities, allowing users to initiate conversations effortlessly. The platform supports both private and group chats.

The project utilizes a modern tech stack, including NextJS, Apollo GraphQL, Chakra UI, Node.js, MongoDB, and Prisma, to build a scalable and responsive application. Each technology has been carefully selected to ensure high performance and a seamless user experience. The implementation process follows a structured approach, guiding users from setting up the project to deploying a fully functional messaging system.

Used Technologies

  1. NextJS
  2. Appllo GraphQL
  3. Chakra UI
  4. NodeJs
  5. Mongo DB
  6. Prisma

Core Features

  1. Users can create custom username
  2. Users can search for users to create conversation
  3. Private One-on-One conversations
  4. Group conversationi with many people as they like
  5. Dot indication for which message is opened or which not
  6. Users can both leave conversation as well as delete
  7. Able to edit user Participants in a particularconversation either add or remove users

Building Process

  1. Setup NextJS Project & Folder Structure ✅
  2. NextAuth and Google Cloud Console✅
  3. NextAuth Prisma Adapter setup (Creating a prisma schema)✅
  4. Creating MongoDB Database (Prisma/Mongo, Mongo Compass GUI)✅
  5. Creating Users (NextAuth Google Provider & useSession hook✅
  6. Chakra UI setup (Chakra Provider & themes)✅
  7. Creating Custom Usernames (SSR w/ getServerSideProps, session type declaration, Authentication React Components)✅
  8. Apollo GraphQL
  9. Creating the Backend (NodeJs, Apollo server setup, Apollo server Express)
  10. Creating GraphQL Schema’s , Type Definitions, and Resolvers
  11. Apollo’s Query & Mutation React hooks
  12. Create Username Mutation 1 (Writing Mutation Strings)
  13. Apollo React Hooks w/ TypeScript
  14. Create Username Mutation 2 (Trigger Mutation, Hitting the API, CORS)
  15. Resolver Arguments & Server Context (GraphQL Context)
  16. Backend Prisma Setup (Prisma Client, Schema & MongoDB Connection)
  17. createUsername Resolver Function
  18. NextAuth Session Callback (custom session properties)
  19. Complete Create Username Feature (Error Handling &React Hot Toast Notifications)
  20. React Component Architecture (Conversation & Feed Wrapers)
  21. Create Conversation Model (Chakra Modal,Flex,Stack Components & Media Queries)
  22. Search Users React Components
  23. Search Users Query (SearchUsers Query String, useLazyQuery Apollo Hook)
  24. Search Users Backend (searchUsers Resolver, Database Search w/Prisma)
  25. User Search List Component
  26. Selecting Conversation Participants
  27. Create Conversation 1 (Create Button, Conversation typeDefs & resolvers)
  28. Create Conversations 2 (createConversation Query String & Mutation Call)
  29. Database Modelling & Prisma Schema
  30. createConversation Resolver (Prisma Create & Prisma Validator)
  31. Storing Conversations & Participants
  32. Redirecting Users w/ Next.JS Router
  33. Conversations Query 1 (conversations Resolver definition, ConversationFields typeDefs)
  34. Conversations Query 2 (conversations useQuery, Prisma TypeScript Types)
  35. Conversations Query 3 (conversations Resolver completion, fetch conversations)
  36. ConversationItem Component Creation
  37. Subscriptions & WebSockets w/ Apollo Client (graphql-ws, wsLink, splitLink)
  38. Subscriptions & WebSockets w/ Apollo Server (WebSocket Server, Subscription endpoint & Context)
  39. conversationCreated Subscription Backend (Publish/Subscribe Pattern, PubSub Class)
  40. conversationCreated Subscription Frontend (subscribeToMore function, updateQuery)
  41. Testing the conversationCreated Subscription
  42. conversationCreated Subscription Troubleshooting (fixing typeDefs)
  43. Filtering Subscription Events (withFilter function)
  44. ConversationItem & FeedHeader Components
  45. Apollo v4 Migration
  46. Frontend Package Upgrade (Next.js 13 Migration)
  47. Sending Messages 1 (sendMessage mutation)
  48. Sending Messages 2 (messageSent subscription & Conversation Messages query backend)
  49. Sending Messages 3 (Conversation Messages query frontend)
  50. Sending Messages 4 (onSendMessage function invocation)
  51. Sending Messages 5 (subscribeToMoreMessages subscription invocation)
  52. Message Feed (MessageItem component)
  53. New Message Optimistic UI Rendering (Apollo Cache reads/writes)
  54. Mark Conversations as Read
  55. Real-time Conversation Updates (conversationUpdated subscription)
  56. Deleting Conversations