Provides users with a single, cohesive platform for social networking and real-time communication — combining instant messaging, connection management, shared experiences, and interactive games in a secure and responsive environment.
Demo Accounts Available
Use the pre-configured credentials below to sign in and test the real-time chat, connection requests, and interactive games between two separate browser sessions.
Overview
Connect is a modern full-stack real-time social and chat platform built to provide a seamless communication experience. Users can register or log in via email/password or Google OAuth 2.0, and recover accounts using automated password-reset emails via Nodemailer. Once authenticated, sessions are secured with HttpOnly Cookies and JWT tokens.
The platform centers around a dynamic social graph — users can search for others in real time, send connection requests, accept or reject them, and safely remove connections. Removing a connection immediately soft-deletes the private chat membership, blocks further messaging, and uses WebSockets to auto-redirect both users — creating a clean, real-time social experience.
Real-time messaging is powered by Socket.IO, allowing users to instantly chat within private rooms. Messages support Edit and Delete operations, with updates broadcast instantly to all active participants. The chat layer is complemented by optimized MongoDB indexes on `ChatMember` and `Message` collections to ensure high-performance query execution even at scale.
Beyond messaging, Connect introduces Sparks — interactive real-time multiplayer games between connected users. This includes multiple games like Tic-Tac-Toe, Connect 4, and Quick Draw, alongside a server-authoritative 3D CSS-animated Coin Flip with synchronized real-time results delivered instantly via Socket.IO rooms. The platform also features AI-powered chat summarization for instant conversation digests. Additionally, it integrates a Shared Bucket List with colored category badges, a progress tracker, overdue indicators, and real-time sync — enabling connected users to plan and track shared goals together.
Built with React 19, Vite, TailwindCSS v4, Redux Toolkit, and TanStack React Query on the frontend, and Node.js, Express, MongoDB, and Socket.IO on the backend — Connect is architected for responsiveness, scalability, and a premium user experience.
Technologies Used
Key Highlights
- Dual authentication — Email/Password and Google OAuth 2.0
- Secure session management with HttpOnly Cookies and JWT
- Password recovery flow with automated email reset links via Nodemailer
- Real-time private messaging with Edit & Delete powered by Socket.IO
- AI-powered chat summarization for instant conversation digests
- Social connection system — send, accept, reject, cancel, and remove connections
- Smart connection removal with soft-delete, message blocking, and WebSocket-based auto-redirect
- Interactive Sparks (games) — Tic-Tac-Toe, Connect 4, Quick Draw, and 3D CSS Coin Flip
- Shared Bucket List with real-time sync, progress tracking, and overdue indicators
- Optimized MongoDB schema indexing on ChatMember, Message, UserConnection, and BucketList
- Modern React 19 + Vite frontend with TailwindCSS v4 and premium dark UI
Challenges Faced
Challenge 1: Handling real-time connection removal gracefully — when a user removes a connection, both users' UIs needed to instantly reflect the change without a page reload. Solution: Implemented a Socket.IO event that emits a removal signal to both active clients. On receipt, the frontend dispatches a Redux state reset and programmatically redirects both users away from the active chat, with the chat membership soft-deleted on the backend to prevent further message access. Challenge 2: Synchronizing real-time game state (Coin Flip) between two users in the same Socket.IO room with consistent and tamper-free results. Solution: Designed a server-authoritative game flow where the coin flip result is computed on the server and emitted to all room participants simultaneously, ensuring both users always see the identical result regardless of network timing. Challenge 3: Optimizing database performance for high-frequency queries on messages and chat memberships. Solution: Applied targeted MongoDB compound indexes — `{ chatId: 1, createdAt: -1 }` on the Message collection for efficient paginated message loading, `{ user: 1, isDeleted: 1 }` on ChatMember for fast membership lookups, and compound indexes on UserConnection for bidirectional relationship queries.
Key Learnings
Gained deep experience in real-time WebSocket architecture with Socket.IO, secure dual authentication flows with Google OAuth and JWT, optimized MongoDB schema design with compound indexing, building interactive 3D CSS animations, and architecting a scalable full-stack application with Redux Toolkit and TanStack React Query.
Future Scope
• Voice and video calling integration • Stories and status updates • Group chats and community channels • End-to-end message encryption (E2EE) • Additional Sparks (games) like Chess and Quiz • Push notifications via service workers • AI-powered chat summarization for instant conversation digests • AI-powered conversation suggestions
PROJECT SCREENSHOTS
Explore the user interfaces, database schemas, responsive dashboards, and core features of Connect.
