All Projects
Case StudyRole: Lead Frontend EngineerTimeline: 8 Months

Social Event Management Platform

GADA is a community-driven event platform designed to transform how people discover events, connect with others, and engage in shared experiences. The platform enables organizers to create and manage events while providing attendees with tools to explore experiences, interact through social feeds and stories, participate in polls, and connect through event-based conversations. By combining event management with social engagement, GADA goes beyond traditional event discovery to help organizers grow engaged audiences and build lasting communities around their events.

#Next.js#TypeScript#Tailwind CSS#Zod#PWA#Firebase Cloud Messaging
Social Event Management Platform screenshot slide 1
Click to open fullscreen lightbox
1 / 1
The Challenge

Problem & Goals

  • Microservices SSO & Cold-Start Resilience: Managed cross-ecosystem authentication across multiple microservices (isce-auth, wallet-nest, and events APIs). Architected a dual-algorithm JWT verification pipeline (migrating from HS256 to RS256 JWKS) featuring in-flight request deduplication and cooldown caching to eliminate auth server stampedes during cold starts.

  • Next.js 16 & React 19 Tooling Adaptations: Overcame bundler breaking changes where legacy Workbox/PWA libraries conflicted with Next.js 16’s Babel 8 environment. Replaced fragile wrappers with a custom prebuild service worker pipeline and stabilized React 19 real-time Socket.io connections to prevent connection churn and memory leaks.

  • Real-Time Sync & Dual Notification Layer: Orchestrated active in-app messaging (Socket.io with auto-reconnection & exponential backoff) alongside background push notifications (Firebase FCM), handling edge cases around stale device tokens, unread counter race conditions, and browser permission quirks.

  • BFF Data Aggregation & Network Fault Tolerance: Solved frontend N+1 analytics bottlenecks and mismatched multi-service schemas by introducing a defensive normalization layer. Added smart retry mechanisms (distinguishing transient network drops from confirmed 404s/403s) to prevent false-positive error screens.

The Solution

Approach & Implementation

  • Zero-Downtime Auth Proxy & Stampede Protection: Engineered an edge proxy layer (proxy.ts + verify-jwt.ts) featuring strict algorithm pinning (dual-support for HS256 and RS256 JWKS). Implemented in-flight promise deduplication and cooldown caching to protect the auth server from cold-start stampedes, paired with double-submit CSRF cookie protection.

  • Custom Tooling & Decoupled Service Worker Pipeline: Solved Next.js 16 / Babel 8 bundler incompatibilities with legacy PWA packages by building a custom prebuild pipeline script (generate-firebase-sw.js). This dynamically injects runtime environment secrets into standalone service workers without reliance on broken Workbox wrappers.

  • Lifecycle-Stable Real-Time Sockets & FCM Integration: Stabilized Socket.io client connections across React 19 component lifecycles using ref-stabilized callbacks, eliminating teardown loops. Coupled this with exponential backoff reconnection, auto-resubscription, and a unified browser permission controller (usePermissions) with self-healing FCM token rotation.

  • Fault-Tolerant BFF & Defensive Data Normalization: Created a resilient data layer (actions/events.ts) featuring a typed status state machine (found, not_found, unauthorized, error) with automated 400ms retry delays for transient network glitches. Built schema normalization utilities and custom date/time parsers to eliminate SSR hydration mismatches across multi-service data models.

Technical Architecture

Core Architecture & Highlights

Built with Next.js 16 (App Router, Server Actions), React 19, TypeScript, and Tailwind CSS v4.

Connects seamlessly with isce-auth (SSO), events-api, wallet-nest (payments), and AWS S3.

Custom proxy.ts handling route guarding, silent token refreshes, and double-submit CSRF protection.

Socket.io messaging with ref-stabilized listeners, auto-resubscription, and exponential backoff reconnection.

Comprehensive CSP, HSTS, frame-ancestors, and WebSocket policies protecting embedded widgets and APIs.