Real time chat app

Real-Time Chat App

WhatsApp-style real-time chat — React + Styled Components on the client, Node/Express/MongoDB + Socket.io on the server, all in one monorepo.

Try it live

A full-stack chat playground built to learn WebSocket-based messaging end-to-end. The client (client/) is a Create React App single-page app; the server (server/ + index.js) is an Express API that handles auth and message persistence and runs a Socket.io gateway for instant delivery between online users.

Features

• Email/username register & login with bcrypt-hashed passwords
• Avatar picker (random SVG avatars via multiavatar.com)
• 1-on-1 real-time messaging over Socket.io with an online-users map
• Message history persisted in MongoDB and replayed on conversation open
• Emoji picker in the composer (emoji-picker-react)
• Toast notifications for auth and validation errors (react-toastify)
• React Router v6 routing across Login / Register / Set Avatar / Chat
• Production mode serves the built client straight from the Express app

Tech Stack

Client — React 17 (CRA) · Styled Components · React Router v6 · Axios · socket.io-client · emoji-picker-react · react-toastify

Server — Node.js · Express · Mongoose / MongoDB · socket.io · bcrypt · cors · dotenv

Tooling — nodemon · concurrently

Project Structure

.
├── index.js              # Express + Socket.io entry
├── server/
│   ├── controllers/      # userController, messageController
│   ├── models/           # User, Message (Mongoose)
│   └── routes/           # /api/auth, /api/messages
└── client/               # Create React App frontend
    └── src/
        ├── pages/        # Login, Register, Chat
        ├── components/   # ChatContainer, ChatInput, Contacts, SetAvatar, ...
        └── utils/        # APIRoutes

API

Socket events: add-user, send-msg, msg-recieve.

Credits

Built by Mohamed Gado.