Charles Lepaire
English

← Tous les projets

Web

Dashboard React

Résultats des projets, benchmarks et viewer 3D intégré.

Terminé Sprint S30-S31 · 13 points
En bref, sans jargon pour les non-informaticiensLire le résuméRefermer
Ce que c'est
Un tableau de bord qui rassemble les résultats des projets (temps de calcul, précision de l'intelligence artificielle) en graphiques, avec un objet 3D à faire tourner.
À quoi ça sert
Rendre des chiffres lisibles d'un coup d'œil.
Ce que ça montre
La création d'interfaces web modernes avec React, l'outil le plus demandé dans ce domaine.

Enseigné en M1 (React)

Démo en ligneCode source

Comment les morceaux tiennent ensemble

Schéma : Données du site → API JSON (écrite par src/api.mjs) ; API JSON → Dashboard ; Dashboard → Graphiques ; Dashboard → Visionneuse 3D (même WebAssembly) ; Dashboard → Dashboard Angular (code partagé). écrite par src/api.mjs même WebAssembly code partagé Données du site projets, sprints, mesures API JSON /api/v1, au build Dashboard React, TypeScript, Vite Graphiques SVG écrits à la main Visionneuse 3D three.js, WebAssembly Dashboard Angular projects/angular

Le dashboard

Une application React et TypeScript publiée avec le site, qui lit son API JSON statique : avancement des projets, sprints, résultats mesurés des autres projets, et une visionneuse 3D où le code C++ de topologie, compilé en WebAssembly, calcule la courbure dans le navigateur.

Ouvrir le dashboard

Vue Résultats du dashboard en thème sombre : barres horizontales vert pistache des temps de calcul de la courbure sur 3,2 millions de triangles, de 531 ms en C++ séquentiel à 85,5 ms en CUDA simple précision, puis le tableau des temps, accélérations et écarts.
Vue Résultats, thème sombre : le calcul parallèle, chaque graphique doublé d'un tableau.
Visionneuse 3D du dashboard en thème clair : un tore coloré selon sa courbure de Gauss, rouge à l'extérieur de l'anneau (dôme), bleu à l'intérieur (selle), sous les boutons Tore, Sphère, Ruban de Möbius, Selle et Ouvrir un fichier.
Visionneuse 3D, thème clair : three.js dans un composant React, courbure calculée par topologie en WebAssembly.

Technologies

  • React
  • TypeScript
  • Vite
  • Vitest
  • Playwright

Qui fait quoi

React
Les vues du dashboard (Projets, Sprints, Résultats, Visionneuse 3D), avec three.js dans un composant chargé à la demande.
TypeScript
Typage strict de l'API JSON du site et des calculs des vues ; une clé de traduction manquante ne compile pas.
Vite
Le serveur de développement et le build publié sous /dashboard/.
Vitest
Les tests unitaires et d'intégration des calculs, des graphiques et des vues.
Playwright
Les tests de bout en bout du dashboard publié, dans les deux langues et les deux thèmes.

Definition of Done

  • Code relu, diff par diff
  • Tests unitaires et d'intégration verts
  • CI verte sur Linux, Windows et macOS si compilé
  • README, REVIEW.md et DECISIONS.md à jour
  • Textes en français et en anglais
  • Démo déployée et testée sur mobile