Overview
A cinematic, bilingual website where a UAE civil engineering practice presents its construction projects, from ground investigation and foundations to structure, MEP and handover. Visitors explore projects on an interactive map, follow each one through its timeline and view it in 3D. Behind it, an admin console lets a small team manage projects, draw site zones on the map and track progress.
The problem
Construction work is hard to convey with photos alone. The engineer needed to present projects spatially and over time to clients, and the team needed a practical tool to keep project data current.
What I built
Key features
- 01Master map of every project with filters, built on Mapbox
- 02Project pages with animated key figures, a site map, a draggable timeline, a gallery, a before-and-after slider and public documents
- 033D explorer that loads an uploaded model or generates a massing model from the zones drawn on the map, with floor isolate and explode tools
- 04Admin console with bilingual forms, zone drawing on the map, and management of phases, media and documents
- 05Team roles (admin, editor and viewer) enforced by policies
- 06English and Arabic with right-to-left layout, structured data for search engines, and a graceful fallback when maps or WebGL are unavailable
Architecture
- MySQL
- Laravel 12
- GeoJSON API
- Mapbox + Three.js
Decisions & challenges
Procedural 3D when no model exists
Without an uploaded model, the explorer builds one from the drawn zones: floors, roof, core and site context such as water, walls, trees and paving.
Heavy libraries load only where needed
Maps, PDF rendering and the Three.js viewer ship as separate chunks, so ordinary pages stay light.