AI Coding Tutor — Interactive AI-Powered Coding Challenge System
The platform landing page with course overview
Coding bootcamps and online courses teach concepts — but students only improve by writing actual code with immediate, intelligent feedback. This platform gives every learner a personal AI tutor that reads their code and meets them where they're stuck.
The AI Coding Tutor is built on the belief that the best way to learn programming is by writing real code with intelligent guidance. Students work through 240 progressive challenges spanning HTML, CSS, JavaScript, and full-stack development, writing code directly in a browser-based Monaco editor — the same engine that powers VS Code.
What makes this platform different is the AI tutor powered by Claude 3.5. Rather than just checking answers against a solution key, the AI analyzes the student's actual code to provide contextual help, explanations, and personalized guidance. It adapts to where the student is struggling and offers targeted assistance.
160 of the challenges include enhanced variants with three-tier hints (nudge, guide, and full walkthrough) and multiple valid solutions. After three unsuccessful attempts, the solution is unlocked so students can learn from it and move forward. The AI can also generate themed challenge variants for additional practice.
Key Features
HTML + CSS Challenges
Level 2 challenges cover HTML and CSS fundamentals — students edit index.html, script.js, and style.css in a multi-tab Monaco Editor with syntax highlighting, then run automated tests to verify their solutions. Each challenge includes a Description, Tests, Hints, Solutions, and Real World context tabs.
JavaScript Challenges
Level 3 JavaScript challenges present pure function problems — Sum Array, Factorial, Palindrome, FizzBuzz, and more. Students implement functions in the Monaco Editor and run JSDOM-sandboxed tests to validate their code without leaving the browser.
AI Tutor & Three-Tier Hints
Claude Haiku 4.5 powers the AI Tutor chat panel, analyzing the student's current code, test results, and editor state to provide Socratic guidance. Three progressive hint levels (nudge, guide, walkthrough) give increasing detail, and suggested questions like "What am I doing wrong?" or "Show me a more direct hint" keep students moving.
Full Stack Challenges & Test Runner
Level 4 covers full-stack patterns — Loading/Error visuals, Import/Export JSON, Input masking, Tabs views, Debounced saves, and more. Tests run in a JSDOM sandbox on the server, executing student code against DOM assertions and returning pass/fail results per test case.
AI Challenge Variant Generation
The "Generate AI Variant of Challenge" button uses Claude 3.5 Haiku to create themed skins of existing challenges — new narratives and descriptions while keeping tests deterministic and unchanged, providing unlimited practice on the same concepts.
Screenshots