Frontend Hooks & Logic
Relevant source files
The following files were used as context for generating this wiki page:
Frontend logic in the Driveway Estimator Pro project is built on a modern React stack, utilizing React 19, TypeScript, and Tailwind CSS. The system centralizes business logic through specialized React hooks and integrates with a type-safe tRPC backend to manage complex workflows such as AI edge detection, real-time material pricing, and PDF generation.
The frontend is designed with a mobile-first approach, leveraging Capacitor for native device capabilities like camera access and geolocation, while maintaining a responsive web presence for desktop users.
Sources: README.md:16-43, package.json:49-106
Core Hooks and State Management
Authentication & Authorization
The application uses a centralized authentication hook (useAuth) to manage user identity and session states. This hook provides the current user context and boolean flags for authentication status, which are used across pages to gate access to the estimator and dashboard.
Sources: client/src/pages/Home.tsx:16, client/src/pages/ProjectDetail.tsx:21, client/src/pages/Dashboard.tsx:17
Server State with tRPC
Data fetching and mutations are handled through the trpc client, which provides end-to-end type safety. The frontend utilizes standard tRPC patterns:
- Queries: Used for fetching project lists, individual project details, and shared project summaries.
- Mutations: Used for creating projects, deleting estimates, generating shareable links, and requesting PDF exports.
Sources: client/src/pages/Dashboard.tsx:20-33, client/src/pages/ProjectDetail.tsx:25-85
Page-Specific Logic & Data Flow
The application logic is distributed across several key pages, each handling specific parts of the project lifecycle.
Project Management Logic
The Dashboard and ProjectDetail components manage the lifecycle of an estimate. The dashboard handles batch operations like listing and deleting, while the detail view handles granular interactions like sharing and exporting.
Sharing and Public Access
Sharing logic utilizes unique tokens stored in the database. When a user creates a share link, a mutation returns a unique URL containing a shareToken. The SharedProject component then consumes this token to retrieve project data without requiring a user login.
| Feature | Implementation | Description |
|---|---|---|
| Share Link Creation | createShareLink.useMutation | Generates a unique token and optionally sends email to contractor. |
| Public Viewing | getSharedProject.useQuery | Fetches data via token; does not require useAuth context. |
| PDF Download | jspdf / atob | Converts base64 server response or local state to downloadable PDF. |
Sources: client/src/pages/ProjectDetail.tsx:34-45, client/src/pages/SharedProject.tsx:15-20, client/src/pages/SharedProject.tsx:29-100
Document Generation Logic
The project supports PDF export through two distinct methods: server-side generation via procedures and client-side generation using the jspdf library.
Client-Side PDF Flow
In the SharedProject view, the PDF is generated entirely in the browser to reduce server load for public views. It maps material IDs (e.g., hotmix, millings) to human-readable labels and icons.
Material Mapping
The frontend maintains a consistent mapping for material visualization and reporting:
| Key | Name | Icon |
|---|---|---|
hotmix | Hot Mix Asphalt | 🛣️ |
millings | Asphalt Millings | ♻️ |
tar_and_chip | Tar & Chip | 🪨 |
gravel | Gravel | ⚫ |
Sources: client/src/pages/ProjectDetail.tsx:87-92, client/src/pages/SharedProject.tsx:22-27, client/src/pages/Dashboard.tsx:47-52
Component-Level UI Logic
The project leverages a ComponentShowcase to document and test reusable UI logic, including:
- Theme Switching: Managed via
useThemehook to toggle between light and dark modes. - AI Chat Interface: A specialized
AIChatBoxcomponent that handles markdown rendering and message history state. - Form Validation: Integrated with
react-hook-formandzodfor type-safe input handling.
Sources: client/src/pages/ComponentShowcase.tsx:162-175, client/src/pages/ComponentShowcase.tsx:885-915, package.json:96-102
Summary
Frontend Hooks & Logic in the Easy Asphalt project provide a seamless bridge between native mobile capabilities and complex backend AI services. By centralizing state management through tRPC and specialized hooks, the application ensures that measurement data, material visualizations, and pricing estimates remain synchronized across the user's dashboard and shared contractor links.