🔴 Realtime Responsive Chat App with React, Node.js, Socket.io and MongoDB with Group Chats

🔥 Sign up to Hostinger and obtain a VPS server. Use code KISHAN for 10% off: https://www.hostg.xyz/SHF8O 🧑‍💻 Source Code: https://topmate.io/kishansheth/1076639 🚀 Hindi Channel: @CodeWithKishan21 Hey Guys 👋, In this video we will create a full stack responsive chat app using sockets for realtime communication. We will also be able to create groups and upload files and download files. We have used React, Node.js, Express, MongoDB, Socket.io, Zustand and many more awesome tech to create this app. At the end we will also deploy the MERN app on Hostinger. Discord for any problems/errors/bugs: https://discord.com/invite/gr3JYgUFzQ Contact for Collaborations/Freelancing/Projects: [email protected] 📚 Resources & Links: -------------------------------------------------------------------------------- Assets: https://drive.google.com/file/d/1_rre9UqQq_iQyoKjpTSslxBF3licSS7s/view?usp=drive_link multiselect.jsx Component: https://gist.github.com/koolkishan/b186b8eab5dbbaee383fd8f79f25eca9 Logo: https://gist.github.com/koolkishan/8b590127ab27e3bdea1f39649f3ee8e9 👇 Follow me here: -------------------------------------------------------------------------------- 💻 Join our Discord Community - https://discord.com/invite/gr3JYgUFzQ 🐦 Follow me on Twitter - https://twitter.com/thekishansheth 🖼️ Follow me on Instagram - https://www.instagram.com/thekishansheth/ 💼 Follow me on LinkedIn - https://www.linkedin.com/in/koolkishan/ 💰 WANT TO SUPPORT THE CHANNEL? -------------------------------------------------------------------------------- https://buymeacoffee.com/koolkishansheth 🚀 App Features: -------------------------------------------------------------------------------- Frontend: Built with React ⚛️ UI Components: ShadCN 🧩 Styling: Tailwind CSS 🎨 Responsiveness: Fully Responsive Design 📱💻 Authentication: JWT Tokens 🔑 File Handling: Multer for File and Image Storage 📁📷 File Download: Easy File Downloading 📥 Real-time Messaging: Sockets for Instant Communication 💬 Chat Support: Group Chats and Personal Messages 👥💬 Fun Conversations: Emoji Support 😄 Backend: Node.js and Express 🛠️ Database: MongoDB for Efficient Data Storage 🗄️ State Management: Zustand for Seamless State Management 🧠 API Calls: Axios for Smooth API Interactions 🌐 Code Quality: Structured and Maintainable Code 📚 ⏱️ Timestamps -------------------------------------------------------------------------------- 00:00 Demo 05:29 Hostinger 07:47 Environment Setup 20:00 Routing Setup 23:50 Auth UI 45:40 Server Setup 01:02:40 Auth Model 01:09:05 Auth Integrate 01:43:30 Zustand Setup 01:49:10 JWT Token Verification & Middleware 02:07:56 Profile UI 02:30:22 Profile API 02:42:10 Profile Image 03:11:30 Chat Layout 03:15:40 Empty Chat Screen 03:24:40 Contacts Container 03:28:50 Chat Container 03:54:55 Profile Info Component 04:05:00 Logout 04:10:25 Direct Messages Modal 04:22:10 Search Contacts 04:41:50 Contact Info 04:52:00 Socket Setup Backend 04:59:10 Socket Setup Frontend 05:05:00 Message Schema 05:09:40 Send/Receive Message 05:41:10 Get All Messages 05:49:50 Get User Contacts 06:15:10 Send/Receive Files 06:35:30 Download Files Programatically 06:39:25 Image Download 06:45:15 Download/Upload Files UI 06:56:08 Get All Contacts API 06:59:30 Create Channel Modal UI 07:12:03 Channel Model 07:16:52 Create Channel API 07:29:38 Get User Channels 07:37:15 Send/Receive Channel Message 08:02:40 Send/Receive Channel Files 08:04:30 Get Channel Messages 08:18:30 Deployment