Context

Solo designer and developer. Designed and built the planner as a core tool within the Workshopr platform.

The problem

Facilitators build agendas in spreadsheets. They manually add up durations, guess at timing, and lose track of which exercises they planned to use. When a workshop runs long, they don't know what to cut because they can't see the whole picture.

Multi-day workshops are worse — the same spreadsheet gets a "Day 2" tab and the math falls apart.

What I designed

A drag-and-drop agenda builder where facilitators pull exercises, icebreakers, and breaks from the Workshopr library directly into a visual timeline.

Key design decisions:

• Library sidebar with category browsing. Exercises load by category via AJAX — no full page reload. Click "Ideation," see ideation exercises. Drag one onto the timeline. The sidebar stays open so you can keep browsing.

• Real-time duration math. A progress bar shows total planned time vs. workshop duration. Turns red when you're over. Facilitators feel the constraint visually instead of doing arithmetic.

• Multi-day auto-grouping. Set a 2-day workshop and items automatically split across days at the right breakpoints. Day tabs appear when needed.

• Three persistence layers. Session state lives in sessionStorage (survives refreshes), settings in cookies (survives tabs), and full plans in the database (survives everything). Anonymous users can build an agenda; saving prompts login.

• Export to PDF, Word, Excel, Markdown. Because the agenda ultimately needs to live in whatever tool the client uses.

The planner also feeds into the Coach for live and post-facilitation support, workshop synthesis, and long-term skill reflection.

Architecture

Modular JS — 11 separate modules (storage, modals, API, drag-drop, agenda, export, templates, calendar, time, UI, cleanup) orchestrated by a central WorkshopPlanner class. No build step, no bundler. Each module owns one concern.

Backend: PHP data layer querying exercises, icebreakers, breaks, categories, and plans via PDO. Seven planner-specific API endpoints plus five shared APIs.

What shipped

Working drag-and-drop planner with Sortable.js, real-time calculations, multi-day support, Google Calendar integration, share links with short codes, and four export formats.