Functional depth
Linked exploration
Filters, routes, and quick views stay connected so users can move from regional patterns to project-level detail without losing context.
Project details / UNOPS Data Portal
A global data portal to explore projects for The United Nations
The UNOPS Data Portal is a React application for exploring United Nations Office for Project Services data across countries, partners, and Sustainable Development Goals. The site is fully managed through Craft CMS, which supplies the page configuration and content rendered by the frontend. The same dataset is available through globe, chart, and table views, with filters and route state carried across each experience. It is built as an accessible application, using best practices in A11Y across the globe, chart, and table views.
- Role
- Senior frontend developer
- Focus
- Architecture and implementation
- Product
- Craft CMS-managed data portal
Product walkthrough
Globe, chart, and table views share a common filter model.
Switch between discovery, comparison, and record-level detail without losing the current selection.
Globe view, 1 of 3
View 01 / Globe
An interactive globe for geographic discovery
Mapbox rendering supports clustered project locations, changing detail by zoom level, and contextual access to the underlying records.
View 02 / Chart
Chart mode for distribution and comparison
The chart view summarizes the current filtered selection, making it easier to compare regional proportions without leaving the route.
View 03 / Table
Table mode for record-level verification
Sortable project records and export actions retain the same top-level filters used in globe and chart mode.
Designed for mobile use
Navigation and view switching adapt to a smaller screen while keeping the same routes and data.
Project overview
One project dataset, explored from several angles.
The interface connects broad geographic patterns to individual project records, with context carried between each view.
Product model
Three views, one dataset
Map clusters, chart distributions, and sortable tables present the same project data instead of splitting it across disconnected screens.
Engineering
Configured for change
CMS-configured pages keep rendering consistent while allowing layouts, components, and data sources to evolve independently.
Engineering notes
Specialized tools around a configurable frontend.
The implementation combines a CMS-driven page model with focused libraries for routing, data state, mapping, charts, and browser testing.
Application
React and TypeScript
Typed component architecture for the portal shell and its view-specific interfaces.
Content
Craft CMS
Page configuration and content delivered to the frontend through the pages API.
Routing
TanStack Router
Shareable routes for top-level views, detail pages, and URL-backed state.
Data and UI state
React Query and Zustand
Separate async data lifecycle from local filter and interaction state.
Mapping
React Map GL and Mapbox
Globe rendering, clustered points, geographic focus, and country interaction.
Charts
Apache ECharts
Distribution charts and scorecards built from the filtered project dataset.
Interface
Tailwind CSS and Flowbite
Reusable layout and interface primitives inside a branded portal shell.
Testing
Playwright
Browser-based regression coverage for important routes and view states.