🪄 Demo
https://youtu.be/hY6U_CnSAtg
https://portfolio-13181.web.app/
👻 Background
Kiroween is a Halloween-themed hackathon hosted by AWS to showcase the capabilities of Kiro, their AI coding agent. The challenge:
Build something ambitious, creative, and technically unique in under a month.
For me, this project meant stepping into the unknown combining gothic aesthetics, multi-module architecture, AI-powered workflows, and agent orchestration into a single cohesive product.
What emerged from that darkness was Soulbound Codex: a fully featured, atmospheric productivity suite transformed into a spooky, immersive experience.
🪄 Soulbound Codex
A dark, ritual-themed productivity platform with four major modules:
✍️ Ghost Writer
Live AI writing suggestions using multi-agent reasoning + cursed typewriter animations.
📖 Necronomicon Notes
An ancient tome for note-taking with markdown, live preview, full search, and animated parchment effects.
⚰️ Graveyard Dashboard
Tasks appear as tombstones with physics, moonlit shadows, digging animations, particle effects, and Pomodoro tracking.
🔮 Terminal Tarot
Analyzes GitHub commit history and generates tarot-style readings about coding habits, patterns, and project quality.
Plus:
🌕 Moon phase calendar
🕸️ Ambient soundscapes
🧩 Offline-first architecture
🛠️ Cloud sync (Firebase)
🔐 OAuth (GitHub/Google)
This isn’t just a themed UI — it’s a complete productivity platform.
🧠 Technical Achievements
Architecture & Engineering
Multi-module React architecture (React 19 + TS 5.9)
Offline-first design with dual-layer storage
Git analysis in the browser with isomorphic-git
Real-time cloud sync with Firebase
Multi-agent AI orchestration (Nemotron 70B, Gemini, OpenAI)
Intelligent fallback + caching layer for AI reliability
Theme engine with instant switching
Import/export (JSON, Markdown, CSV)
Accessibility overlays for the full suite
UI & Interaction Design
Parchment rendering system
Physics-based task animations
Gothic fonts, particles, ritual effects
Keyboard navigation across modules
⚡ How Kiro Helped (MCP + new Kiro features)
Kiro wasn’t just a tool it was a development partner.
I used nearly every part of the MCP workflow:
🧾 Spec-Driven Development
Every feature began as a .kiro/spec file (see screenshot):
routing-system
multi-age-coordination
necronomicon-enhancements
ghost-writer-ux
spirit-companion-interactions
theme-system
terminal-tarot-improvements
astral-projection
Kiro converted these specs into modular, production-quality code with no ambiguity.
🎚 Steering Files
Under .kiro/steering:
product/ — UX philosophy
structure/ — file org & patterns
tech/ — conventions & architecture
These enforced consistency across the entire app.
🪝 Agent Hooks
Hooks automated complex workflows:
Auto Test Coverage Generator
Localization Translator
Code Quality Analyzer
Context Provider Check
Docs Sync
This automation dramatically reduced manual cleanup time.
🆕 New Kiro Features that were game-changing
✔ Property-based testing
Validated that generated code matched the intent of the spec.
✔ Checkpoints
Let me roll back Kiro-generated changes instantly — a lifesaver for large refactors.
✔ Kiro CLI
Allowed me to run custom agents inside my terminal during development.
✔ Team-Ready Architecture
Centralized spec & steering management meant that this workflow scales to real teams.
Kiroween without Kiro would have taken months, not weeks.
🧩 Challenges I Faced
⏳ Time pressure — balancing a huge multi-module system with limited daily time
🕯 Heavy theming — animations, parchment textures, moon phases needed fine tuning
🤖 AI differences — Nemotron, Gemini, OpenAI all behave differently
🗃 Browser Git analysis — implementing commit parsing client-side was tough
🗓️ Condensed Timeline
Day 1–3 — “I Have No Idea What I’m Summoning, but Let’s Do It.”
I opened a blank repo, lit a metaphorical candle, and told Kiro, “We’re building a productivity suite possessed by ancient spirits.”
Kiro replied with a 27 file project structure in 4 seconds. I panicked, then pretended that was exactly what I wanted.
These first days gave birth to:
The core React architecture
The theme engine
The first cursed prototype of the Graveyard Dashboard
A Notes module that looked like Notion, if Notion had been abandoned in a haunted library
I also learned the ancient truth: a developer’s first three days are 20 percent coding, 80 percent questioning their life choices.
Day 4–6 — “Ghosts, Why Are You Falling Through the Floor?”
Moon phase calendar (astronomically accurate, emotionally chaotic)
Markdown editor
Graveyard physics where tombstones sometimes yeeted themselves off screen for no reason
I spent 2 hours debugging a particle effect that turned the screen into a snowstorm.
Kiro very politely suggested I reduce the spawn rate from 600 particles per second to “something less apocalyptic.”
Day 7–10 — “This Is No Longer a Project. It’s a Pact.”
This phase turned into a full-blown magical ritual.
Accomplishments:
The Git commit divination engine built with isomorphic-git
Tarot generation logic that felt uncomfortably accurate
AI fallback systems across Nemotron, Gemini, Hugging Face, and OpenRouter
Cloud sync that behaved half like Firestore, half like a ghost that rattles chains after midnight
Day 11–14 — “Polish, Panic, Polish Again.”
This period was a montage of frantic coffee-fueled creativity.
New polish included:
Particle effects that no longer triggered GPU meltdown
Keyboard shortcuts that made the app feel like a spellbook you can speedrun
Import/export that mostly doesn’t corrupt your soul— or your JSON
Accessibility improvements because even ghosts deserve semantic HTML
Final UI cleanup where I deleted a div and broke the layout for two hours
At 3AM I added ambient audio and accidentally made the typing sound like “footsteps in your house.”
🎯 What I Learned
✨ Kiro-Related Learnings
Offline-first design pairs perfectly with spec-driven dev
Service layers make AI integrations testable and swappable
Kiro works best when specs + steering rules are extremely clear
Documentation generated through Kiro becomes self-sustaining
Checkpoints and hooks accelerate iteration dramatically
✨ Technical Learnings
Clear specs beat guesswork
Browser Git analysis is powerful but complex
Aesthetics influence user motivation
Ritual interactions create emotional engagement
AI-assisted development is a new and much faster paradigm
✨ AWS SageMaker Lessons
I experimented with Amazon SageMaker for fine-tuning historical figure personality models. While powerful, I learned quickly:
❌ Avoid (Too Expensive for Students):
Real-time endpoints: ~$193/month even when idle
Always-on services quietly accumulate costs
Large GPU instances = impractical without credits
This pushed me toward a hybrid approach using:
Hugging Face + Gemini + local orchestration — far more cost-effective for hackathon use.
🏆 Final Thoughts
Building Soulbound Codex felt like walking through a haunted forest with Kiro carrying the lantern. Each step forward revealed more of the path — sometimes eerie, always exciting.
This hackathon taught me:
how to build complex software fast with AI
how design can shape emotion
how to plan, structure, and ship under pressure
how AI agents can meaningfully extend developer ability
Soulbound Codex is an experience.
And it all came together because of Kiro!!!
Top comments (0)