Micro Frontends with Module Federation on the Qatar Events Platform
Unified hub for planning and coordinating Qatar's National Events Calendar, connecting government entities and preventing scheduling overlaps nationwide.
Updated
- Supreme Committee for Delivery & Legacy
- Company
- Senior Full-Stack Developer
- Role
- Oct 2025 - Aug 2026
- Period
- Doha, Qatar
- Location
Architecture
One interface, separate release boundaries
The Qatar Events Platform coordinates the National Events Calendar across government entities. My frontend rearchitecture moved a monolithic React application to Module Federation micro frontends, with versioned contracts between the shell and its remotes. The delivery goal was to let teams deploy independently while keeping one application experience.
In webpack's Module Federation model, separately built applications expose and consume modules at runtime. In this view, the shell composes the interface and each remote has its own build and release boundary. The contract is the agreed integration surface between them.
A remote can change internally while its contract remains compatible. A breaking contract change still needs coordination with its consumers. Independent deployment therefore depends on boundary discipline as well as the bundler configuration.
Delivery workflow
What changed for a frontend release
Before: React monolith
- Change a feature inside the shared frontend.
- Build the frontend as one application.
- Ship the change through the application's shared release boundary.
After: shell and remotes
- Change a remote within its versioned contract.
- Build and release that remote independently.
- The shell loads the deployed module at runtime.
This is a high-level comparison of the build and release boundaries. Team-specific test stages, approval gates and deployment configuration are outside its scope. The shell retains its own release lifecycle, and changes to a shared contract can still require a coordinated release.
Reported outcome: approximately 40% shorter release cycles
My project record reports approximately 40% lower release cycle time and the ability for teams to deploy independently. The original baseline durations, exact start/end definition, release sample and observation window are not published with this case study. Treat the percentage as a reported historical outcome rather than a reproducible benchmark. It describes delivery time, not browser rendering or page-load speed.
To assess the same change on another project, define consistent start and end events, compare similar releases before and after, and record time spent waiting for other teams separately from build and deployment time. Those are suggested evaluation steps, not a reconstruction of the original measurement.
Read the Module Federation implementation guide for example configuration and integration tradeoffs. The error-boundary demo shows local React failure isolation with synthetic sections; it does not run independently deployed federated builds. For relevant roles, see my React experience.
01 The work
What I did
- 01
Rearchitected a monolithic React frontend into Micro Frontends using Module Federation, defining versioned contracts between the shell and remotes, cutting release cycle time by approximately 40% and enabling teams to deploy independently.
- 02
Designed data-intensive dashboards and real-time event density heatmaps with ApexCharts, giving stakeholders across 10+ government entities nationwide visibility into event scheduling and preventing calendar conflicts.
- 03
Standardized Vite and Webpack build pipelines, ran Azure DevOps and Jenkins CI/CD deployments, led code reviews, and mentored 7 junior developers alongside backend, product, and design teams.
02 Tools
Stack
03 Articles
How it was done
- RAG in .NET with Azure OpenAI and Azure AI SearchRetrieval-augmented generation in C#: chunk and embed documents, index them in Azure AI Search, run a hybrid vector query, and ground the answer with citations.
- Redux Toolkit, Zustand or Context: where React state belongsServer state, shared client state, local UI state and URL state each have a natural home. When to use TanStack Query, Redux Toolkit, Zustand or Context.
- React micro frontends with Module Federation: split a monolithWhen micro frontends are worth it, how a shell and its remotes fit together, and the contracts that keep independent deploys from breaking each other.
Work with me
Available immediately
Based in Lahore, Pakistan, open to remote work and relocation.
Related experience: Frontend developer, .NET developer, Azure developer.