Alex / Work
NEOM The Line Portal
Back to projects

NEOM The Line Portal

An interactive mapping and exploration platform built with Next.js and React for visualizing developments, assets, and personas along NEOM's The Line megaproject, powered by Sanity CMS and Mapbox GL

Visit Site
Next.jsReactTypeScriptSanity CMSMapbox GLFramer MotionZustandTailwind CSSReact Map GL

An interactive mapping platform for visualizing developments, assets, and personas along NEOM's "The Line" megaproject. Built with Next.js, Sanity CMS, and Mapbox GL for interactive geospatial visualization.

View Live Application (Note: May not remain online indefinitely)

Status: Project cancelled before release due to issues with The Line development

NEOM's The Line is a planned 170-kilometer linear city in Saudi Arabia. This platform enabled users to navigate through regions, sub-regions, and individual assets along The Line, visualizing everything from restaurants and retail spaces to golf courses and saunas.

Interactive Mapping

Built with Mapbox GL JS and React Map GL for high-performance geospatial visualization. Features color-coded asset markers, intelligent clustering, interactive popups, and custom The Line polygon overlay. Users can filter by region, category, persona, and development stage with real-time search.

Content Management

Sanity CMS integration with structured content types for regions, sub-regions, assets, personas, and categories. Each asset includes comprehensive data: coordinates, categorization, development stage, image galleries, and modular information windows for technical specs, research, facilities, and guest journeys.

Technical Implementation

Next.js 14 with TypeScript, Zustand for filter state, and client-side filtering for performance. Complex nested routing structure (/regions/[region-name]/[sub-region-name]/[asset-name]) with breadcrumb navigation. Full TypeScript type generation from Sanity schemas.

The project was cancelled before release due to broader issues with The Line development, despite being fully functional and technically complete.

Omage

Omage