Divya

for kirodotdev

Posted on Dec 1

🧛👻 BloodBound Academy: How I Built a Haunting AI Study Tool in ~7 Hrs Using Kiro's Spec-Driven Magic

#kiro #halloween #webdev #specdriven

The Challenge

It's 2 AM. You're staring at your syllabus, trying to create study aids for your study sessions. Manually transcribing? Tedious. Organizing topics? Time-consuming. Creating comprehensive lesson plans? Exhausting.

What if AI could do all of this... wrapped in a haunting vampire aesthetic?

That's what I built. But here's the real story: I went from rough idea to production deployment in <7 hrs using Kiro's spec-driven development.

Let me show you exactly how.

⚡ The ~7-Hour Timeline (No BS)

Hour 0:00  → Brain dump ideas (messy, unstructured)
            ↓
Hour 0:40  → Kiro generates complete specs in 5 MINUTES! 🤯
            ↓
Hour 1:00  → Review & refine specs to match my vision
            • Adjust requirements.md for my specific needs
            • Tweak design.md architecture decisions
            • Finalize tasks.md execution plan
            ↓
Hour 4:00  → Click through 15 tasks → Working MVP ✅
            • From empty folder to functional app
            • Systematic task execution
            • All tests passing
            ↓
Hour 7:00  → Vibe code enhancements 🎨
            • Audio system (14 effects)
            • Enhanced animations (blood trails, spiders, bats)
            • Multiple themes (gothic, vampire)
            • Component polish & rendering improvements
            ↓
Hour 7:30  → Refine specs to match final code 📚
            • Kiro analyzes all files
            • Updates specs = living documentation
            ↓
Hour 7:45  → Deploy to Netlify 🚀
            • Git workflow setup
            • Push to production
            • Live on the internet!

Result: A fully functional, production-ready app with:

🤖 AI-powered lesson generation from syllabus images
🧛‍♂️ Immersive vampire theme with 14 audio effects
📜 Ancient scroll viewer with flickering candles
🎨 20+ CSS animations and atmospheric effects
✅ Property-based testing with 100+ iterations
� Living documentation that matches the code

🎯 The Two Game-Changing Moments

Moment #1: Specs in 5 Minutes

I gave Kiro this messy brain dump:

A site with a landing page, and another page where user can
- Upload syllabus images
- AI extracts course structure
- Users pick topics
- Chose between :- Overview, In-depth explanation, or Key Takeaways of the Topic chosen
- Generate study aids based on topic, unit, content type
- Ancient scroll display with candles
- Blood trails, screen cracks, flying bats
- Thunder, lightning, gothic fonts
- Audio effects everywhere
- Multiple themes
- Retro horror game vibes

One prompt later:

"Create comprehensive specs for this project using spec-driven development."

5 minutes. THREE complete files:

📄 requirements.md - 12 requirements, 60+ EARS-compliant acceptance criteria

📄 design.md - Complete architecture, 13 correctness properties, testing strategy

📄 tasks.md - 15 major tasks, 50+ executable subtasks

This wasn't documentation. This was a complete blueprint for building the entire application.

What would have taken me a couple hrs of planning took less than 10 mins.

Moment #2: Click-to-Execute Tasks

Here's where my mind exploded.

In the tasks.md file, I could click on each task to execute it:

- [ ] 2. Implement image upload and validation
  - [ ] 2.1 Create UploadZone component
  - [ ] 2.2 Implement file validation
  - [ ] 2.3 Write property test for file size

Click task 2.1 → Kiro generates complete UploadZone component with drag-and-drop

Click task 2.2 → Kiro implements validation logic with error handling

Click task 2.3 → Kiro writes property-based test with fast-check

Each task built on the previous one. Zero context loss. No "what was I doing again?" moments.

This could be the future of software development.

� My journey: Hour by Hour

Hour 0: The Messy Beginning (40 mins)

I opened a document and brain-dumped everything:

User flow: Upload → Extract → Select → Generate → View → Export
Pages: Dramatic landing page, Generator with upload zone
UI: Flickering candles, blood trails, screen cracks, flying bats
Features: OCR extraction, AI lesson generation, multiple exports
Vibes: Retro, spooky, haunting, Halloween, vampire, gothic

No structure. No implementation plan. Just ideas and vibes.

Hour 0.67: The 5-Minute Miracle

I fed my mess to Kiro:

"Create comprehensive specs for this project using spec-driven development. Generate requirements.md, design.md, and tasks.md files."

5 minutes later:

✅ 12 detailed requirements with 60+ acceptance criteria

✅ Complete system architecture with component interfaces

✅ 13 correctness properties for property-based testing

