Role: Technical Designer & Lead Developer
Technologies: React, React-Hook-Form, React-PDF, AWS SES, Cloudflare Workers
Project Overview
The DensElement Cost Estimation Calculator was built to simplify how contractors and sales reps estimate project costs and materials. Prior to this tool, calculations were manual, error-prone, and difficult to share with stakeholders. The goal was to deliver a guided, user-friendly, and shareable calculator that could streamline workflows and improve accuracy.
My Contributions
I created the technical design document and coded the majority of the application, leading the project from concept to delivery. My work covered both architectural planning and hands-on development:
- Authored the technical design document defining architecture, libraries, and component structures.
- Built a multi-step workflow with ~83 input fields, organized into panels (e.g., sheathing, fasteners, joints, corners, windows, doors, substrates).
- Implemented form validation and state management with
react-hook-form. - Integrated PDF generation via
react-pdfto create downloadable summaries. - Developed an email workflow with Cloudflare Workers and AWS SES for sending estimates directly to clients.
- Designed for scalability and maintainability by componentizing panels and standardizing validation logic.
Key Features
- Dynamic Stepper Workflow – guided users through project inputs in a logical order.
- Smart Validation – ensured data accuracy across 83+ input fields.
- PDF & Email Integration – delivered instant, professional-grade estimate summaries.
- Modular Architecture – made it easy to extend the calculator for future product lines.
Impact
- Reduced errors by enforcing structured, validated input.
- Streamlined communication with sharable, branded PDF summaries.
- Accelerated workflows for sales reps and contractors, improving client experience.
- Lowered long-term maintenance costs by selecting widely adopted, lightweight libraries.