Contractor Cost Estimator & Estimate-Automation Platform
Replaced a general contractor's spreadsheet-based estimating workflow with a comprehensive full-stack web application that lets contractors build reusable pricing catalogs, assemble accurate line-by-line estimates, and automatically push finished estimates into downstream project-management platforms — eliminating manual re-entry and pricing drift.
4
Reusable Building Blocks
Cost Codes, Parts, Assemblies, and Formulas provide a flexible foundation for estimates
3
Calculation Modes
Parts, assemblies with quantity ratios, and formulas with variable-driven expressions
100%
Manual Data Entry Eliminated
Finished estimates are imported automatically via browser automation, removing re-keying
Full PWA
Offline Capability
Field-first PWA with offline-first sync and IndexedDB queuing for unreliable connectivity
The Challenge
Construction estimating was being done in sprawling spreadsheets and legacy desktop software. Numbers were re-keyed by hand, pricing drifted out of date as costs changed, and the same estimate got rebuilt from scratch for every new job. Once an estimate was finished, every line had to be manually re-typed into the contractor's external project-management platform. This created multiple points of failure: stale pricing, calculation errors, duplicate data entry, and no clean reporting structure for cost visibility.
Our Solution
We built a cohesive three-part system: (1) The Estimator — a secure internal app for building reusable pricing catalogs (Cost Codes, Parts, Assemblies, Formulas) and creating line-by-line estimates organized into bid items with live cost summaries. (2) The Automation Layer — a Puppeteer-powered headless browser bot that logs into the contractor's project-management platform and imports finished estimates with one click, including automated CAPTCHA solving and conditional UI handling. (3) The Public Website — a content-managed marketing site editable through Directus without touching code. The entire platform is built as a PWA with offline-first sync for field use, secure JWT authentication with role-based permissions, and professional CSV/PDF exports.
How We Built It
A detailed look at each layer of the automated pipeline architecture.
Reusable Pricing Catalog
The foundation of the estimating platform is a fully managed pricing catalog. Cost Codes organize expenses by accounting category. Parts are individual materials with unit, current cost, and hierarchical class/subclass grouping so pricing is always a single source of truth. Administrators can create, edit, and delete parts on the fly, and each change instantly affects all estimates using that part. Inline unit-of-measure management lets users add new UOMs without leaving the form.
Assemblies & Formula Engine
Assemblies group materials together with quantity ratios — add 'one wall section' and every component part is automatically priced using current pricing. Formulas enable variable-driven calculations: an estimator enters field measurements (linear feet of interior walls, exterior walls, etc.), and the formula engine evaluates expressions like 'LFI * 2 + LFE' instantly, computing quantities and costs without manual arithmetic. Both assembly and formula lines expand into fully itemized part breakdowns for complete auditability.
The Takeoff Builder
The Takeoff Builder is the heart of the app. Estimators create a Project for a Client, then build a Takeoff (estimate) from scratch or from a saved template. Work is organized into collapsible bid items, each with its own subtotals. Lines can be added three ways: by picking a part and quantity, by selecting an assembly and count, or by entering a formula with variable values. Everything is calculated in real-time, with no waiting or manual math.
Cost Summary & Professional Exports
Every estimate rolls up into a clean cost summary grouped by cost code, showing percentages of total and a dedicated bucket for uncategorized items so nothing is silently dropped. Estimators can export to professional CSV or PDF formats — branded, tabular, and print-ready. The PDF export is powered by jsPDF with full formatting control, giving clients a polished deliverable.
Safe Formula Evaluation
Letting users type arbitrary math expressions is powerful but dangerous — naive eval() is a security hole. The calculation engine uses a multi-layer safe-evaluation strategy: a character whitelist, a denylist of dangerous keywords and patterns (eval, function, constructor, __proto__, etc.), finite-number validation on every variable and result, and mathjs for the actual evaluation — never the JavaScript runtime. This delivers a flexible formula system that can't be turned into an injection vector.
Automated Estimate Import
Once an estimate is finished, one click exports it into the contractor's downstream project-management platform automatically. A Puppeteer bot logs in, navigates the platform's multi-step import wizard, solves CAPTCHAs defensively, and handles conditional UI states. Long-running uploads run as detached background processes and report back via branded email — success or failure — so the app stays responsive. This eliminates the tedious, error-prone re-entry step completely.
Client & Project Organization
Every estimate is tied to a Client and Project with location, type, and notes. The Projects view gives estimators a bird's-eye view of all active work organized by client. A dedicated Clients section manages the contractor's customer base, supporting bulk onboarding and easy reference during estimate creation.
Reusable Templates
Any takeoff can be saved as a template for future use. Templates capture the entire estimate structure, parts, assemblies, and formulas used. Starting a new estimate from a known-good template means estimators begin with a proven baseline instead of a blank sheet, dramatically reducing setup time for similar jobs.
Progressive Web App & Offline Sync
Built as a PWA with installable capability and mobile-friendly responsive design. The app uses Workbox and next-pwa for asset caching and offline access. Changes made without connectivity are queued in IndexedDB, and automatic sync replays them in timestamp order when connectivity returns — keeping the app usable in the field where internet is unreliable. JWT-based authentication with role-based permissions protects all internal tooling.
Content-Managed Public Website
A separate, animated marketing site powered by Directus lets the contractor update home page, services, reviews, and contact information without touching code. Content changes are instant, decoupling marketing updates from engineering releases and letting the business iterate independently.
Type-Safe Full-Stack Architecture
The frontend is fully typed end-to-end with TypeScript. Data access is centralized in RTK Query for cache management, automatic refetching, and retry logic. Forms are validated with React Hook Form + Zod, catching errors early. The backend leans on Directus to provide a REST/GraphQL API layer, authentication, and RBAC over PostgreSQL, with Redis for caching. This architecture keeps engineering effort focused on domain logic rather than infrastructure boilerplate.
Responsive Interface & Professional UX
Built with Tailwind CSS for a clean, modern aesthetic. Animations are powered by GSAP and Framer Motion for polished transitions and visual feedback. Light/dark theming, toast notifications, error boundaries, and graceful API error handling create a professional experience throughout. The UI is responsive from mobile to desktop, supporting the contractor's anywhere-access workflow.
Product Screenshots
A closer look at the platform in action.
Technology Stack
The tools and technologies powering this solution