One Source

One Source is an interactive GIS platform built for Riyadh that empowers users to visualize and analyze demographic data, business densities, and sector statistics on a dynamic map. The platform combines spatial data analysis with intuitive visualization to provide actionable insights, while enabling users to generate detailed PDF reports of their analyses.

The platform was built as a full-stack solution with clear separation between backend and frontend. NestJS powered the backend, providing a robust and scalable foundation with integrated authentication and PostGIS for advanced geospatial queries on PostgreSQL. Next.js was used for the frontend, delivering a performant React-based interface that seamlessly integrated with the backend APIs. Mapbox GL JS was integrated to provide an interactive, responsive mapping experience that allows users to explore demographic and business data visually. Puppeteer was implemented for server-side PDF generation, enabling users to export their analysis and map visualizations as detailed reports. Typescript and Tailwind CSS ensured type-safe code and rapid UI development throughout the project.

The initial PDF generation implementation using Puppeteer was significantly slow, taking over 30 seconds to generate a single report. This was a critical bottleneck affecting user experience. Through performance profiling and optimization, the generation time was reduced to just 5 seconds, a six-fold improvement. The optimization involved streamlining the rendering pipeline, optimizing asset loading, and implementing efficient caching strategies, ensuring users could quickly generate and download their reports without frustration.