PhantomForge

Inspiration

What it does

How we built it

About PhantomForge

Inspiration

The web has lost its soul. Modern sites are sleek, fast, and... soulless. I missed the chaotic beauty of Geocities pages with their dancing GIFs, the mysterious allure of BBS terminals with ASCII art, and the electric energy of 90s neon blogs. When the Kiroween Hackathon was announced, I saw an opportunity to resurrect these digital ghosts.

PhantomForge was born from nostalgia and a question: What if we could summon the spirit of retro web design with modern AI? The "Frankenstein" category felt perfect—stitching together vintage aesthetics with cutting-edge technology to create something beautifully haunted.

What I Learned

Spec-Driven Development is Powerful
Writing complete requirements and design documents before coding forced me to think through edge cases. The spec became my north star when implementation got messy. Kiro's spec features made this workflow seamless.

Agent Hooks Transform Workflows
Automating thumbnail generation and asset processing saved hours. Watching hooks execute on file save felt like having a ghost assistant. The parallel processing pattern (max 5 concurrent operations) taught me about semaphore-based concurrency:

$$\text{Throughput} = \min(N_{\text{tasks}}, N_{\text{permits}}) \times \frac{1}{T_{\text{avg}}}$$

Where $N_{\text{permits}} = 5$ and $T_{\text{avg}}$ is average task duration.

Retry Logic is Non-Negotiable
Database connections fail. APIs timeout. I implemented exponential backoff with a maximum retry count:

$$\text{Delay}_n = \min(2^{n-1} \times 1000\text{ms}, 60000\text{ms})$$

This pattern saved the system from cascading failures during load testing.

TypeScript Strict Mode is Worth It
Initially painful, but caught dozens of bugs before runtime. The type safety between frontend models and backend interfaces prevented API contract mismatches.

How I Built It

Phase 1: Foundation (Days 1-2)

Set up TypeScript backend with Express
Designed MySQL schema with proper indexes and foreign keys
Implemented authentication with JWT and bcrypt
Created repository layer with retry logic

Phase 2: Core Generation (Days 3-4)

Built AIGhostwriterService with three theme generators
Implemented CSS generation for Geocities (rainbow animations), BBS (ANSI colors), and Neon (glow effects)
Added 30-second timeout enforcement: $T_{\text{max}} = 30000\text{ms}$
Integrated WebSocket for real-time progress updates

Phase 3: Automation (Day 5)

Created HookService with thumbnail generation using Sharp
Implemented MCP connectors with 10-second timeout and 24-hour caching
Added parallel processing with semaphore pattern
Built asset manifest system

Phase 4: Kiro Integration (Day 6)

Wrote complete spec documents (requirements, design, tasks)
Created steering documents for voice and structure consistency
Configured agent hooks for automated workflows
Set up MCP connector configuration

Phase 5: Polish (Day 7)

Added search and pagination (12 items per page)
Implemented validation system
Wrote comprehensive documentation
Created seed data for testing

Tech Stack:

Backend: Node.js + Express + TypeScript
Frontend: Angular 14 + RxJS
Database: MySQL 8.0 with connection pooling
Real-time: WebSocket (ws library)
Image Processing: Sharp
Testing: Jest

Challenges I Faced

Challenge 1: Database Connection Stability
MySQL connections would drop during development. Solution: Implemented connection retry with exponential backoff, max 1-minute duration, 5-second intervals. The pool now recovers gracefully.

Challenge 2: Generation Timeout Enforcement
AI generation could hang indefinitely. Solution: Added Promise.race pattern with 30-second timeout. If exceeded, the system fails gracefully and updates microsite status to 'failed'.

Challenge 3: Parallel Hook Processing
Processing 50 images simultaneously crashed the server. Solution: Implemented Semaphore class limiting concurrent operations to 5. This balanced throughput and resource usage:

$$\text{Memory}{\text{peak}} = N{\text{concurrent}} \times \text{ImageSize}_{\text{avg}}$$

With $N_{\text{concurrent}} = 5$, memory stayed under 500MB.

Challenge 4: MCP Connector Reliability
External services were unreliable. Solution: Three-layer defense:

10-second timeout per call
3 retry attempts with exponential backoff
24-hour caching to reduce external dependencies

Challenge 5: Maintaining Spooky Aesthetic
Keeping the "haunted" vibe consistent across generated sites. Solution: Created steering documents that enforce vocabulary ("haunted", "ethereal", "shadows") and tone. The AIGhostwriterService applies these rules to all generated content.

Challenge 6: Delete Performance
Deleting microsites with many assets took 15+ seconds. Solution: Leveraged MySQL CASCADE deletes and indexed foreign keys. Now completes in under 5 seconds as required.

What Makes It Special

PhantomForge isn't just a code generator—it's a time machine. Each theme is meticulously crafted:

Geocities: Rainbow text animations, sparkle cursors, marquee scrolling
BBS: Authentic ANSI color codes, blinking terminal cursors, ASCII borders
90s Neon: Glow effects with proper shadow layering, gradient backgrounds, cyberpunk vibes

The deep Kiro integration showcases what's possible with spec-driven development, agent hooks, and steering documents. Every feature was built with automation and quality enforcement in mind.

The Result

A production-ready system that generates authentic retro microsites in under 30 seconds. Complete with database persistence, real-time updates, automated asset processing, and comprehensive documentation. The backend is fully implemented; the frontend is scaffolded and ready for UI polish.

PhantomForge proves that nostalgia and modern technology can coexist beautifully—and that the ghosts of the old web are ready to haunt again.