From Slack Joke to Production in Under 2 Hours: Building an Interactive Tutorial Page with Claude Code
It started, as many good things do, with someone saying something ridiculous in Slack.
At 17:12 today, Victor dropped this in the Sylius community chat:
“Guys, crazy idea, how about you make SymfonyCasts, but for Sylius? We need a text version so the AI can train on it.”
“From my side, I’m willing to support you emotionally.”
My response? “Like Instagram, but for cats.”
By 19:04, the page was live in production. Here’s what happened in between.
The Raw Material
We already had a recording of Episode 3 of Mateusz’s “15-Minute Sylius” series — a walkthrough of state machines in Sylius. From the YouTube video, we had two artifacts:
- A pandoc-generated HTML file with the full tutorial content: code blocks, Mermaid state diagrams, Q&A sections
- A transcript JSON with timestamped lines from the video
That’s it. No design spec. No Figma mockup. No sprint planning. Just two files and a vague idea.
The Build: One Session, One Tool
I opened Claude Code and described what I wanted: a hidden page on productowner.ro that hosts the tutorial content, styled to match the site, not linked from navigation but accessible via direct URL.
What followed was a fast, iterative conversation. Claude and I went back and forth — I’d give feedback, it would adjust. The whole thing played out in roughly 50 minutes of active work.
The Iterations
First attempt: Claude dropped the pandoc HTML directly into an Astro template. Build failed immediately — Astro’s JSX parser choked on PHP’s $this->type and curly braces inside code blocks. Claude caught the issue and split the content into a raw HTML file imported with Vite’s ?raw suffix. Problem solved.
Typography was ugly: The page had no styles. Turns out the site’s .prose classes live in the blog template and don’t load on standalone pages. Claude built a complete typography system from scratch — Inter + JetBrains Mono fonts, proper heading hierarchy, styled code blocks, blockquotes with indigo accents. All scoped to the page.
Mermaid diagrams too dark: The diagram containers blended into the dark mode background. We went through three iterations — too dark, then too bright (blinding white), then just right (subtle slate elevation).
“Make it scrollable with the video following you”: I wanted the YouTube video sticky in a sidebar while you read. Claude restructured to a two-column layout with the video fixed on the right.
Interactive diagrams: I asked if Mermaid supports interactivity. It doesn’t natively, but Claude added CSS hover effects (glow on nodes, color change on edges) and click tooltips with contextual descriptions for every state and transition across all five diagrams.
“The tooltip just says ‘State: rejected’ — wow, much usefulness”: Fair point. Claude replaced the parrot tooltips with actual descriptions: “The review was rejected by a moderator and will not be displayed.”
The Big Feature: Video-Synced Scrolling
This is where the transcript JSON came in. Claude mapped each section heading to a timestamp in the video, then used the YouTube IFrame API to sync playback with page scrolling. When the video reaches a section, the page auto-scrolls to it. Click a section in the sidebar, the video jumps to that timestamp.
On top of that, in the same session:
- Scroll spy with progress bar — dots fill in as you read sections
- Comprehension questions that appear per section (“What’s the difference between state_machine and workflow type?”)
- Confetti on completion when all sections are visited
- localStorage persistence — progress survives page reloads
The Numbers
| What | Time |
|---|---|
| Victor’s Slack message | 17:12 |
| Source files ready | 17:44 – 18:12 |
| Claude Code session start | ~18:15 |
| Deployed to production | 19:04 |
| Total: idea to production | ~1h 50m |
| Active coding session | ~50 min |
Three files created. Zero files modified. 2,880 lines of code, content, and transcript data. One git push origin main.
What I Actually Did
Honestly? I mostly complained. “Typography is ugly as shit.” “This feels too darkish.” “Wow, much usefulness.” “Make the video follow you while scrolling.”
Claude did the coding. I did the product management — which, come to think of it, is exactly what a product owner is supposed to do.
The Result
The page lives at /syliuscasts/episode-03-state-machines/. It’s hidden — not in the nav, not in the blog listing. You need the URL.
It has interactive Mermaid diagrams, syntax-highlighted PHP and YAML code blocks, a sticky video player synced with the content, a progress tracker, comprehension questions, and confetti when you’re done.
All because Victor said something ridiculous in Slack and I responded with the energy it deserved.
Thanks for the emotional support, Victor.
Later edit: an internal motivator I had to build this was the mention of SymfonyCasts. For me, this is the legacy of Ryan Weaver, a mentor I had without him being aware of this. I owe him the Symfony knowledge I have, the courage to embark in such funny projects, and even if we weren’t close (heck… we only spoke once at SymfonyCon Cluj in 2017), his death tore me apart and still makes me sad. Ryan, wherever you are now, please be aware of the huge impact you had to all of us and see you up there, buddy. Hope that next time we meet, we will be writing such tutorials together, unseparated by time, distance and death. If you want to be grateful for the work I did or the work he did, please consider contributing to his son Beckett’s fund in his memory.