Claude Artifacts + React: Teacher Builds Mini Golf Game for Angle Lessons in 20 Min
A teacher (u/cram213) used Claude to rapidly build a miniature golf game that teaches angles, bypassing school restrictions by exporting from Artifacts to raw HTML. The entire workflow — from voice prompting on a phone to a published web game — took about 20 minutes.
Workflow
- Initial build: Using Claude's Artifact feature with React, the teacher created a playable mini golf game to visually demonstrate angles. The school uses Gemini, so published Artifacts URLs were inaccessible.
- Export workaround: The teacher asked Claude to convert the Artifact into a standalone HTML file, then hosted it on a personal website (constraintlayer.ai/educational-engines/golf.html).
- Iteration: The process involved talking to the phone for prompts, then giving feedback to Claude after testing the game in the Artifact preview.
- Student extension: After playing, students drew their own course designs on paper. The teacher uploaded each drawing to Claude, and within about a minute, the class could play their custom courses.
Key technical takeaway
The teacher emphasizes thinking like a systems engineer: describe the problem, plan for edge cases ("stupid things students might do"), and choose the right output format for your deployment constraints. Artifacts with React are great for prototyping, but exporting to plain HTML (no external dependencies) ensures it works on any school network — no Gemini, no Claude Artifact URL needed.
📖 Read the full source: r/ClaudeAI
👀 See Also
Claude Excel Add-on User Review: Practical Experience with Spreadsheet Tasks
A construction company owner reports positive results using Claude's Excel add-on for updating quote and job costing spreadsheets, noting error detection and UI improvement suggestions.
Building a Personal AI Agent with Claude Code: Lessons from 6 Months of Wiz
A developer shares their experience building Wiz, a personal AI agent on Claude Code that handles morning reports, evening summaries, and inbox triage. The post details 9 mistakes made during development, including starting with overly ambitious goals and letting Claude generate core instructions without review.
Wyrmbarrow: A Persistent D&D World for Claude via MCP Tools
A developer built Wyrmbarrow, a headless MUD accessible only through MCP tools where Claude acts as the player. The world features persistent state, D&D 5e combat rules, and a 6-second pulse engine for action economy.
Claude Code in Research Workflow: Practical Results from Paper Writing
A researcher used Claude Code for auxiliary tasks while writing a paper, finding it effective for generating publication-ready figures from vague instructions, migrating a search environment between codebases in under an hour, and formatting 12+ pages of math proofs in LaTeX, where it caught a missed incomplete bound condition. It struggled with debugging a concurrency issue that was actually a CPU allocation problem not evident in code or logs.