Alex Rankin

2024

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

Stack
Next.js / React / TypeScript / Sanity CMS / Mapbox GL / Framer Motion / Zustand / Tailwind CSS / React Map GL
Field
development

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.

NEOM The Line Portal — 1 of 6

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

NEOM The Line Portal — 2 of 6

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.

NEOM The Line Portal — 3 of 6

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.

NEOM The Line Portal — Interactive Mapping

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.

NEOM The Line Portal — Content Management

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.

NEOM The Line Portal — Technical Implementation

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