← Work
Earlier project · 2024

Chat App

Real-time messaging platform with public groups and private messaging. Next.js frontend with Express backend. WebSocket-based communication via Socket.io, MongoDB storage, Passport authentication.

Live site ↗Source ↗
chatreal-timefull-stackmessagingwebsocket
Chat App

Chat Application - Real-Time Messaging

Overview

Dynamic real-time messaging platform enabling users to connect through public groups and private one-on-one conversations. Full-stack application with WebSocket-based communication for instant message delivery.

Key Features

  • Real-time Messaging: Instant message delivery via Socket.io WebSockets
  • Public Groups: Create and join community chat groups
  • Private Messaging: Secure one-on-one conversations between users
  • User Search: Find and connect with other users
  • User Authentication: Secure signup and login with Passport.js
  • Online Status: Real-time user presence indicators
  • Message History: Persistent message storage in MongoDB
  • User Profiles: Personal profiles with user information
  • Emoji Support: Rich emoji integration in messages
  • Typing Indicators: See when users are typing
  • Responsive UI: Mobile-friendly interface with Chakra UI

Tech Stack

Frontend

  • Framework: Next.js 14 with React 18, TypeScript
  • UI Library: Chakra UI with Emotion styling
  • State Management: Redux Toolkit
  • Real-time: Socket.io client for WebSocket communication
  • Icons: React Icons
  • Animations: Framer Motion for smooth transitions

Backend

  • Runtime: Node.js
  • Framework: Express.js
  • Language: JavaScript/TypeScript
  • Authentication: Passport.js with JWT tokens
  • Real-time: Socket.io server for WebSocket handling
  • Database: MongoDB with Mongoose

Deployment

  • Frontend: Vercel serverless
  • Backend: AWS EC2/ECS
  • SSL: Certbot for HTTPS

Architecture

  • Event-driven WebSocket communication
  • JWT token-based authentication
  • MongoDB document-oriented storage
  • Microservices-ready architecture

API Features

  • User management (register, login, get profile)
  • Group operations (create, join, leave)
  • Message operations (send, receive, get history)
  • Real-time notifications via Socket.io
  • User search and discovery

Database Schema

  • Users collection with profiles and credentials
  • Groups collection with metadata
  • Messages collection with timestamps
  • Relationships for group membership

Performance

  • Message indexing for fast retrieval
  • Connection pooling
  • Efficient WebSocket handling
  • Real-time updates optimization

Live Demo

Chat App