✅ 15 major tasks broken into 50+ actionable subtasks

✅ Testing strategy with fast-check integration

✅ Security considerations and error handling

I had a complete blueprint for building a production application.

Hours 1-4: Click, Click, Click (3-4 hours)

Starting with an empty folder, I systematically clicked through tasks:

✅ Task 1: Initialize Next.js (~10 min)

✅ Task 2: Upload & validation (~20 min)

✅ Task 3: Text extraction engine (~25 min)

✅ Task 4: AI integration (~30 min)

✅ Task 5: Checkpoint - tests pass ✓ (~5 min)

✅ Task 6: Scroll viewer component (~35 min)

✅ Task 7: Atmospheric effects (~40 min)

✅ Task 8: Export functionality (~20 min)

✅ Task 9: Accessibility (~15 min)

✅ Task 10: Security (~15 min)

✅ Task 11: Application flow (~30 min)

✅ Task 12: Checkpoint - tests pass ✓ (~5 min)

✅ Task 13: Polish UI (~25 min)

✅ Task 14: Deployment config (~10 min)

✅ Task 15: Final checkpoint ✓ (~5 min)

Result: Working MVP in about 4 hrs.

Every component integrated perfectly because Kiro had full context from the specs.

Hours 4-7: Vibe Coding Magic (2-3 hours)

With a working MVP, I switched to creative mode:

Audio System (1 hour):

Me: "Add multiple sound effects with contextual triggers. Act as a veteran professional designer cum dev with an expertise in retro, spooky, halloween, haunting sites & special effects."
Kiro: *generates AudioManager with heartbeat, thunder, whispers*

Me: "Make heartbeat intensify during AI processing. Add more sound effects and handle the audio system for dramatization, more haunting/spooky vibes. I want different & yet overlapping sounds for different actions on the site."
Kiro: *implements dynamic volume control*

Me: "Add vampire ambience that loops"
Kiro: *creates VampireAudio component*

Enhanced Animations (45 min):

Me: "Add crawling spiders on screen edges"
Kiro: *creates CSS keyframes with random delays*

Me: "Blood trails that fade smoothly"
Kiro: *implements trail system with cleanup*

Me: "Screen crack on every click"
Kiro: *generates crack overlay with glass-break sound*

Me: "I want the animations to be realistic, use better css. Act as a veteran designer with an expertise in these sites."

Gothic Styling (30 min):

Me: "Use authentic medieval fonts"
Kiro: *imports Cinzel, Crimson Text, Special Elite*

Me: "Text glitch effects that self-correct"
Kiro: *creates glitch-text CSS with data attributes*

Me: "Darker, more blood-red palette"
Kiro: *updates entire theme system*

Multiple Themes (45 min):

Me: "Vampire theme with blood moon and bats"
Kiro: *generates complete theme with unique effects*

Me: "Theme switching system"
Kiro: *implements useTheme hook with persistence*

The secret? Kiro had access to my complete specs. Every enhancement integrated seamlessly with the existing architecture.

Hour 7: Closing the Loop (30 minutes):

After all the enhancements, my code had evolved beyond the original specs.

So I asked Kiro:

"Analyze all files in the project and refine the specs to match the final implementation"

Kiro scanned every component, hook, and utility, then:

✅ Updated requirements.md with new features
✅ Refined design.md with actual architecture
✅ Adjusted tasks.md to reflect what was built

Now my specs are living documentation - they perfectly describe the production system.

Hour 7.25: Git Workflow & Production Deployment (45 minutes):

Setting Up Git (10 minutes):

git init
git add .gitignore
git commit -m "🧛‍♂️ Initial setup - project structure"

Committing Features Incrementally:

git add components/UploadZone.tsx components/SyllabusViewer.tsx
git commit -m "✨ Add upload and syllabus viewer components"

git add components/AncientScrollViewer.tsx
git commit -m "📜 Add ancient scroll viewer with candles"
.
.
.

git add .kiro/specs/
git commit -m "📚 Add Kiro specs (requirements, design, tasks)"

git push origin main

Deployment to Netlify (15 minutes):

Connected GitHub repo to Netlify
Configured build settings:
- Build command: npm run build
- Publish directory: .next
Added environment variables (GEMINI_API_KEY)
Triggered first deployment

Testing & Verification (20 minutes):

This was crucial. I tested everything:

✅ Upload Flow:

Drag & drop works?
File validation catches invalid files?
Error messages display correctly?

✅ AI Processing:

Syllabus extraction working?
Topic selection modal appears?
Lesson plan generation completes?
Loading states show properly?

✅ Scroll Viewer:

