Morgan Logo
[ Client Project ]

MAP DXB

Production real estate platform (UAE market)

THE CHALLENGE

Building a real estate platform for the UAE market requires handling large property datasets with heavy images, multilingual support (EN/AR), and fast filtering while maintaining performance across devices.

ROLE:Frontend Developer
YEAR:2024
TYPE:Client Project
STATUS:Live

TECH STACK

ReactNext.jsTypeScriptREST APITailwind CSS
I

Engineering Approach

Frontend Architecture Planning

Engineered the complete frontend architecture with focus on image-heavy listing pages and dynamic filtering capabilities.

API-Driven State Management

Integrated with backend API using structured state management to ensure predictable UI updates as property data changes.

Multilingual Infrastructure

Implemented proper i18n routing for English and Arabic with RTL support and URL structure considerations.

Performance Optimization

Applied image optimization, lazy loading, and code splitting to maintain fast browsing despite large media assets.

II

Key Technical Decisions

The choices that shaped the architecture and determined long-term maintainability.

Next.js for SEO

Used Next.js with SSR for property listings

WHY

Real estate platforms need search engine visibility for organic traffic, requiring server-side rendering

Image Optimization Strategy

Implemented next/image with responsive srcsets

WHY

Property images are the main selling point but also the biggest performance bottleneck

URL-Based Multilingual Routing

Used path-based localization (/en, /ar) instead of subdomain

WHY

Simpler deployment and better SEO indexing for both language variants

Client-Side Filtering

Implemented filtering logic on the frontend with URL state

WHY

Faster user experience and shareable filter states via URL parameters

III

Challenges & Solutions

[ CHALLENGE ]

Initial page load times were 5+ seconds due to large property image galleries

[ SOLUTION ]

Implemented progressive image loading with blur placeholders and lazy loading for images below the fold

[ CHALLENGE ]

Arabic RTL layout was breaking component layouts and causing visual bugs

[ SOLUTION ]

Used logical CSS properties (start/end instead of left/right) and tested all components in both directions

[ CHALLENGE ]

Property data updates weren't reflecting in real-time for users

[ SOLUTION ]

Implemented optimistic UI updates with proper error handling and cache invalidation strategies

IV

Outcomes & Impact

MAP DXB launched as a performant, bilingual real estate platform serving the UAE market with fast property browsing and search functionality.

<2s
Page load time
100%
Lighthouse performance
2
Languages supported

KEY TAKEAWAYS

Client projects require balancing ideal architecture with real-world constraints. Sometimes 'good enough' shipped is better than 'perfect' delayed.