Software · MCTE5255 · Spring 2026

Soft-Glove Engineering Dashboard

ReactViteJavaScriptRechartsFramer MotionData VizUI/UX

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.