Frontend architecture for Dubai Municipality services.
At XD.AI, I worked as a Senior Software Engineer on Dubai Municipality projects, including Montaji Plus, UPS, and a shared React component library. My responsibility combined feature delivery with the frontend architecture those services depended on.
Explore this chapter
Different services, a shared engineering foundation
Montaji Plus brought product registration, import and export workflows, and compliance checks into a data-heavy application. UPS brought multiple permit and licensing services into shared user journeys. Both needed interfaces that could handle complex rules while keeping the next step understandable.
Alongside those products, I designed and maintained the React Component Library. That made reuse a practical part of delivery across teams. I worked on the individual services and on the components, state patterns, and integration conventions they could share.
What I worked on.
Data-heavy frontend architecture
I architected React and TypeScript workflows for large record views, using state normalization, caching, and virtualization to keep rendering responsive. I treated data fetching and state updates as architectural decisions because they affected how every screen behaved under load.
Product registration and permits
I led development across core modules in Montaji Plus and UPS. The work included registration processes, compliance checks, and permit flows, with reusable UI and integration patterns that helped the services follow consistent conventions.
The shared component library
I designed and maintained reusable React components and shared interface standards. The library work covered component architecture, design tokens, accessibility, and documentation, with the aim of making shared behavior practical for engineers working on different products.
Architecture with the wider team
I worked with backend engineers, QA, and designers on modernization and architectural decisions. Code reviews and technical documentation helped connect those decisions to implementation across modules and services.
How I work.
Trace the cost of a slow screen
I look at fetching, caching, state structure, and rendering together. This work strengthened that habit. Virtualization addressed large views, while normalized state and deliberate cache behavior addressed the data updates that fed them.
Build shared patterns around actual use
I used the needs of the service modules to inform the shared foundations. Components needed predictable behavior, documentation, and accessibility support so that another team could use them without recreating the same implementation decisions.
Skills I developed.
Frontend architecture at service scale
I developed a deeper understanding of how state ownership, API integration, and module boundaries affect a product as its workflows grow. Small conventions become consequential when multiple services depend on them.
Design systems as engineering work
Owning shared components sharpened my judgment about component APIs, accessibility, and reuse. Consistency depends on how a component behaves and how easily a team can understand it.
Performance as a system concern
I strengthened my ability to connect a visible performance problem to its underlying cause. Large-data work required attention to the entire path between a request, a state update, and the resulting render.
Inside the work.
Montaji Plus
Dubai Municipality platform for product registration, import/export workflows, and compliance checks built for large-scale, data-heavy operations.
Read the engineering story
The problem
High-volume product and shipment workflows required fast rendering, stable UX, and consistent patterns across complex compliance steps.
The approach
Built a scalable frontend architecture using React and TypeScript, introduced optimized data-fetching and caching strategies, and applied virtualization to handle large datasets efficiently.
Implementation details are generalized to respect government and client confidentiality. The project is a proprietary government project and is not open source.
Unified Permits Service
Unified permitting platform consolidating multiple licensing services into consistent user journeys and shared UI and integration standards across Dubai Municipality.
Read the engineering story
The problem
Multiple permit services evolved independently, leading to inconsistent user experiences, duplicated frontend logic, and increasing maintenance and delivery costs.
The approach
Introduced shared frontend architecture, reusable UI components, and standardized integration patterns to unify user journeys and reduce duplication across services.
Technical and business details are generalized due to government confidentiality. The project is a proprietary government project and is not open source.
React Component Library
Shared React component library built for Dubai Government platforms to unify the design system across multiple services, accelerating delivery and enforcing consistent, accessible UI standards.
Read the engineering story
The problem
Dubai Government product teams were independently rebuilding similar UI components, leading to inconsistent experiences, duplicated logic, and increased maintenance overhead. This was slowing down delivery and increasing maintenance costs.
The approach
Created a centralized, government-grade component library with strict architectural and accessibility standards, enabling teams to reuse components confidently and consistently. This has significantly reduced duplicated UI development and increased maintainability.
Component implementations and internal tooling details are generalized due to government confidentiality.
Tools of the work.
- React
- TypeScript
- Vite
- Redux Toolkit
- RTK Query
- Tailwind CSS
- Webpack
- REST APIs