LUCSC Code Arena

Architecture Overview

graph TB
    A["src/data/challenges.ts"] --> B[Challenges list]
    B --> C[SearchFilters]
    B --> D[ChallengeCard]
    D --> E[ChallengeDetail]
    E --> F[CodeEditor]
    G[ThemeToggle] --> H[Light / dark]

A companion to the club's festival: a catalogue of coding challenges that members could browse, filter and attempt in the browser. Challenge content is held as typed static data rather than in a database, which kept the whole thing deployable as a static bundle.

Each challenge has a card in the listing and a detail view with an embedded editor, alongside search and filter controls and a light/dark toggle.

Key Features:

• Challenge catalogue with search and filtering
• Detail view per challenge with an in-page code editor
• Typed static challenge data, no backend required
• Light and dark themes with an animated background
• Deployable as a fully static bundle

Tech Stack:

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