Content renders correctly?
Page navigation works?
Candles flicker?
Markdown formatting preserved?

✅ Audio System:

All 14 sound effects load?
Contextual triggers work?
Volume levels appropriate?
Mute/unmute functions?

✅ Atmospheric Effects:

Blood trails follow cursor?
Screen cracks on click?
Spiders crawl correctly?
Lightning flashes sync with thunder?

✅ Theme Switching:

Vampire theme loads all effects?
Theme persistence works?
Color palettes apply correctly?

✅ Export Functionality:

Markdown export works?
TXT export works?
Filenames correct?

✅ Found and Fixed Issues:

Image upload size validation needed adjustment → Fixed in validation.ts
Theme switching caused brief flash → Added transition smoothing
Export filename had special characters → Sanitized filenames

✅ Final Verification:

Tested on Chrome, Firefox, Safari
Tested on desktop
Verified all API routes working
Confirmed no console errors

🎨 What I Actually Built

BloodBound Academy

Upload a syllabus image, AI extracts the course structure, select a topic, get a comprehensive lesson plan displayed on an ancient scroll with flickering candles, blood trails, crawling spiders, and 14 atmospheric audio effects.

User Experience:

Upload a syllabus image (drag & drop)
AI extracts course structure with Gemini Vision
Select a topic from the extracted units
AI generates comprehensive lesson plan
View on ancient scroll with flickering candles
Export as Markdown or TXT

🧪 The Property-Based Testing Revelation

Traditional tests: "Does this specific input work?"

Property-based tests: "Does this work for ALL possible inputs?"

Using fast-check, I wrote tests that ran 100+ iterations with random inputs:

/**
 * Feature: bloodbound-academy, Property 4: Chunk division completeness
 * Validates: Requirements 4.1
 */
it('should preserve complete text when chunking and merging', () => {
  fc.assert(
    fc.property(
      fc.string({ minLength: 0, maxLength: 100000 }),
      fc.integer({ min: 100, max: 50000 }),
      (text, chunkSize) => {
        const chunks = chunkText(text, chunkSize);
        const merged = mergeChunks(chunks);
        expect(merged).toBe(text);
      }
    ),
    { numRuns: 100 }
  );
});

This found bugs I would NEVER have caught manually:

Unicode surrogate pair handling
Chunk boundary edge cases
Overlap region special characters
Empty string handling

8 property-based tests. 100+ iterations each. Comprehensive coverage.

📊🔢 The Numbers

Development Metrics

5 minutes: Specs generation (would take 3-4 hours manually)
3-4 hours: MVP from empty folder (would take 2-3 days)
7 hours total: Idea to production (would take 2-3 weeks)

Implementation Stats

15 major tasks with 50+ subtasks executed systematically
12 requirements with 60+ acceptance criteria
13 correctness properties defined and tested
8 property-based tests with 100+ iterations each
14 audio effects perfectly synchronized
20+ CSS animations for atmospheric effects
100% spec coverage - every requirement implemented

Code Quality

Full TS type safety
Property-based testing
No persistent data storage (privacy-first)
Retry logic with exponential backoff
CORS and security headers
Accessible (WCAG AA compliant)

🎯 Why This Workflow Changes Everything

Before Kiro

Day 1: Plan architecture (3-4 hrs)

Day 2: Set up project, start coding (6-8 hrs)

Day 3: Build core features (8 hrs)

Day 4: Add UI polish (8 hrs)

Day 5: Testing and bug fixes (3-4 hrs)

Day 6: Deployment and docs (2-3 hrs)

Total: 30-35 hours over 4-5 days

Constant context switching. Forgetting edge cases. Refactoring nightmares. Documentation as an afterthought.

With Kiro

Hour 0-1: Brain dump + Specs generation

Hour 1-4: Click through tasks → MVP

Hour 4-7: Vibe code enhancements

Hour 7-8: Refine specs + Deploy

Total: 7-8 hrs in one day

Crystal clear roadmap. Systematic progress. Comprehensive testing. Living documentation.

That's 4-5x faster. And better quality.

🏆 The Three Superpowers

1. Specs Generation (5 mins)

Transform messy ideas into:

Structured requirements (EARS-compliant)
Complete architecture (components, APIs, data models)
Correctness properties (property-based testing)
Executable task list (50+ subtasks)

Saves hours of planning. Prevents implementation mistakes.

2. Click-to-Execute Tasks

The tasks.md file is an interactive implementation guide:

Click a task → Kiro executes with full context
No copy-pasting
No context loss
No "what was I building?"

This is revolutionary.

3. Living Documentation

After vibe coding, refine specs to match reality:

Analyze all files
Update requirements
Refine design
Adjust tasks

