Visual estimating & contractor sales

Quote Composer

A visual estimating platform for outdoor contractors that turns an early inquiry into a project they can discuss. Customers plan fences, decks, and landscaping on satellite imagery, explore a price range using the company's rates, and send the layout straight to the team for follow-up.

Visit live project
Type
Contractor quoting platform
Built for
Residential outdoor contractors
Focus
Inquiry, estimate, exact quote
Quote Composer landing page with its logo, top navigation, and contractor estimating introduction

The problem

What needed to become clearer.

A request for a new fence or deck often arrives without enough detail to price it. The contractor has to establish the layout, materials, scope, and budget, sometimes driving to the property before learning whether expectations line up. The challenge was to make that first inquiry useful and carry the same project information through the quoting process.

What was built

  • A branded website widget and hosted quote builder where customers find their property, draw runs and areas, place individual items, and choose from the contractor's products.
  • Live estimate ranges based on measured lengths, areas, and selected items, with company-controlled rates, taxes, currency, and service-zone price adjustments.
  • A team workflow for creating estimates after a phone call, reviewing submitted layouts, assigning leads, recording notes, and tracking follow-up.
  • Exact quotes with editable geometry, additional line items, optional items, discounts, and saved revisions.
  • A branded customer quote page for reviewing the project, requesting changes or a site visit, signing an exact quote, and paying a deposit when payments are enabled.
  • AI-assisted product visuals that turn fence and gate photos into reusable assets shown in the mapped layout.

The approach

Make the budget conversation part of the first inquiry.

Start with the questions both sides need answered: what is being built, where it goes, which products are involved, and what it could cost. The visual builder gives the customer a practical starting point. The contractor receives that context together and retains control of the final scope and price. A phone inquiry can enter the same workflow through the team, so customers do not have to draw the project themselves.

How it works

From a property layout to a quote the customer can accept.

  1. 01

    Set up the business rules

    The contractor adds products, photos, and rates, defines service areas and location-based adjustments, and applies company branding to the customer experience.

  2. 02

    Outline the project and budget

    The customer draws a project on the company's website or hosted page. Measurements and product choices update the estimate as the layout changes. The team can also prepare and send a starting estimate after a call.

  3. 03

    Review a lead with context

    The drawing, measurements, products, price range, and contact details arrive together. The team can review the scope, assign the lead, add notes, and arrange the next conversation or site visit.

  4. 04

    Confirm the job and send the quote

    After checking the work, the contractor adjusts the layout and line items and sends an exact quote. The customer returns to the same quote link to review, request changes, or sign, with an optional deposit step when configured.

Design and engineering

The choices behind the working product.

Keep the drawing and the price connected

Line, area, and individual-item products share one project. The pricing engine uses the saved geometry and company rates, keeping the visual scope and itemized estimate connected as the job changes.

Give estimates and exact quotes distinct roles

A starting range helps establish budget fit. Contractor review turns it into an exact quote, with saved revisions preserving the scope and pricing behind each version.

Fit the contractor's existing sales process

An embedded builder, a shareable hosted page, and team-created quotes support website visitors and phone inquiries. Company branding carries through the builder, quote page, and email.

Use AI to make products easier to picture

AI helps prepare reusable fence and gate visuals from product photos. Those assets appear in the layout, while measured geometry and contractor-defined pricing rules determine the estimate.

Technology

  • Next.js
  • React
  • TypeScript
  • PostgreSQL / PostGIS
  • Drizzle ORM
  • Google Maps
  • Three.js
  • Clerk Organizations
  • AI-assisted product assets

Current boundaries

  • Mapped layouts and initial ranges support planning. Property boundaries, site conditions, final measurements, and pricing still require contractor confirmation.
  • Online deposits, external calendar sync, and webhook handoffs depend on the company's plan and configured services.
  • Public demos use fictional companies and sample pricing.

The working result

A clearer inquiry. A shared plan. A better starting conversation.

Quote Composer connects lead capture with the work of quoting. The customer can explore the scope and budget before requesting a visit, and the contractor can follow up with the project already in view. It shows how focused software can turn a website into a useful part of the sales process and keep the details together through the final quote.

Related serviceFocused custom software