MANUFACTURING · DECISION SUPPORT
I designed and developed QuoteFlow to make CNC job costs easier to see while keeping the quoting workflow fast enough for a small shop. It models production assumptions, margin, and quantity economics in one live interface.
React · TypeScript · Vite · Recharts · Vitest · Cloudflare
PROJECT SNAPSHOT
A small machining quote is more than material cost multiplied by quantity. Setup time, machine hours, expected scrap, tooling, inspection, outside processing, shipping, shop rates, and target margin all affect the result. Fixed setup cost also has a much larger effect on a 25-part order than on a 500-part order.
I wanted an estimator to see those relationships while entering the job, instead of building a price in one place and analyzing it later in another.
The builder keeps job and production inputs together on the left while the analysis updates on the right. It shows a suggested quote, total manufacturing cost, cost per good part, gross profit and margin, planned parts to run, and stock pieces required.
Quantity comparisons and cost visuals sit beside those headline numbers, so an estimator can see both the price and the assumptions driving it.
I separated the calculation engine from the React interface. It adds material, setup, production, and additional costs to produce total manufacturing cost. Scrap changes the planned production run: for 100 good parts with 5% expected scrap, the model plans 106 parts to run and rounds stock requirements up to whole pieces.
Cost per part uses the 100 good parts requested by the customer, not the larger planned run. Suggested selling price uses gross margin: selling price = total cost ÷ (1 − target margin). A 30% margin is not a 30% markup.
Fixed setup cost is spread across more good parts as order size grows. QuoteFlow recalculates scenarios such as 25, 100, 250, and 500 parts, showing planned production, cost per part, total cost, and suggested quote for each.
The unit-cost curve makes that change visible without claiming to optimize production. It helps a shop discuss volume and price with a clearer view of setup-cost amortization.
A proportional breakdown separates material, setup, production, and additional costs. It makes the dominant driver visible at a glance. Short observations, such as production being the largest cost driver, are generated from deterministic business rules and the calculated result. They are not AI-generated advice.
I combined industrial software, financial analysis, and editorial web design. A warm off-white builder sits beside a charcoal analysis panel; pale green marks the current quantity and key values. Hard grids, square controls, technical monospace labels, restrained motion, and oversized financial numbers make the interface feel suited to manufacturing without looking dated.
Pure quote-engine functions calculate results independently of the UI. Quantity scenarios, formatting, and quote insights also live in reusable utilities. React components render those outputs, and the chart is split into a separate production bundle.
Saved records contain the source inputs and metadata, not the calculated result. Reopening a quote runs the current engine again, so stored totals cannot become stale after a formula change.
QuoteFlow v1 needs no account. A QuoteRepository interface keeps storage calls out of the UI, while its current implementation saves quotes in this browser's localStorage. That makes the first visit immediate and avoids an anonymous shared database.
The tradeoff is clear: quotes do not sync between browsers or devices, and clearing browser site data removes them. The app does not present local storage as a cloud backup.
Users can save or update a quote, search History, reopen it, duplicate it with a new number, delete it after confirmation, or export the source records as JSON. History recalculates displayed quote values rather than persisting totals. An unsaved-change prompt protects edits when moving to another quote or view.
Quote forms are often temporarily incomplete. Someone replacing “100” with “250” may briefly leave the quantity blank. QuoteFlow preserves that editing state and pauses the analysis with an “Awaiting valid input” message until calculations are safe. It avoids showing NaN or Infinity while a field is being edited.
At v1.0, 39 automated tests across eight files cover manufacturing formulas, margin logic, scenarios, formatting, quote insights, numbering, persistence, and History helpers. Release checks included desktop and mobile widths of 1440, 1024, 768, 390, and 320 pixels.
A production Vite build is deployed through Cloudflare on a custom HTTPS subdomain. Hashed assets and social metadata support a stable public release.
QuoteFlow brought manufacturing experience, business economics, information systems, frontend engineering, data visualization, and product design into one product. The most useful work was deciding how to represent assumptions and financial logic so a user could understand a job quickly, rather than just producing a number.