← Back
SP

Spelmakerij Planboard

WEB · DASHBOARD · INTERNAL TOOL

A day-care activity planning tool built for Spelmakerij, a Dutch recreational organization. Admins drag-and-drop participants and supervisors onto activity cards across four daily time slots, then publish the schedule so participants can see where they're placed. Built with Blazor WebAssembly on the frontend and a Node.js/Express API backed by MySQL.", content: `Spelmakerij Planboard is an internal scheduling tool that replaces manual planning for a Dutch day-care organization. Admins compose daily activity grids and publish them with a timed visibility window — participants can't see a plan until it goes live.

Tech Stack

  • Blazor WebAssembly (.NET 9) — SPA frontend compiled to WASM, served statically
  • Node.js / Express (ESM) — REST API, one router per resource
  • MySQL + mysql2 — day plans stored as JSON slot arrays, not per-card rows
  • JWT — role-based auth with `admin`, `deelnemer`, and `vrijwilliger` roles
  • xUnit — service and component tests using `MockHttpMessageHandler`

Features

  • Drag-and-drop calendar editor — `CalendarDragHelper.TryDropTag` validates every move (duplicate check, min-occupancy rules, same-location guard) before mutating state
  • Timed publishing — `visible_from` datetime on each day plan controls when participants can see the schedule; enforced server-side on every request
  • Exclusivity constraints — `user_exclusivities` join table flags participant pairs who can't be scheduled together; the composer shows orange warning banners before you save
  • Participant home view — week-strip navigation with a per-slot tab view and an "alleen ik" filter so participants find their own card immediately
  • Account management — admin page to create/edit accounts across three roles, with per-user `editor_enabled` toggle and absence tracking (ziek / vakantie)
  • Location reordering — drag-to-reorder locations and save as the default slot order
  • Slot time editing — configurable time ranges per slot, persisted to the DB
Blazor WebAssembly.NET 9Node.jsExpressMySQLJWT