Learn how to Build & Deploy MERN Stack Video Calling App using React, Mongodb, Express, Node.js, GetStream, Zustand and Tanstack. Follow along step by step as we build and deploy real-time full stack chat app.
🧡 Source Code: https://buymeacoffee.com/codewithusman/e/508972
https://www.patreon.com/posts/pingpong-mern-150403824
👉 Live Preview: https://pingpong-viw6u.sevalla.app
👉 Assets: https://drive.google.com/drive/folders/100Pel0K2wWVp3nyjQ4Em0jNsQtELUsn6?usp=sharing
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - --
📁 Assets Credits:
Fonts:
00 - https://fonts.google.com/
01 - https://freepik.com/
02 - https://unsplash.com/
03 - https://pexels.com/
04 - https://pngegg.com/
05 - https://logoipsum.com/
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
☕️ Support the channel
https://buymeacoffee.com/codewithusman
https://www.patreon.com/codewithusman
👉 Connect with codewithusman:
Instagram: https://www.instagram.com/codewithusmandev
Twitter: https://x.com/codewithusmande
Facebook: https://web.facebook.com/codewithusmandev
👍 Thanks for watching!
Make sure to like + Subscribe for more! ❤
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
⏱ Timestamps
00:00:00 Project Overview
00:02:40 Setup
00:28:40 MongoDB & Stream
00:42:00 Auth routes & Stream setup
01:41:00 Onboarding & auth middleware
02:01:00 User & Chat Routes
02:58:00 Setup Vite Project Daisy UI
03:16:00 React Router
03:29:00 Setup Axios & Tanstack
03:59:00 Signup page
04:59:50 Onboarding page
05:43:15 Login page
05:51:45 Layout & Zustand setup
06:28:00 Home page
07:17:00 Notifications page
07:42:30 Requests page
07:51:45 Chat page
08:25:00 Video call page
08:47:00 Deployment
#chatapp
#completewebsite
#mernstack
#reactjs
#videocallapp
