Frontend Views & Routing
Relevant source files
The following files were used as context for generating this wiki page:
The Driveway Estimator Pro frontend is built using React 19 and utilizes a mobile-first, responsive design approach. The application architecture focuses on a linear workflow for driveway measurement, material selection, and cost estimation, supplemented by administrative views for project management and sharing. Routing is handled via the wouter library, providing a lightweight navigation system that supports both authenticated and public access routes.
The frontend serves as the primary interface for homeowners and contractors to interact with AI-powered edge detection and photorealistic material visualization. It integrates tightly with a tRPC backend to maintain end-to-end type safety across the estimation pipeline.
Sources: README.md:14-23, client/src/pages/Home.tsx
Navigation and Routing Structure
The application employs a routing system that differentiates between public landing pages, authenticated user dashboards, and token-based public share links. Navigation is primarily driven by the wouter hook useLocation and Link components.
Core Routes
| Path | Component | Description | Access |
|---|---|---|---|
/ | Home | Landing page with feature overview and auth entry. | Public |
/dashboard | Dashboard | List of user's saved estimates and actions. | Authenticated |
/estimator | Estimator | Multi-step wizard for new driveway estimates. | Authenticated |
/project/:projectId | ProjectDetail | Detailed view of a specific saved project. | Authenticated |
/shared/:shareToken | SharedProject | Public summary view for contractors. | Public (Token) |
Sources: client/src/pages/Home.tsx:14-46, client/src/pages/Dashboard.tsx:64-70, client/src/pages/ProjectDetail.tsx:25-30, client/src/pages/SharedProject.tsx:16-20
Application Flow
The following diagram illustrates the typical user journey from landing to project completion and sharing:
The application workflow is designed to be sequential, guiding users through AI-assisted data capture.
Sources: client/src/pages/Home.tsx:116-146, client/src/pages/Estimator.tsx:327-353
Page Modules
1. Estimator Wizard (Estimator.tsx)
The Estimator component is a stateful multi-step wizard managed by a Step type definition: upload, adjust, material, preview, and summary. It handles complex user interactions including:
- Geolocation: Automatically retrieves coordinates to fetch regional material pricing.
- Canvas Interaction: Allows users to drag corner markers over a driveway photo to define boundaries.
- AI Integration: Triggers tRPC mutations for edge detection and material preview generation.
Sources: client/src/pages/Estimator.tsx:13-75
2. Project Management (Dashboard.tsx)
The Dashboard serves as the central hub for authenticated users. It utilizes tRPC queries to list all projects associated with the user account.
- Project Cards: Display thumbnails (original or preview), calculated area, and total cost.
- Quick Actions: Provides immediate access to viewing, deleting, or generating a shareable link.
Sources: client/src/pages/Dashboard.tsx:43-138
3. Detail and Public Views
Two distinct components handle project summaries:
- ProjectDetail: Includes full editing/management capabilities, including note viewing and PDF export functionality via
downloadPDFtRPC procedure. - SharedProject: A read-only view accessible via a unique
shareToken. It includes a client-sidejsPDFimplementation to allow contractors to download the estimate without requiring an account.
Sources: client/src/pages/ProjectDetail.tsx:35-70, client/src/pages/SharedProject.tsx:28-85
Data Flow and State Management
The frontend relies on trpc hooks for server-state management and standard React useState for UI-specific transitions (e.g., current wizard step, dragging states).
This diagram represents the data synchronization between the UI, the backend API, and asset storage during the estimation process.
Sources: client/src/pages/Estimator.tsx:115-165, client/src/pages/Estimator.tsx:189-214
Summary
The frontend views are structured to support a transition from high-level marketing and dashboarding into a high-utility measurement tool. By utilizing wouter for routing and tRPC for data fetching, the application ensures a responsive experience optimized for mobile field use, allowing for seamless transitions between photo capture, AI analysis, and project sharing.
Sources: README.md:105-112, todo.md:38-50