Interactive Site Plans

I built an app that turns vector site-plan files into live, client-ready maps backed by a database. I worked on architecture, data model, editor UX, permission roles, deployment, and iteration — taking business requirements from the CEO, VPs, and supervisors. The result: high-FPS zoom/pan, suite-level overlays, and an editor that lets non-developers adjust logos/labels/positions without touching design files.

Data Drift & Manual Edits

Static exports fell out of sync with leasing changes; tiny text/position tweaks required design time.

Label/Layout Fidelity

Labels must stay readable across zoom levels; logos can’t overlap or clip; suite states (“Current/Future”) must be toggleable.

Performance on Large SVGs

Full-resolution vector plans contain thousands of nodes. Naïve rendering stutters on zoom/pan and floods React with re-renders.

Permissions & Publishing

Editors need safe controls; viewers need a fast, public experience. Access control is a must have

Trustworthy, Live Representation

One source of truth (MSSQL) + deterministic overrides. What users see matches the data.

Great UX; Responsive Design

Smooth zoom/pan, crisp text, collision-aware labels. Built for desktop and tablets!

Editor-Friendly

Simple controls for toggling elements, adjusting offsets/rotation, swapping logos, changing colors—no design tools required.

Architecture / Software

Frontend: Next.js (App Router) + TypeScript, React, Mantine, Tailwind, GSAP (zoom/pan/gestures).

Data: MSSQL for data and overrides table for per-suite visual overrides (image/label toggles, offsets, rotations, colors).

Render Source: SVG's

Server: API routes for data fetch/upsert; selective server-side caching

Infra: NGINX reverse proxy in front of the app for cert management / TLS

Data Model (Simple)

SitePlanWebsite: property metadata, suites, leasing state, attributes displayed in the sidebar/tooltips alongside the interactive map

Rendering Flow

Load Property → fetch base SVG + suite dataset (SSR with cache).

Compose Layers → background SVG, suite polygons, labels, logos, and dynamic overlays.

Apply Overrides → merge GlobalOverrides onto canonical suite data.

Interactive Engine → GSAP-powered zoom/pan, hover highlights, click to open suite details; segmented control for Current/Future states; responsive label scaling.

UI Controls → filter/sort, search, and toggles for images/labels/overlays.

Hydration-Safe State → seed client via provider to avoid mismatch; memoize heavy selectors to minimize re-renders.

Admin Experience

Inline Editing: per-suite controls for label visibility, offset, rotation, and color; image/logo upload with live preview.

Collision-Aware Tweaks: helpers to nudge labels on the x/y axis; instant preview at multiple zoom levels.

Auditability: all changes persist as explicit overrides (no destructive edits to the base SVG or canonical data).

End-to-End Operation

Data updates in MSSQL appear automatically after cache revalidation.

Editors adjust visuals in the admin UI; overrides are upserted and picked up on next view.

Viewers always see a fast, cached map with accurate states and legible labels.

Label Scaling & Readability

Issue: Labels became tiny or overlapped on zoom.

Solution: Viewport-aware scaling and text-measurement; optional per-suite offsets/rotation in overrides; GSAP for smooth transforms.

SVG ID Collisions & Targeting

Issue: Illustrator IDs repeated across buildings/layers.

Solution: Systematic ID prefixing and query scoping by unique suiteid to guarantee stable selectors. Also created syntax for svg with multi floor spaces to allow future targeting.

Performance on Large Plans

Issue: SVG nodes caused jank during pan/zoom and hover.

Solution: GSAP with requestAnimationFrame throttling, React memoization, event-region pruning (pointer-events toggled by layer), and minimal Redux updates (derive transient hover locally when possible).

Hydration Mismatches

Issue: Client and server rendered different initial states.

Solution: Seed useContext/Redux from server-fetched data; keep a consistent, serializable shape; avoid rendering paths that depend on client-only measurements until mounted.

Editor Safety & Publishing

Issue: Needed a safe editor flow without exposing raw SVG complexity.

Solution: Protected admin routes and preview-before-save mechanics.

Caching Without Stale Data

Solution: Have a last updated trigger; admin writes trigger targeted revalidation.

Single Source of Truth: Suites and states come from MSSQL; visual tweaks live in overrides.

Minutes-to-Publish: Editors adjust labels/logos/colors directly in the browser—no Illustrator round-trip.

Smooth UX: High-FPS zoom/pan, crisp labels at any scale, clear Current/Future toggles.

Secure & Maintainable: Protected routes and isolated overrides

Exportable SVG's with multiple export options!

Sharepoint Integration: Ability to get specific plan based on Sharepoint path