Back to Projects

Echo — Real-Time Chat App

An authenticated MERN 1:1 direct messaging application with native WebSocket real-time delivery, live online-presence tracking, and Cloudinary-powered image sharing.

Tech Stack

  • Frontend: React 18, Vite, React Router, Zustand
  • Backend: Node.js, Express.js, WebSocket (`ws`)
  • Database: MongoDB, Mongoose (2 Models)
  • Auth: JWT (HttpOnly Cookie), bcrypt hashing
  • Media: Cloudinary Image Uploads
  • Styling: Tailwind CSS, DaisyUI (33 Themes)
  • API Client: Axios (Credentialed Requests)

Key Accomplishments

  • Full-Stack Chat Application: Shipped an authenticated 1:1 chat app with 5 React routes, 8 REST endpoints, 5 protected backend routes, and 2 MongoDB models — handling registration, login, conversation discovery, and message persistence.
  • Hardened Session Security: Secured sessions with JWT cookies — bcrypt-hashed passwords, 7-day expiry, httpOnly + sameSite=strict flags, and credentialed Axios interceptors ensuring zero token exposure to client-side scripts.
  • Native WebSocket Messaging: Built real-time direct messaging using native ws — user-to-socket mapping, online-user broadcasts on connection events, and auto-scrolling chat history retrieval with instant delivery.
  • Rich Media Messaging: Enabled image sharing with client-side FileReader previews, 1 MB upload guards, Cloudinary auto-optimization on ingest, and atomic message persistence linking media URLs to conversation threads.
  • Centralized State Architecture: Organized frontend state into 3 Zustand stores — auth/socket state, active conversation state, and persisted theme selection — enabling clean separation of concerns across 33 switchable DaisyUI themes.