LeaseRadar - Full-Stack Rental Market Platform

Problem

Rental market data is valuable but difficult to access and visualize for end users. Investors, renters, and analysts need an intuitive, responsive web application that combines real-time market data with interactive visualizations, price trend analysis, and comprehensive market insights—all backed by a production data warehouse.

Constraints

• Need for modern, responsive UI with mobile-first design
• Real-time data integration from backend API
• Complex state management for filters, watchlists, and user preferences
• Performance optimization with caching and efficient data fetching
• Accessibility requirements (WCAG 2.2 AA compliance)
• Integration with Snowflake data warehouse via FastAPI backend

Architecture

Built a modern full-stack application with clear separation of concerns:

Next.js 14 (TypeScript) ↔ FastAPI (Python) ↔ Snowflake Data Warehouse ↔ dbt + Dagster Pipeline

Frontend Architecture

1. Next.js 14 App Router: Server-side rendering with dynamic routes
2. TypeScript: Type-safe development with strict mode
3. Zustand State Management: Lightweight state with localStorage persistence
4. API Client with Caching: 5-minute TTL cache for optimal performance
5. Design System: Custom design tokens with light/dark theme support

Backend Architecture

1. FastAPI: High-performance async API with automatic OpenAPI docs
2. Snowflake Integration: Direct queries to production data warehouse
3. Pydantic Models: Request/response validation with type safety
4. Error Handling: Comprehensive HTTP status codes with structured responses
5. Docker Deployment: Containerized application deployed on Render

Implementation

Frontend Features

• 15+ React Components: SearchBar, FilterBar, RangeSlider, ResultCard, MarketCard, TrendChart, Map integration
• Responsive Design: Mobile-first with adaptive layouts (sm/md/lg/xl breakpoints)
• Interactive Charts: Recharts integration for 30/90-day price trend visualization
• Theme System: Light/dark/system theme with localStorage persistence
• Accessibility: WCAG AA compliant with keyboard navigation and ARIA labels
• Loading States: Skeleton components with shimmer animation

State Management

• Zustand Store: Centralized state for markets, filters, watchlist, and theme
• API Data Caching: 5-minute TTL cache prevents unnecessary refetches
• localStorage Persistence: Watchlist and alerts persist across sessions
• Hybrid Data Strategy: Market-level data from API, property-level from fixtures

API Integration

• 9 RESTful Endpoints: Markets list, market details, trends, price drops, featured markets
• Standardized Responses: Consistent JSON format with metadata and pagination
• Error Handling: Graceful degradation with user-friendly error messages
• Query Parameters: Flexible filtering with state, limit, offset, threshold parameters

Design System

• Design Tokens: Colors, typography, spacing, shadows, motion with 4px rhythm
• Tailwind CSS: Utility-first styling with custom configuration
• Radix UI Primitives: Accessible component foundations
• Inter Font: 8 size scales (xs to 4xl) with consistent line heights

Results & Impact

Frontend Excellence

• 15+ Reusable Components: Modular architecture with TypeScript type safety
• WCAG AA Compliance: Full keyboard navigation and screen reader support
• Performance Optimized: 5-minute cache TTL reduces API calls and improves UX
• Responsive Design: Mobile-first approach with adaptive layouts for all screen sizes
• Theme Support: Light/dark/system themes with smooth transitions

Backend Integration

• 9 Production Endpoints: Complete API coverage for market data and analytics
• Live Deployment: Hosted on Render with auto-deploy from GitHub
• Snowflake Integration: Direct queries to production data warehouse
• Interactive Documentation: Swagger UI and ReDoc for API exploration
• Error Handling: Comprehensive status codes with structured JSON responses

Full-Stack Features

• End-to-End Type Safety: TypeScript frontend + Pydantic backend validation
• Real-Time Data: Live market data from Snowflake via FastAPI
• Interactive Visualizations: Recharts integration for price trend analysis
• State Management: Zustand with localStorage persistence for user preferences
• Caching Strategy: Smart caching at both frontend and API levels

User Experience

• Market Discovery: Browse all markets with sorting and filtering
• Price Trend Analysis: Interactive charts showing 30/90-day rent trends
• Price Drop Detection: Automatic alerts for markets with rent decreases
• Watchlist Feature: Save and track favorite markets with localStorage
• Market Analytics: YoY/MoM growth rates, market temperature, quality scores

Technical Excellence

• Modern Stack: Next.js 14 + TypeScript + FastAPI + Snowflake
• Design System: Custom tokens with Tailwind CSS and Radix UI
• Performance: Smart caching, lazy loading, optimized bundle size
• Accessibility: WCAG AA with keyboard navigation and semantic HTML
• Developer Experience: TypeScript strict mode, ESLint, hot reload