Cityscape Navigator – OOH Inventory & Vendor Platform

Delivered scope

• Integrates interactive GIS map search across cities, touchpoints, zones, and media formats.
• Generates instant, downloadable PowerPoint presentation decks with site specifications and photos.
• Includes vendor management, booking approval workflows, finance overview, and media format conversion scripts.

Technology

System approach

• Frontend: TanStack Start with React 19, TanStack Router/Query, Leaflet GIS mapping, and Radix UI components.
• Persistence Layer: MariaDB relational schema enforcing foreign-key hierarchies across cities, zones, touchpoints, sites, and vendors.
• Deck Generation: PptxGenJS pipeline rendering customized, high-res PowerPoint pitch decks directly from filtered inventory data.
• Security & Hosting: Salted scrypt password hashing, session tokens, audit trails, and automated database snapshot routines.

Challenges

• Rendering dense geographic inventory without UI lag while supporting real-time spatial filtering by city, zone, and touchpoint.
• Generating customized, media-rich pitch presentations on the fly for agency sales teams.
• Enforcing data integrity across complex vendor contracts, rate cards, and site availability windows.

Solutions

• Implemented efficient geospatial caching with client-side clustering and debounced query pipelines.
• Built a server-side PPTX generator that compiles site specs, high-res photos, and audience metrics into branded client decks.
• Established foreign-key enforced MariaDB models with migration scripts and automated daily database snapshot routines.

Key outcomes