🔥 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: / discord
Contact for Collaborations/Freelancing/Projects: kishansheth21@gmail.com
📚 Resources & Links:
--------------------------------------------------------------------------------
Assets: https://drive.google.com/file/d/1_rre...
multiselect.jsx Component: https://gist.github.com/koolkishan/b1...
Logo: https://gist.github.com/koolkishan/8b...
👇 Follow me here:
--------------------------------------------------------------------------------
💻 Join our Discord Community - / discord
🐦 Follow me on Twitter - / thekishansheth
🖼️ Follow me on Instagram - / thekishansheth
💼 Follow me on LinkedIn - / 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
