Workshop Assignment Tool

A TypeScript-based tool for assigning primary school kids to workshops during project week, built on Val.town.

Project Overview

Target Users: Primary school (60-70 kids, ages 5-11)
Scope: 2-day workshop week, 3 time slots per day, 8-10 workshops per slot
Platform: Val.town with SQLite database and server-side JSX

Key Design Decisions

Platform Choice: Val.town

Server-side architecture: Val.town's JSX renders on server, returns static HTML
No client-side React: Limited to form submissions and page navigation
TypeScript throughout: All vals written in TypeScript for type safety
SQLite database: Built-in database with ACID transactions (10MB free, 1GB paid)

Architecture Decisions

Authentication: Hardcoded admin password with URL-based auth
Frontend: Server-rendered JSX with Hono framework + progressive enhancement
Data storage: SQLite with proper foreign keys and constraints
Interaction pattern: Traditional form submissions instead of SPA interactions

Val.town Capabilities Used

HTTP Handler Vals: For web interfaces and API endpoints
Script Vals: For shared utilities, types, and database functions
SQLite integration: Via std/sqlite for persistent data storage
JSX support: Server-side rendering with Preact or React
NPM packages: Access to TypeScript, Hono, and other libraries
Instant deployment: Code changes deploy immediately in browser

Development Plan

Iteration 1: Admin Setup (2-3 days)

Admin authentication and dashboard
Workshop CRUD operations (create, edit, delete)
Student management with bulk import
Database initialization and schema

Iteration 2: Student Preferences (2-3 days)

Student-facing preference ranking interface
Admin monitoring of completion status
Preference data collection and validation

Iteration 3: Assignment Algorithm (3-4 days)

Fair assignment algorithm implementation
Admin review and adjustment interface
Final schedule generation and export

Technical Stack

Runtime: Val.town (Deno-based serverless)
Language: TypeScript
Database: SQLite via Val.town std/sqlite
Frontend: Server-side JSX (Preact/React)
Framework: Hono for routing and responses
Authentication: Simple password-based auth
Deployment: Automatic via Val.town

Val.town Import Patterns

SQLite Database

import { sqlite } from "https://esm.town/v/std/sqlite";

// Example usage:
const data = await sqlite.execute("SELECT datetime();");
console.log(data.rows[0]);

Importing Other Vals

// Import from your own vals
import { Workshop, Kid } from "./workshopTypes";
import { initDatabase } from "./workshopDatabase";

// Import from other users' vals
import { someTool } from "https://esm.town/v/username/valname";

Data Model

interface Workshop {
  id: number;
  name: string;
  description: string;
  age_groups: string;
  capacity: number;
  day: 'monday' | 'tuesday';
  time_slot: 1 | 2 | 3;
}

interface Kid {
  id: number;
  name: string;
  grade: string;
}

interface Preference {
  kid_id: number;
  workshop_id: number;
  rank: 1 | 2 | 3;
  day: 'monday' | 'tuesday';
  time_slot: 1 | 2 | 3;
}

Val.town Limitations & Workarounds

Limitation: No client-side JavaScript/React hooks
Workaround: Server-side forms with immediate response pages

Limitation: No real-time updates
Workaround: Page refreshes and status polling via forms

Limitation: Traditional web app feel vs modern SPA
Workaround: Fast server responses and progressive enhancement

Development Context

This project was designed with Claude's assistance to work within Val.town's server-side constraints while maintaining modern TypeScript development practices. The architecture prioritizes simplicity and rapid deployment over complex client-side interactions.

Repository Structure: Each major component becomes a separate Val on Val.town, with shared utilities imported between vals using Val.town's module system.

chriseidhof

fnifs-projekte