Next.js • React
ChittChatt – Real-Time Chat App (Discord Clone)
ChittChatt is a full-featured Discord-like real-time messaging application built using Next.js. The goal was to create a scalable, secure, and responsive messaging platform with all the core features of modern chat tools: real-time messaging, group chat, reactions, custom emoji, and end-to-end encryption.
- Client
- Internal Project / SaaS Prototype
- Year
- 2024
- Industry
- Communication / SaaS / Social Networking
- Platform
- Next.js (Full Stack React Framework)
- Built with
- Next.js, React
Overview
This was developed as both a learning challenge and a showcase of production-ready chat app architecture, with a special focus on security, speed, and scalability.
Objectives
- Build a real-time chat app with group channels and DMs
- Implement end-to-end encryption for all private messages
- Support reactions, custom emoji, and chat personalization
- Ensure seamless performance in group conversations
- Create a clean and responsive UI, desktop and mobile-friendly
- Replicate and improve upon Discord-like experience
My role
- Full-stack development using Next.js
- Built the real-time WebSocket infrastructure
- Implemented end-to-end encryption architecture
- Designed and developed custom UI/UX with Tailwind & Framer Motion
- Developed backend APIs (REST + WebSocket logic)
- Set up MongoDB database schema and message handling logic
Tech stack & tools
- Next.js for full-stack React framework
- WebSockets (Socket.IO) for real-time bidirectional communication
- MongoDB (with Mongoose) for storing messages, users, and channels
- JWT + bcrypt for authentication and secure login
- End-to-End Encryption (E2EE) using AES with client-side encryption keys
- TailwindCSS for responsive design and UI components
- Framer Motion for animations and smooth UI transitions
Real-Time Chat with WebSockets
The core of the app uses Socket.IO to enable instant messaging between users. Messages appear in real time, with typing indicators, delivery status, and instant UI updates — delivering a true chatroom experience.
End-to-End Encryption
Implemented AES-based encryption for private messages to ensure zero-knowledge messaging — even the server can’t read the messages. Encryption and decryption occur client-side, and keys are exchanged securely during session initiation.
Group Chats and Channel System
Users can create public or private groups, invite others, and assign admin roles. Each group works like a Discord server with its own message history, emojis, and settings.
- Message history persists even after refresh
- Admins can kick or ban users
- Option to pin messages or mark as important
Custom Emoji and Reactions
Developed a fully custom emoji and reactions system, allowing:
- Reacting to messages with built-in or custom emojis
- Emoji picker with search and recently used tabs
- Reaction counters update live via WebSocket
Group Chats and Channel System
Users can create public or private groups, invite others, and assign admin roles. Each group works like a Discord server with its own message history, emojis, and settings.
- Message history persists even after refresh
- Admins can kick or ban users
- Option to pin messages or mark as important