Real-Time Rental Market Analytics Application
Drake Damon
End-to-end full-stack application combining Next.js 14 frontend with FastAPI backend, featuring real-time market analytics, interactive data visualizations, and comprehensive rental market insights powered by Snowflake data warehouse.
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:
Frontend Architecture
Next.js 14 App Router: Server-side rendering with dynamic routes
TypeScript: Type-safe development with strict mode
Zustand State Management: Lightweight state with localStorage persistence
API Client with Caching: 5-minute TTL cache for optimal performance
Design System: Custom design tokens with light/dark theme support
Backend Architecture
FastAPI: High-performance async API with automatic OpenAPI docs
Snowflake Integration: Direct queries to production data warehouse
Pydantic Models: Request/response validation with type safety
Error Handling: Comprehensive HTTP status codes with structured responses
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
Like this project
Posted Nov 10, 2025
Built a full-stack app for real-time rental market analytics using Next.js and FastAPI.
