Business applications / Interactive workflow demo

FabFlow

A fabrication-shop demo for handling requests, revising quotes, and tracking approved jobs.

View live demo

View source code

React
TypeScript
Vite
React Router
localStorage

01 / The problem

The problem

A shop needs to keep the customer’s request, the latest quote, and the production job connected as details change.

02 / What was built

What was built

FabFlow has staff and customer views for requests, quotes, jobs, and activity history. Sample records are saved in the visitor’s browser, so changes survive a page reload.

03 / Engineering decisions

Engineering decisions

Approval creates the job

Approving a quote updates the request, creates a job if one is missing, and records the approval in the activity history.

Shared functions for changes

Requests, revisions, approvals, and status updates go through the store. Each page calls the same functions for the same operation.

Browser storage for the demo

The first visit loads sample records into localStorage. Reset restores those records. Hash-based routes let the app run on a static host.

04 / Scope

Scope

As a customer in the demo, I can submit a fabrication request and review a quote.
As a customer, I can approve the latest quote and have it become a job.
As a staff member, I can create quote revisions, update job status, and review activity.
As a visitor, I can switch between demo roles and reset the sample records.

05 / Read the code

Source code

Reviewed September 10, 2026.