Web

React dashboard

Project results, benchmarks and embedded 3D viewer.

Done Sprint S30-S31 · 13 points

In short, no jargon for non-developersRead the summaryClose

What it is: A dashboard that gathers the projects' results (computing times, accuracy of the artificial intelligence) in charts, with a 3D object to turn around.
What it is for: To make figures readable at a glance.
What it shows: Building modern web interfaces with React, the most sought-after tool in the field.

Taught in M1 (React)

Live demo Source code

How the pieces fit together

Site data (projects, sprints, timings) → JSON API (/api/v1, at build time): written by src/api.mjs
JSON API (/api/v1, at build time) → Dashboard (React, TypeScript, Vite)
Dashboard (React, TypeScript, Vite) → Charts (hand-written SVG)
Dashboard (React, TypeScript, Vite) → 3D viewer (three.js, WebAssembly): same WebAssembly
Dashboard (React, TypeScript, Vite) → Angular dashboard (projects/angular): shared code

The dashboard

A React and TypeScript application published with the site, reading its static JSON API: project progress, sprints, the measured results of the other projects, and a 3D viewer where the topologie C++ code, compiled to WebAssembly, computes the curvature in the browser.

Open the dashboard

Results view of the dashboard in the dark theme: pistachio-green horizontal bars of the curvature computing times on 3.2 million triangles, from 531 ms in sequential C++ to 85.5 ms in single-precision CUDA, then the table of times, speed-ups and errors. — Results view, dark theme: parallel computing, each chart doubled by a table.

3D viewer of the dashboard in the light theme: a torus coloured by its Gaussian curvature, red outside the ring (dome), blue inside (saddle), below the Torus, Sphere, Möbius strip, Saddle and Open a file buttons. — 3D viewer, light theme: three.js in a React component, curvature computed by topologie in WebAssembly.

Tech stack

React
TypeScript
Vite
Vitest
Playwright

Who does what

React: The dashboard views (Projects, Sprints, Results, 3D viewer), with three.js in a component loaded on demand.
TypeScript: Strict typing of the site's JSON API and of the views' computations; a missing translation key does not compile.
Vite: The development server and the build published under /dashboard/.
Vitest: Unit and integration tests of the computations, charts and views.
Playwright: End-to-end tests of the published dashboard, in both languages and both themes.

Definition of Done

Code reviewed, diff by diff
Unit and integration tests green
Green CI on Linux, Windows and macOS when compiled
README, REVIEW.md and DECISIONS.md up to date
Texts in French and English
Demo deployed and tested on mobile