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
Developer Reports AI Coding Challenges: Design Decisions and Real-User Debugging
A developer building an iOS app with Claude Code for 5 months reports that while the AI can generate functional code easily, making design decisions and debugging issues that only appear with real users are the most difficult parts. The app has 220k lines and real users are testing it.
Readigo: iOS App Uses Claude as AI Reading Coach for Kids
A developer built Readigo, an iOS app where children read stories to an AI dragon character. Claude analyzes speech-to-text transcripts to score reading accuracy, fluency, pacing, and clarity, then generates age-appropriate feedback.
Developer Builds 3D Browser Game Using Claude Code Opus and Three.js
A developer created Traffic Architect, a 3D road building and traffic management game that runs entirely in browser using Claude Code Opus 4.6 and Three.js. The game features code-generated visuals with no external assets and the developer shares specific workflow strategies for effective AI collaboration.
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.