MERN Stack Web Chat App

A real-time messaging application built using the MERN stack (MongoDB, Express.js, React.js, and Node.js). Provides features like real-time messaging, user authentication, support for emojis and file attachments,

Features

• Real-time messaging
• User authentication
• Emoji support
• File attachments

Tech Stack

Client: React, Redux, SASS, Socket.IO

Server: Node, Express, Socket.IO

Database: MongoDB

Run Locally

Clone the project

  git clone https://github.com/kamawallsec/web-chat-app-mern-stack

Go to the project directory

  cd frontend
  cd backend
  cd socket

Install dependencies

  npm install

Start the server

  npm run dev

Dependencies

Backend

"bcrypt": "^5.1.0",
"body-parser": "^1.20.2",
"concurrently": "^8.2.0",
"cookie-parser": "^1.4.6",
"dotenv": "^16.3.1",
"express": "^4.18.2",
"formidable": "^3.5.0",
"jsonwebtoken": "^9.0.1",
"mongoose": "^7.4.3",
"nodemon": "^3.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router": "^6.15.0",
"resolve-url-loader": "^5.0.0",
"validator": "^13.11.0"

Frontend

"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.4.0",
"jwt-decode": "^3.1.2",
"moment": "^2.29.4",
"node-sass": "^9.0.0",
"react": "^18.2.0",
"react-alert": "^7.0.3",
"react-alert-template-basic": "^1.0.2",
"react-dom": "^18.2.0",
"react-hot-toast": "^2.4.1",
"react-icons": "^4.10.1",
"react-redux": "^8.1.2",
"react-router-dom": "^6.15.0",
"react-scripts": "5.0.1",
"redux": "^4.2.1",
"redux-thunk": "^2.4.2",
"socket.io-client": "^4.7.2",
"use-sound": "^4.0.1",
"web-vitals": "^2.1.4"

Socket

"nodemon": "^3.0.1",
"socket.io": "^4.7.2"

Usage

• Register an account or log in if you already have one.
• Start a new conversation or join an existing one.
• Send messages, emojis, or file attachments.

Screenshots