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

👉 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 1 of a multi-part series. I’m currently working on the new parts and am planning to release them every few days, 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
❗️URL Encoder: https://meyerweb.com/eric/tools/dencoder/
❗️Google Image: https://github.com/shadeemerhi/imessage-graphql/blob/main/frontend/public/images/googlelogo.png
❗️VSCode GraphQL Extensions:
https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql-syntax
https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql

Part 1 Chapters:
0:00 – Intro & Product Demo
10:07 – Begin Project (Create Next App, Next.JS Fundamentals, pages, client-side and API routing)
16:05 – NextAuth and Google Cloud Console Introduction
25:26 – NextAuth Prisma Adapter Setup (Creating a Prisma Schema)
36:27 – Creating our MongoDB Database (Prisma/Mongo, Mongo Compass GUI)
47:45 – Creating Users (NextAuth Google Provider & useSession hook)
1:03:42 – Chakra UI Introduction & Setup (Chakra Provider & Themes)
1:10:50 – Creating Custom Usernames Intro (SSR w/ getServerSideProps, session type declaration, Authentication React Components)
1:47:18 – Apollo Client Fundamentals 1 (GraphQL Intro)
1:54:14 – Creating the Backend (Node.JS Intro, Apollo Server Setup, Apollo Server Express)
2:00:28 – GraphQL Schema’s, Type Definitions, and Resolvers Introduction
2:02:59 – Creating our GraphQL Schema, TypeDefs, and Resolvers
2:31:23 – Apollo Client Fundamentals 2 (Apollo’s Query & Mutation React hooks)
2:38:46 – Create Username Mutation 1 (Writing Mutation Strings)
2:47:02 – Apollo React Hooks w/ TypeScript
2:54:27 – Create Username Mutation 2 (Trigger Mutation, Hitting the API, CORS)
3:01:14 – Resolver Arguments & Server Context (GraphQL Context)
3:14:05 – Backend Prisma Setup (Prisma Client, Schema & MongoDB Connection)
3:23:52 – createUsername Resolver Function
3:38:01 – NextAuth Session Callback (custom session properties)
3:47:43 – Complete Create Username Feature (Error Handling &React Hot Toast Notifications)
4:05:05 – Outro & Part 2 Preface

#react #javascript #softwareengineer