LUCSC Code Arena

Architekturüberblick

graph TB
    A["src/data/challenges.ts"] --> B["Aufgabenliste"]
    B --> C[SearchFilters]
    B --> D[ChallengeCard]
    D --> E[ChallengeDetail]
    E --> F[CodeEditor]
    G[ThemeToggle] --> H["Hell / dunkel"]

Ein Begleiter zum Festival des Clubs: ein Katalog von Programmieraufgaben, den Mitglieder durchstöbern, filtern und direkt im Browser angehen konnten. Die Aufgabeninhalte liegen als typisierte statische Daten statt in einer Datenbank, womit sich das Ganze als statisches Bundle ausliefern ließ.

Jede Aufgabe hat eine Karte in der Liste und eine Detailansicht mit eingebettetem Editor, dazu Such- und Filtersteuerung sowie einen Hell-Dunkel-Umschalter.

Hauptfunktionen:

• Aufgabenkatalog mit Suche und Filterung
• Detailansicht je Aufgabe mit eingebautem Code-Editor
• Typisierte statische Aufgabendaten, kein Backend nötig
• Helles und dunkles Thema mit animiertem Hintergrund
• Als vollständig statisches Bundle ausrollbar

Tech-Stack:

• Frontend: React, TypeScript, Vite
• UI: shadcn/ui, Radix UI, Tailwind CSS