Brief
Turn a dense design report into something you can click through.
The soft-glove design report carries a lot of decisions — customer requirements, a QFD
ranking, weighted concept selection, and a final architecture. This project distils that
report into an interactive single-page dashboard so a reviewer can explore the
reasoning instead of reading thirty pages of tables.
What It Shows
Requirements, trade-offs, architecture, and a live demo.
The app is organised into four views:
- Requirements — the prioritised customer needs and the measurable engineering
metrics they map to, taken straight from the QFD.
- Architecture — clickable concept cards for the control, communication, and
pneumatic subsystems, each with its strengths, trade-offs, and a score; selecting a
concept updates the chosen system architecture.
- Demo dashboard — sliders for target flexion, assist level, and EMG threshold drive a
live Recharts plot of target vs. measured finger angle, alongside a system-state and
safety-checklist readout.
- Overview — the project facts, joint motion targets, and the open → flex → hold →
release assist cycle at a glance.
Engineering
A small, honest front-end built around the report's data.
Built with React + Vite, charts with Recharts, motion with Framer Motion, and
a component kit (shadcn/ui + Lucide). The interactive plot is driven by a semi-empirical
model, not live hardware telemetry — the goal is to communicate the design and let a
reviewer feel the trade-offs, not to claim a real-time link to the glove. It is the
front-end companion to the embedded controller.
Value
The portfolio's clearest piece of software engineering.
Most of my projects are hardware-first; this one is the opposite — interface design,
state management, and data visualisation. It also doubles as a presentation tool for the
glove work, which is exactly what a design review needs.