Arbeit

Science-Fair-Rangliste

Gemeinschaft
React
Echtzeit-Dashboard

Ein Live-Dashboard für eine Schul-Wissenschaftsmesse: Die Jury bewertet in einem Google-Formular, und das Dashboard macht daraus eine Rangliste, die Preisträger und eine Preisverleihung im Vollbild.

Die Projekt-Rangliste mit Platzierungen, Punktzahlen und Preisabzeichen.

Projektübersicht

Die Science-Fair-Rangliste wurde für „The Joy of Wisdom“ gebaut, die Wissenschaftsmesse 2026 der Eternity Christian School International in Honduras. Die Jury bewertet jedes Projekt in einem Google-Formular, und das Dashboard verwandelt die Antworten in eine selbstlaufende Präsentation für Beamer oder Fernseher sowie eine Preisverleihung zum Abschluss der Veranstaltung.

Was es zeigt

  • Projekt-Rangliste: Platzierte Projekte mit Suche, einer Seitenaufteilung, die zum Bildschirm passt, Animationen bei Platzänderungen und einer Benachrichtigung, sobald ein Projekt bewertet wird.
  • Endergebnisse: die Preisträger nach Stufe.
  • Projektdetails: Ein Klick auf ein Projekt zeigt Beschreibung, Schüler, Punktzahl und Anzahl der Bewertungen.
  • Preisverleihung: eine Vollbild-Präsentation der Gewinner, die von Hand weitergeschaltet wird, mit Eröffnungs- und Dankesfolien und Effekten, die mit jedem Preis größer werden.
  • Startseite: die Veranstaltungsgrafik und das Erscheinungsbild der Schule.

Die Veranstaltungsgrafik zu The Joy of Wisdom.

Wie die Wertung funktioniert

Die Punktzahl eines Projekts ist der Mittelwert der Gesamtpunkte seiner Juroren, wobei nur die jeweils letzte Bewertung jedes Juroren zählt. Jedes Projekt erhält nur seinen höchsten Preis: Herausragend ab 95, Ausgezeichnet ab 90 und Lobende Erwähnung ab 85.

Wie es gebaut ist

Die Antworten der Jury fließen vom Google-Formular in eine Google-Tabelle. Eine Serverless-Funktion auf Vercel liest die Tabelle über ein Dienstkonto und speichert das Ergebnis 60 Sekunden im Cache, und eine React-Single-Page-App fragt sie ab.

  • Vite, React 19 und TypeScript, mit Tailwind CSS v4 in der Farbpalette der Schule.
  • Wertung und Rangfolge sind reine Funktionen mit Unit-Tests (Vitest und Testing Library).
  • Ein Demo-Modus nutzt erfundene Bewertungen und ein Bedienfeld, sodass das Dashboard ohne echte Daten gezeigt werden kann.

Datenschutz

Die echte Tabelle enthält Namen von Kindern und wird deshalb nie ins Repository eingecheckt. Die öffentliche Demo verwendet erfundene Punktzahlen.

Ausprobieren

Die Demo öffnet das Dashboard mit erfundenen Punktzahlen.