Yapp
A real-time full-stack chat application powered by Socket.io — instant messaging, typing indicators, and online presence built on the MERN stack
What is it?
Yapp is a modern real-time chat application built on the MERN stack, designed for fast and seamless one-on-one messaging. It uses Socket.io for WebSocket-based bidirectional communication — delivering messages instantly without HTTP polling. Users can create accounts, search for others, and chat in real time with typing indicators and live online status. Built to demonstrate real-time full-stack architecture beyond typical CRUD applications.
What I Did
I engineered both the React client and Node.js/Express server from scratch. I implemented real-time bidirectional communication via Socket.io, designed the MongoDB schema for messages and users, managed frontend state for active chats and notifications, and built secure JWT authentication to protect all conversations.
Real-Time WebSocket Architecture
Implemented WebSocket connections using Socket.io for instantaneous message delivery, typing indicators, and online status updates — without constant HTTP polling. Events are optimised to minimise unnecessary network traffic.
Secure JWT Authentication
Secured the application with JWT-based authentication, hashing all passwords with bcrypt before storing in MongoDB. Protected routes ensure only authenticated users can access conversations.
Frontend State Management
Built React state management for active chats, incoming messages, and real-time notifications — ensuring a smooth, lag-free user experience even under rapid message streams.
- Message Delivery
- Real-Time
- Zero-latency bidirectional communication via Socket.io WebSockets
- User Authentication
- Secure
- JWT authentication with bcrypt password hashing protecting all user data
- Typing Indicators
- Instant
- Live typing state broadcast to conversation partners in real time
- Full Stack Architecture
- MERN
- MongoDB, Express, React, Node.js — all layers built and deployed by one developer
- Real-time one-on-one messaging via Socket.io WebSockets
- Typing indicators broadcast to conversation partner instantly
- Live online presence and status updates
- User search and discovery
- Secure JWT authentication with bcrypt password hashing
- Responsive, mobile-friendly UI
- Optimised WebSocket event emission to reduce network traffic
- Scalable MongoDB schema for high-volume message storage
Optimised WebSocket event emission to reduce unnecessary network traffic
Designed a scalable MongoDB schema for storing high-volume message data
Implemented clean React state management handling rapid message streams without stuttering
Full MERN stack deployment — React on Vercel, Node/Express/Socket.io on Render
Ready to build something amazing?
Interested in learning more about this project or starting a new full-stack development journey? Let's talk.