How the Engineering Design Suite is built
A short tour of the architecture, conventions, and customization points — so it's clear how this demo platform could be adapted for a specific component manufacturer.
Architecture
Calculators share a single shell component for layout, toolbars, and panels. Each calculator owns its own input state, validation, and live result derivation — kept small enough to read end-to-end in a single file.
Calculation Pipeline
Inputs flow into pure functions that produce result objects and chart series. Results are derived through useMemo, so every keystroke updates the panel and the visualization without manual recompute steps.
Component Conventions
All semantic colors, gradients, and typography are defined as design tokens. Calculator panels use a fixed visual vocabulary — Panel, Field, ResultStat, FormulaBox — so adding a new tool is mostly content, not styling work.
Vendor Neutrality
No real part numbers, manufacturer names, or datasheet links are used. Where a recommendation is appropriate, the platform renders generic Example Component A / B / C cards as illustration only.
Tooling Snapshot
| Framework | React 19 + TanStack Start |
| Routing | File-based with TanStack Router |
| Styling | Tailwind v4 with semantic OKLCH tokens |
| Charts | Recharts |
| State | Local React state + useMemo (no global store) |
| Forms | Native inputs with inline validation |