Engineering a High-Performance Data Visualization Dashboard

Qudraat Shabab required a robust platform capable of handling intense data visualizations while maintaining a fluid, app-like navigation experience. The main challenge was ingesting and rendering large, non-paginated datasets via Firebase without freezing the main thread. Additionally, transitioning between complex analytical views required sophisticated route masking so users wouldn't perceive standard browser loading times.

I architected the application atop React 18, leveraging Vite for aggressive bundling optimization. To handle data visualization without UI jank, I deeply integrated `Recharts`, memoizing data transformations and deferring heavy DOM calculations using `useTransition` and `useDeferredValue`. To elevate the perceived performance, I incorporated `Barba.js`, completely hijacking the default browser routing. This allowed for pre-fetching data payloads on hover and executing buttery-smooth, cross-page GSAP transitions while the next route's resources silently hydrated in the background.