🏠 California Housing Insights & Analytics Dashboard

An interactive, production-grade web application designed to explore California housing market patterns, visualize geographic price distributions, and interface with predictive modeling insights.

Built using a modern, performance-first frontend architecture, this dashboard translates complex housing data into actionable visual insights for data scientists, real estate analysts, and homebuyers alike.

🚀 Key Features

• Interactive Spatial Mapping: Full integration with Google Maps (leveraging a secure automatic authentication proxy) to visualize real-time geographic data clusters and map markers seamlessly.
• Dynamic Predictive Tooling: An intuitive price predictor tool that allows users to interact with underlying California housing model variables to see instant insight updates.
• Advanced Data Visualization: High-fidelity analytics charts powered by Recharts, delivering crisp break-downs of pricing trends, regional densities, and feature correlations.
• Fluid Micro-interactions: Built mobile-first with a customized shadcn/ui design system, tailored with snappy custom bezier transitions (<300\text{ms}) and resilient loading states.
• Robust State Architecture: Features client-side routing via Wouter, stable reference-cached data queries to eliminate rendering loops, and automated map marker synchronization.

🛠️ Technical Stack

• Frontend Framework: React 19 (Strict Mode)
• Styling & Design System: Tailwind CSS v4, shadcn/ui primitives, and Lucide React icons
• Routing: Wouter (Client-side localized navigation)
• Charts & Maps: Recharts & Google Maps JavaScript API
• Build Tooling & Environment: Vite, PNPM (v10), TypeScript, and Esbuild (for production compilation)
• Backend Layer: Express (lightweight static file delivery and client-side routing fallback support)

🧩 Production-Ready Architecture Notes

The project enforces highly optimized frontend patterns to ensure flawless deployment and rendering speeds:

1. Asset Management: Bypasses local storage bottlenecks by managing high-resolution media through external storage pipelines (/manus-storage/), preventing bloated build bundles.
2. Theme Synchronization: Leverages a unified index.css global theme script mapped across both standard light backgrounds and OKLCH dark mode values to prevent color mismatches or unreadable text layers.
3. Optimized Queries: Eliminates infinite loading loops by ensuring all complex data arrays and objects passing to query inputs are properly stabilized with custom React memoization hooks.