Perfect documentation that matches production code.

💡 Key Insights

Insight #1: Specs First, Code Second

Starting with specs means:

✅ Clear requirements before writing code
✅ Defined correctness properties
✅ Systematic implementation plan
✅ Comprehensive test coverage
✅ Living documentation

You know exactly what to build before you build it.

Insight #2: Vibe Coding + Specs = Magic

The combination is powerful:

Specs provide structure and correctness
Vibe coding provides creative freedom
Specs refinement closes the loop

Fast development without sacrificing quality.

Insight #3: Property-Based Testing is Essential

Testing with random inputs finds bugs you'd never imagine:

Edge cases
Boundary conditions
Unicode handling
Empty states

8 tests with 100+ iterations each = comprehensive coverage.

🎃 The Costume Contest Angle

Haunting User Interface ✓

Blood moon with pulsing glow
Interactive blood trails
Screen crack effects with sound
Crawling spiders on edges
Flying vampire bats
Lightning flashes with thunder
Flickering candles
Gothic typography

Immersive Audio ✓

14 contextual sound effects:

Vampire ambience (looping)
Heartbeat during processing
Thunder with lightning
Glass break on clicks
Door creaks on navigation
Random whispers, footsteps, drips

Polished Design ✓

Multiple themes (Gothic, Vampire)
Smooth animations (20+ CSS keyframes)
Ancient scroll viewer
Ornamental decorations
Text glitch effects
Bleeding text animations

Every detail crafted for the best possible haunting, spooky, retro themed user experience.

🤖⚡ The Bottom Line

I built a production-ready application in 7 hours.

Not a prototype. Not a demo. A fully functional, deployed, tested application with:

Comprehensive requirements
Solid architecture
Property-based testing
Living documentation
Production deployment

This is the future of software development.

The workflow:

Brain Dump (40 min)
    ↓
Kiro Specs (5 min) ← GAME CHANGER
    ↓
Click Tasks (3-4 hrs) ← REVOLUTIONARY
    ↓
Vibe Code (2-3 hrs) ← CREATIVE FREEDOM
    ↓
Refine Specs (30 min) ← LIVING DOCS
    ↓
Deploy (15 min)
    ↓
Production! (7 hrs total)

🎮 Experience the Dark Magic Yourself

🔗 Live Demo: bloodbound-academy.netlify.app

📱 Source Code:

Divya4879 / SpecterScript

A haunted PDF-to-lesson-plan generator for the Kiroween hackathon's Costume Contest category.

🧛‍♂️ BloodBound Academy

Transform your ordinary image coursework into magical study aids with immersive vampire-themed UI and spine-chilling interactive effects.

Check it out here:- https://bloodbound-academy.netlify.app

🎃 Overview

BloodBound Academy is a Halloween-themed web application built for the Kiroween Hackathon (Costume Contest category) that combines educational technology with horror aesthetics. Upload image files of syllabi or course materials, and watch as OCR extracts the text while AI transforms it into comprehensive lesson plans surrounded by atmospheric vampire effects, interactive blood trails, and haunting audio.

🏆 Hackathon Category: Costume Contest

Haunting User Interface: Polished vampire theme with dripping blood effects, crawling spiders, and atmospheric elements
Interactive Horror Effects: Blood cursor trails, screen cracks, lightning flashes, and phantom notifications
Immersive Audio: 14 layered horror sound effects including vampire ambience, heartbeats, and thunder
Functional Application: Real Image Content Extraction with AI-powered study guides generation

✨ Features

🧛‍♂️ Vampire Theme Interface

…

View on GitHub

🎥 Project Video Demo:

📸 Glimpses from the Shadows

Where cursed documents meet AI magic

🧛♂️ Dare to Enter?

Upload a syllabus image. Select a topic. Watch as ancient AI spirits summon comprehensive lesson plans from the very essence
of darkness.

But beware...
Don't blame me if you hear whispers echoing through your study sessions... or if shadows seem to move in your peripheral vision... or if you catch yourself humming haunting melodies that weren't there before... or if you feel an inexplicable presence watching over your shoulder, even in an empty room...

Some knowledge comes with a price. Are you willing to pay it?👻🌙

Ready to summon your study materials from the abyss? The blood moon awaits your courage... 🩸

Top comments (2)

Kushal Narkhede • Dec 1

This project is amazing!!! Incredible how Kiro's spec-driven approach turns a 7-hour build into such an effective and spooky study tool. This project is giving me cool ideas for my app I am developing. Great Job 🎉🎉🥳🥳

Divya kirodotdev • Dec 1

Thank you for checking it out 😊

Best wishes for your project as well!