HexForge - spooky-themed coding education game

HexForge is an interactive coding education game that combines learning JavaScript with a haunted Halloween theme.

Comment

Inspiration

The primary inspiration was to create a truly fun and engaging educational experience for learning JavaScript, specifically designed for the Kiroween Hackathon theme. We wanted to build a project that not only delivered a polished user experience (Haunting UI, fitting the Costume Contest category) but also demonstrated a mastery of Kiro's next-level AI development features, moving beyond basic "vibe coding" into a structured, spec-driven workflow.

What it does

HexForge is an interactive, spooky-themed coding education game. It allows players to: Solve 10 diverse JavaScript coding challenges (from basic syntax to advanced array methods) within a professional Monaco Editor. Receive real-time validation and instant feedback on their solutions. Earn XP and level up through themed ranks (like 'Cryptogoblin' and 'Shadow Coder'). Customize their Kiro ghost wizard avatar and compete on a leaderboard. Provide a polished UI experience using a custom dark theme and smooth Framer Motion animations.

How we built it

The project was built using a Spec-Driven Development approach, heavily leveraging Kiro's AI tools to structure and accelerate the entire process.

Structure & Planning: We started by defining 16 comprehensive requirements and 26 correctness properties in the .kiro/specs directory, which reduced development time by ~40% by eliminating scope creep.

Consistency: Two dedicated Steering Documents (ui.md and code.md) guided all Kiro generation, ensuring a consistent Halloween color palette, smooth animations, and adherence to strict TypeScript/functional React code styles. This reduced refactoring by ~60%.

Automation: An Agent Hook was created to automate the quest scaffolding workflow, watching for new quest JSON files and automatically generating test templates, saving development time.

Complex Features: We used Vibe Coding to generate complex components like the animated Toast Notification System (with sparkles/glow effects) and the regex-based Quest Validation Engine in single, rapid conversations.

Challenges we ran into

Maintaining Consistency: Initially, generating a cohesive UI across 20+ components with a custom dark palette was difficult. This was overcome by implementing Steering Documents, which automatically enforced our styling and animation rules.

Formalizing Requirements: Moving from ad-hoc ideas to a testable application required a rigid structure. This was solved by using Kiro's Spec-Driven Development to define EARS-compliant requirements and architectural correctness properties.

Repetitive Workflow: Scaffolding the assets (JSON, Test Files) for 10 new quests was a repetitive manual task. This was solved using an Agent Hook to fully automate the process.

Accomplishments that we're proud of

Built an excellent game which can serve as a reference for building amazing games using Kiro

What we learned

We learned that Kiro is most powerful when used in a structured, multi-feature way, rather than just as a code generator. Specifically:

Formal design specifications, particularly correctness properties defined in the specs, can be directly translated into testable property-based tests.

Steering Documents are the key to maintaining a consistent design system and code quality across a large project, reducing manual refactoring significantly.

The MCP (Model Context Protocol) is a powerful tool for extensibility, as we laid the foundation for community quest integration by fetching GitHub issues directly.

What's next for HexForge - spooky-themed coding education game

Further enhance it to make it production grade by customizing it for all major events/festivals/throughout the year across the world.

Built With

Share this project:

Updates