Let's Build a Production Grade, Real-time Video Calling Chat App.
Try Stream for Free: https://dub.sh/getstream.io
My 100+ Hours Udemy Course: https://dub.sh/udemy-course


📚 Resources:
Source Code: https://github.com/burakorkmez/streamify-video-calls (Stars appreciated ✨)
Github Gist: https://gist.github.com/burakorkmez/55f3ba08a85388db4758ae0848072ccf
Diagrams: https://app.eraser.io/workspace/kiTRUaytr8fJjmfPj3PQ

🔗 Links:
Join discord to ask your questions: https://discord.gg/yEyKQWYugG
Follow me on X: https://x.com/codesistency

Key Features:
- 🚀 Tech Stack: Node.js, Express, MongoDB, React, TanStack Query, Tailwind
- 🔐 Authentication with JWT-based login & signup flows
- 📄 Onboarding Flow
- 👥 Friends System
- 💬 Real-Time Chat
- 📹 Video Calling
- 🎨 32 UI Themes
- 🚨 Protected Routes
- 🛠️ Custom Hooks & Best Practices
- 🧪 API Testing: Build and test endpoints for reliability
- 🚀 Deployment Ready

Timestamps:
00:00:00 - 0- Project Preview
00:02:43 - 1- Setting Up Our Project
00:11:42 - 2- Optimizing Our Codebase
00:18:42 - 3- Setting Up MongoDB and Stream
00:26:51 - 4- Signup Endpoint
00:55:41 - 5- Login & Logout Endpoint
01:12:29 - 6- Onboarding Endpoint
01:30:00 - 7- Get Recommended Users & Friends Endpoint
01:39:51 - 8- Send Friend Request Endpoint
01:47:53 - 9- Accept Friend Request Endpoint
01:51:58 - 10- Completing Our User Routes
01:58:27 - 11- Chat Routes
02:03:10 - 12- Frontend Setup
02:17:45 - 13- Tanstack Query Setup & Quick Tutorial
02:33:07 - 14- Signup Page
03:00:00 - 15- Onboarding Page
03:34:11 - 16- Login Page
03:53:40 - 17- Layout Component & Logout
04:14:56 - 18- Theme Selector
04:28:54 - 19- Home Page
04:56:08 - 20- Notifications Page
05:10:15 - 21- Chat Page
05:37:56 - 22- Video Calls Page
05:51:51 - 23- Deployment & Final Tests

Thanks for watching. If you're reading here, you have to subscribe :-)

#reactjs #programming #coding

As a Programmer

This post guides you through building a production-ready video calling and real-time chat application using the MERN stack. It covers creating a back-end with NodeJS, Express, and MongoDB, handling authentication with JSON web tokens, and developing the front-end with React and best practices like custom hooks and Tenstack query. The project focuses on creating a scalable language exchange platform with multiple features, including video and group calls, chat messaging, and theme selection.

MERN Stack Project: Video Calling Realtime Chat App & Social App