Skip to content
AM
Case Study·Client project·Full Stack Engineer — Real-Time WebSocket Architecture

Zeppler

Real-Time Dating Platform

Real-time dating platform featuring email and Google authentication, user profile discovery, a real-time chat system, and an admin moderation panel.

github.com/AmirMaqbool0/Zeppler_Online_Dating
Zeppler real-time dating application match stream and chat interface

01Context & Problem

The platform required a responsive web experience where users could discover profiles and communicate in real time. The scope included email and Google authentication, user profile discovery, a real-time chat system with WebSockets, and an admin moderation panel.

02Engineering Ownership

What I Built

  • ▸Built email and Google authentication workflows using JWT and OAuth 2.0 (Google).
  • ▸Implemented user profile discovery interfaces and endpoints using React and Express.js.
  • ▸Engineered the real-time chat system using Socket.IO and WebSockets.
  • ▸Created the admin moderation panel with role-based access control in React.

What I Did Not Build

  • ▸Worked from product specifications provided by the client rather than designing the user interface myself.

03Stack & Rationale

React & Redux Toolkit

Client interface and state management for user profile discovery and active chats.

Socket.IO & WebSockets

Bidirectional real-time communication enabling instant message delivery.

Node.js & Express.js

REST APIs for profile management and authentication paired with the real-time server.

MongoDB & Mongoose

Document storage for user accounts, profiles, and chat message history.

04System Architecture

Component topology, data flows, and authorization boundaries:

React ClientRedux Toolkit StateSocket.IO ClientChat UIWebSockets (WSS)REST Auth / ProfilesNode / Express ServerSocket.IO Room DispatchProfile DiscoveryOAuth 2.0 VerificationMongoDBUsers · Chats · Matches

05Authentication & Authorization

Authentication supports email and Google authentication, issuing a JWT on login, which auth middleware verifies on every protected route. Authorisation is enforced by role-based access control middleware that separates standard user access from admin access. If I were rebuilding this now I would move token storage to HTTP-only cookies and add automated tests around the auth middleware.

06Hard Technical Challenges & Solutions

Restricting Socket Access to Authenticated Users

Problem: Socket connections required verification before allowing users to enter chat rooms or send messages.

Solution: JWT verification was integrated into Socket.IO connection middleware, establishing the authenticated user identity before chat events were processed.

Admin Moderation Access Control

Problem: Admin moderation tools required access to user profiles and reports without exposing moderation endpoints to standard users.

Solution: Role-based access control middleware checked administrative privileges on protected Express.js routes before allowing moderation actions.

07What I Would Do Differently Now

Engineering Retrospective & Critical Critique

If I were building this platform today, I would add automated testing for the Socket.IO event handlers and REST API endpoints. I would also containerize the application using Docker and set up CI/CD with GitHub Actions to automate testing.