/de-link-chat-app

Chat Application using MERN stack and Socket.io

Primary LanguageJavaScript

CHAT APP using MERN stack and SOCKET.IO 🀠


Features

  • Authentication
  • Real-time chat
  • Real-time Notification
  • Typing indicator
  • Guest login
  • Group chat
  • One-on-one chat
  • Responsive

Demo

ScreenShot

ScreenShot

ScreenShot

Guest User

Gif

User Signup

Gif

Search User

Gif

View Profile

Gif

Guest User

Gif

Search User

Gif

Your profile

Gif

Create Group

Gif

Gif


Version 1.0.0

Code and documents to create real-time chat application using the following stack

  • MongoDB (Database)
  • ExpressJS (Web application framework)
  • NodeJS (JavaScript Runtime)
  • React (Frontend framework)
  • Socket.io (web sockets for real time chat)

Other dependencies


File structure

client |───────────src β”‚ App.css β”‚ App.js β”‚ index.css β”‚ index.js β”‚ β”œβ”€β”€β”€components β”‚ ChatBox.jsx β”‚ GroupChatModal.jsx β”‚ Loader.jsx β”‚ Login.jsx β”‚ MyChats.jsx β”‚ ProfileModel.jsx β”‚ Register.jsx β”‚ ScrollableChat.jsx β”‚ SideDrawer.jsx β”‚ SingleChat.jsx β”‚ UpdateGroupChatModal.jsx β”‚ UserBadgeItem.jsx β”‚ UserListItem.jsx β”‚ β”œβ”€β”€β”€config β”‚ ChatLogics.js β”‚ β”œβ”€β”€β”€context β”‚ ChatProvider.js β”‚ β”œβ”€β”€β”€pages β”‚ ChatPage.js β”‚ FourOFour.js β”‚ HomePage.js β”‚ └───Util valid.js |────────node_modules |────────public server β”‚ db.js β”‚ server.js β”‚ token.js β”‚ β”œβ”€β”€β”€controllers β”‚ chatControllers.js β”‚ messageControllers.js β”‚ notificationController.js β”‚ userControllers.js β”‚ β”œβ”€β”€β”€middleware β”‚ authMiddleware.js β”‚ errorMiddleware.js β”‚ β”œβ”€β”€β”€models β”‚ chat.js β”‚ message.js β”‚ notification.js β”‚ user.js β”‚ └───routes chatRoutes.js messageRoutes.js notificationRoutes.js userRoutes.js


Contributors


License & copyright

©️ Vaibhav Dhiman