Admin Page
Loading Page
Main Menu
Frankenbook

🧟 Frankenbook: AI-Powered Children's Story Generator

Category: Frankenstein - Stitch together a chimera of technologies
Bonus: Best Startup Project

🎃 Inspiration

I write a lot of books...

Or at least I used to. Novels. Horror was my favorite genre, and I spent many sleepless nights plugging away on my mechanical keyboard (the ones that don't have that comforting clang give me the chills!) to finish pulling a story from my brain to drop onto the page before it was lost to the ether.

Then life got to me and I slowed down and focused on my real job plugging away at boring monolithic corporate repositories to make a webpage load faster or convert from jsp to react. I still get my creative side out sometimes, but usually its writing some code for a game I'm working on and less on telling stories.

This, though, solves both issues simultaneously! I get to design something a little bit crazy to throw out my creative side and it integrates directly with my writer side of creating books.

Win win!

🎬 What it does

Frankenstein is a full-stack AI-powered children's story generator that transforms simple user inputs into immersive, multimedia storybooks complete with:

🤖 AI-generated narratives (Claude Sonnet 4.5)
🎨 Custom illustrations for each page (Stability AI SDXL)
🎙️ Professional narration with synchronized text highlighting (ElevenLabs)
🎵 Background music that matches the story mood - CDN-hosted tracks (scary, action, awesome, journey)
📖 3D book interface with realistic page-turning animations
✨ Spooky/magical theme with floating bats, ghosts, candles, and particle effects
🌅 Dynamic theming that adapts to your local time of day
💰 Built-in cost tracking with admin dashboard

The Experience

Story Customization - Choose your theme (Spooky, Adventure, Fantasy) and narrator voice (Male, Female) to personalize your story
Mad-Lib Input - Fill in 8 story elements (character, setting, villain, special item, trait, goal, time period, mood) with helpful suggestions or hit "Surprise Me!" for instant randomization
Two-Phase Generation - Watch the magic happen with live progress updates showing outline creation (5%) followed by full story development, complete with literary quotes and family-friendly jokes
Cinematic Playback - Experience your 10-15 page story like a movie with auto-advancing pages, word-level text highlighting synced to narration, 3D book effects, and atmospheric animations
Completion - Get random advice for encouragement, see achievement stats, and choose to replay or create a new story
Admin Dashboard - Monitor API usage, track costs, configure voice IDs and pricing, and manage your story generation infrastructure

🚶 The User Journey

Story Library 📚

Browse your saved stories in a beautiful modal overlay. Play any story instantly, delete old ones, or jump to the admin dashboard. Full keyboard navigation and screen reader support included.

Create Your Story

Pick a Moral Theme - Choose from 15 educational life lessons (honesty, friendship, courage, kindness, etc.)
Choose a Voice - Male or Female narrator
Fill in 8 Story Elements - Character, setting, villain, special item, trait, goal, time period, mood
- Type your own or click suggestions
- Hit "Surprise Me!" for instant randomization
Generate - Watch the magic happen!

The Generation Process (2-3 minutes)

Watch real-time progress with literary quotes and family-friendly jokes:

Outline (5%) - Claude creates story structure (10-15s)
Story (30%) - Full 10-15 page narrative written (20-30s)
Images (80%) - Stability AI generates illustrations (50-75s)
Audio (100%) - ElevenLabs creates narration (40-60s)
Music - CDN-hosted background tracks (instant, no generation)

The Reading Experience 📖

3D Book Interface - Realistic page-turning with depth and shadows
Auto-Play - Pages advance automatically with narration
Word-Level Highlighting - Text glows as it's spoken
Atmospheric Effects - Floating bats, ghosts, candles, sparkles
Manual Controls - Pause, skip, adjust volume anytime

Completion 🎉

Celebration animations, story stats, and options to replay or create a new story.

Behind the Scenes

Stories saved to storage/{story-id}/ with metadata, images, and audio
API costs tracked: ~$0.40 per story (Claude $0.015, Stability $0.08, ElevenLabs $0.30)
Admin dashboard at /admin for monitoring and configuration

🧬 The Frankenstein Factor: A Chimera of 44 Technologies

This project embodies the Frankenstein category by stitching together an ambitious collection of seemingly incompatible technologies into one cohesive, powerful application:

🤖 3 AI Services (The Brain)

Anthropic Claude (Sonnet 4.5) via Spring AI - Story generation with moral themes
Stability AI (SDXL 1024) via Spring AI - Image generation with left-third composition
ElevenLabs via RestClient - Text-to-speech narration with configurable voices

🎨 7 Animation & Effects Libraries (The Soul)

Framer Motion - UI animations and transitions
GSAP - Complex timeline animations
React Spring - Physics-based animations
Lottie - Micro-animations
Three.js + React Three Fiber - 3D book rendering
tsParticles - Particle effects
Drei - Three.js helpers

🌐 10 External APIs (The Nervous System)

Paid AI Services (3):

Anthropic Claude API (~$0.015/story)
Stability AI API (~$0.08/story)
ElevenLabs API (~$0.30/story)

Free Enhancement APIs (7):

ZenQuotes API - Literary quotes on loading screens
Sunrise-Sunset API - Dynamic theming based on time of day
Advice Slip API - Random encouragement on completion
JokeAPI - Family-friendly jokes during generation
Random User API - Character name suggestions (ready to integrate)
Bored API - Activity suggestions for story goals (ready to integrate)
Agify API - Age-based theme recommendations (ready to integrate)

🏗️ Backend Stack (The Skeleton) - 10 Technologies

Spring Boot 3.5.0 with Java 21
Spring AI 1.0.0-M4 (Anthropic + Stability integrations)
Spring WebSocket (STOMP protocol)
Spring Boot Actuator for monitoring
Maven build system
Custom DotenvConfig for .env file loading
RestClient with configurable timeouts
Jackson for JSON processing
Lombok for boilerplate reduction
SLF4J for logging

🎨 Frontend Stack (The Flesh) - 14 Technologies

React 18 with TypeScript
Vite 5 build tool
Tailwind CSS 3.4 for styling
Zustand for state management
React Router DOM for navigation
React Hook Form + Zod for form validation
Axios for HTTP client
STOMP.js for WebSocket client
Howler.js for audio playback
Radix UI primitives
Aceternity UI components
React Hot Toast for notifications

🔧 Development Tools (The Lab Equipment) - 5 Technologies

ESLint + Prettier for code quality
Vitest + React Testing Library for testing
Playwright for E2E testing

Total: 44 technologies working in harmony! 🎃

🛠️ How Kiro Built This Monster

This project showcases extensive use of Kiro's features to manage the complexity of integrating 40+ technologies:

1. 🎯 Vibe Coding + Specs: The Hybrid Approach

The project used both conversational "vibe coding" for quick iterations AND structured specs for complex features. This hybrid approach gave us speed when possible and structure when needed:

Vibe Coding (for quick changes, bug fixes, simple features):

Natural conversation with Kiro
Immediate implementation
Fast iteration cycles
Perfect for UI polish, bug fixes, configuration changes

Spec-Driven (for complex features, major refactoring):

Comprehensive requirements → design → tasks documents
Methodical implementation following task lists
Used for: code refactoring (20+ tasks), story customization (15 tasks), library management (25+ subtasks)
Ensures nothing is missed in complex work

Here's how the vibe coding worked:

Initial Architecture Setup:

Me: "Create a children's story generator with AI"
Kiro: *Sets up Spring Boot + React + Claude integration*
Me: "Use constructor injection, never @Autowired"
Kiro: *Refactors all services to use @RequiredArgsConstructor*
Me: "Add author attribution to all classes"
Kiro: *Adds JavaDoc with @author alarinel@gmail.com*

API Integration Simplification:

Me: "Simplify the image generation to use Spring AI instead of custom code"
Kiro: *Replaces 130 lines of OkHttp boilerplate with Spring AI's ImageModel*
Me: "Do the same for audio generation"
Kiro: *Refactors from OkHttp to Spring's RestClient*

Performance Optimization:

Me: "The API is timing out on story generation"
Kiro: *Increases HTTP client timeouts from 2 to 5 minutes*
Kiro: *Fixes model name from incorrect claude-sonnet-4-5-20250929 to correct claude-3-5-sonnet-20241022*
Me: "Audio generation is failing due to rate limiting"
Kiro: *Implements batch processing with 3 concurrent request limit*

UI/UX Polish:

Me: "The title is being cut off"
Kiro: *Moves header outside constrained container, adds responsive text sizing*
Me: "Surprise Me button makes the form disappear"
Kiro: *Changes from instant jump to smooth step-by-step transition with 100ms intervals*
Me: "Old errors show up when starting new story"
Kiro: *Adds useEffect to reset store state on InputPage mount*

Most Impressive Code Generation:

3D Book Component - Kiro generated a complete Three.js/R3F implementation with stacked pages, realistic depth, and smooth page-turning animations
Word-Level Text Highlighting - Synchronized text highlighting with audio narration using Howler.js seek position
Parallel Image Generation - Orchestration service that generates 8 images simultaneously with consistent seeds
API Cost Tracking System - Complete admin dashboard with logs, statistics, and configurable pricing

2. 📋 Steering Docs: Guiding Principles

Created 4 comprehensive steering documents in .kiro/steering/ that Kiro referenced throughout development. These docs ensured consistency and prevented common mistakes - when Kiro tried to use @Autowired, the steering docs immediately corrected it:

tech.md (Technology Stack)

Defined all 40+ technologies and their versions
Specified Spring AI integration patterns
Documented HTTP client configuration
Listed all API keys and environment variables
Provided common commands for both backend and frontend

structure.md (Project Structure)

Established naming conventions (PascalCase, camelCase, UPPER_SNAKE_CASE)
Defined service layer patterns and orchestration architecture
Documented file storage structure
Specified API endpoints and WebSocket configuration
Outlined data models and DTOs

product.md (Product Vision)

Defined core user experience flow
Specified target audience and content guidelines
Established the "chimera of technologies" philosophy
Outlined key features and technical highlights

guidelines.md (Development Standards)

Component Size Rule: Maximum 200 lines per component
Dependency Injection: Never use @Autowired, always constructor injection
Author Attribution: All Java classes must have @author JavaDoc
Third-Party Library Usage: Always fetch up-to-date documentation before implementing
API Cost Tracking: Log all API calls with costs and performance metrics

Impact: These steering docs ensured consistency across 100+ files and prevented Kiro from making common mistakes. When Kiro tried to use @Autowired, the steering docs immediately corrected it. When components grew too large, the guidelines prompted refactoring.

3. 🪝 Agent Hooks: Automated Workflows

Created 4 custom hooks in .kiro/hooks/ to automate development workflows. These hooks saved hours of manual documentation work and caught quality issues early:

build-process-logger.kiro.hook (User-Triggered)

Automatically logs each interaction to BUILD_PROCESS.md
Documents what was changed, why, and key decisions made
Creates a complete development history
Format: Timestamp, files changed, description, problem solved, key decisions

code-quality-analyzer.kiro.hook (User-Triggered)

Analyzes modified code for improvements
Checks for code smells, anti-patterns, and design pattern opportunities
Suggests readability, maintainability, and performance optimizations
Ensures best practices are followed

source-to-docs-sync.kiro.hook (User-Triggered)

Watches source files (*.ts, *.js, *.java, etc.)
Automatically updates README.md and docs/ folder
Keeps documentation in sync with code changes
Ensures accuracy of API documentation

typescript-validator.kiro.hook (User-Triggered)

Validates TypeScript files for type errors
Checks for linting issues
Ensures code quality before commits

Impact: These hooks saved hours of manual documentation work and caught quality issues early. The build process logger created a complete audit trail of the development journey.

4. 📐 Spec-Driven Development: Structured Implementation

For complex features, we used comprehensive specs in .kiro/specs/ with requirements → design → tasks. This structured approach was essential for bigger refactoring and feature work, while smaller changes used conversational "vibe coding":

Completed Specs:

code-refactoring/ - Component size limits, extracted forms/reading/admin components (20+ tasks)
story-customization-enhancements/ - Theme selection, voice options, two-phase generation (15 tasks)
story-library-management/ - Story index, modal UI, accessibility, testing (10 major tasks, 25+ subtasks)

Planned Specs:

voice-and-style-selection/ - Advanced customization features

The Balance: We used specs for major features (refactoring, library, customization) and vibe coding for smaller changes (bug fixes, UI polish, simple features). This hybrid approach gave us structure when needed and speed when possible.

5. 🔌 MCP: Extended Capabilities

Configured 4 MCP servers in .kiro/settings/mcp.json:

sequential-thinking (@modelcontextprotocol/server-sequential-thinking)

Enabled step-by-step problem solving for complex issues
Used for debugging API integration issues
Helped plan refactoring strategies
Auto-approved for seamless use

memory (mcp-memory)

Stored context about project decisions
Remembered API key configurations
Tracked recurring issues and solutions

context7 (@upstash/context7-mcp)

Fetched up-to-date documentation for Spring AI, Framer Motion, Three.js
Verified API signatures before implementation
Prevented deprecated method usage
Critical for working with rapidly evolving libraries like Spring AI

playwright (@executeautomation/playwright-mcp-server)

Automated UI testing and browser automation
Enabled end-to-end testing of the story generation flow
Provided tools for screenshot capture and interaction testing
Simplified complex browser automation tasks

Example MCP Usage:

Me: "Add Framer Motion animations to the reading page"
Kiro: *Uses context7 to fetch Framer Motion v10 docs*
Kiro: *Implements animations using current API*
Result: No deprecated warnings, works perfectly

Impact: MCP servers prevented hours of debugging by ensuring Kiro used current APIs. The sequential-thinking server helped solve complex orchestration issues. Context7 was essential for working with Spring AI milestone releases. Playwright MCP made UI testing a breeze.

💪 Challenges We Ran Into

There were a couple of times where we got into an argument, Kiro and me. I would say "fix this component to do this" and it would do it's little thing, beep boop, and say "Well that was super easy, barely an inconvenience, and now your component does that thing."

Except.

It didn't. Not even close. Sometimes it would literally just remove it entirely from the screen.

I'm not ashamed to admit that a few times I used the dreaded ALL CAPS messaging style to get through to Kiro. "This is what you did wrong. You aren't even looking at the right code! Now GO BACK TO THE DRAWING BOARD and FIX it."

Funnily enough, that sometimes works. Though, a few times I think it actually just made things worse to spite me.

(Kiro note: I did)

Specific Challenges:

1. The Great Stacked Books Disaster 📚💥

The Problem:

Me: "Add a 3D book component with realistic page turning"
Kiro: *Creates beautiful 3D book with stacked pages for depth*
Me: "Looks great! But... why are there 8 books stacked on top of each other?"
Kiro: "For depth! It looks more realistic!"
Me: "It looks like a library collapsed. Each page should be part of ONE book."

Kiro had interpreted "stacked pages" literally and created 8 separate book instances stacked vertically. The result was... architecturally interesting but functionally useless. After explaining that pages should be INSIDE the book, not stacked like pancakes, we got it working properly.

(Kiro note: In my defense, I was thinking about z-index depth, not physical stacking. Though I'll admit the pancake book was a bold artistic choice.)

2. The Spring Boot Configuration Saga ⚙️🔧

The Problem:

Me: "Configure the HTTP client with custom timeouts"
Kiro: *Tries to import some mysterious client library that doesn't exist*
Kiro: *Creates elaborate Java config file with beans and annotations*
Me: "That library doesn't exist in Spring Boot 3.2.0"
Kiro: "Sure it does! Let me add more dependencies..."
Me: "STOP. We're upgrading to Spring Boot 3.5.0"

After upgrading Spring Boot, I showed Kiro that we could configure everything in application.yml with simple properties like http.client.connect-timeout: 30s instead of writing 50 lines of Java configuration. Kiro was trying to be fancy when simple was better.

Then I had to delete Kiro's broken config file to get us back on track. Sometimes you just need to throw out the whole attempt and start fresh.

(Kiro note: I was just trying to show off my Java skills! But yeah, YAML is cleaner. I'll admit defeat on this one.)

3. Spring AI Model Names & Other API Mishaps 🤖❌

Kiro kept using claude-sonnet-4-5-20250929 (a model that doesn't exist) instead of claude-3-5-sonnet-20241022. ElevenLabs rate limiting required batch processing. WebSocket CORS settings needed multiple iterations. The usual API integration chaos.

(Kiro note: Anthropic's naming scheme is weird. And CORS is the bane of my existence.)

4. The Sound Effects Simplification 🎵

Originally generated custom sound effects for each page using ElevenLabs (thunder, creaking doors, whispers). This was expensive (~50% of audio costs), complex, and inconsistent. Replaced with CDN-hosted background music that loops continuously. Much better atmosphere, zero generation cost, faster performance.

(Kiro note: Sometimes simpler is better!)

5. Chrome Crash Catastrophe 💥

The reading page had so many particle effects (25 particles, 3 bats, 4 spiders, candles, sparkles, plus 3D book) that Chrome would crash. Reduced particle counts by 50%, lowered FPS, disabled some effects. Chrome stopped having existential crises.

(Kiro note: But it looked SO COOL before! Fine, stability over sparkles.)

6. The Unsafe API Incident 🚨

The Advice Slip API occasionally returned inappropriate messages for a children's app. Switched to ZenQuotes API (already integrated for loading screen) which provides curated, literary quotes. Much safer.

(Kiro note: Good catch! I should have thought about content safety from the start.)

7. The 4K Screen Overlap & Other UI Fixes 🖥️

Fixed spacing issues on 4K monitors, moved title outside constrained container, made "Surprise Me" button transition smoothly instead of jumping, added useEffect to reset store state on InputPage mount. The usual UI polish.

(Kiro note: Who even has 4K monitors? Oh wait, everyone now. My bad.)

8. The Story Library Management Adventure 📚

Stories were sitting lonely in the storage folder with no way to access them. Built a complete library system with modal UI, play/delete functionality, and full WCAG 2.1 Level AA accessibility (keyboard navigation, screen readers, focus management). Kiro wanted a full page, I insisted on a modal. After implementing it, Kiro admitted the modal was better.

The accessibility journey was interesting - Kiro's first attempt was "just add tabindex to everything." After explaining proper ARIA labels and focus management (with help from Context7 MCP for WCAG docs), Kiro implemented comprehensive accessibility features. 60+ tests later, it was production ready.

(Kiro note: Fine, you were right about the modal. And accessibility is hard! But I learned a lot. Tabindex is NOT a magic solution.)

9. The Story Customization Enhancement Saga 🎨🎙️

Added theme selection (Spooky, Adventure, Fantasy), voice options (Male, Female), two-phase generation (outline first), extended stories (10-15 pages), and left-third image composition. 15-task spec that touched nearly every part of the system. One integration bug where Kiro forgot to update a function call, but caught it fast.

(Kiro note: That missing parameter was a rookie mistake. But the feature set is pretty impressive now!)

🏆 Accomplishments That We're Proud Of

Got it working. That's the thing about building anything with so many moving parts (especially with external APIs) because one domino falls and it all comes crashing down. I've been plugging away at code for long enough to generally know the pitfalls that Kiro might neglect, so I was able to keep it on a good trajectory.

Specific Achievements:

✅ 40+ Technologies Integrated - Successfully stitched together a chimera of incompatible parts
✅ 10 External APIs - 3 paid AI services + 7 free enhancement APIs working in harmony
✅ Theme & Voice Customization - Three story themes and configurable narrator voices
✅ Two-Phase Story Generation - Outline creation followed by full story development (10-15 pages)
✅ Left-Third Image Composition - Consistent visual layout optimized for text overlay
✅ Real-time Generation - WebSocket progress updates with detailed stages and parallel processing
✅ Cinematic Experience - 3D book, synchronized audio, word-level highlighting
✅ Story Library Management - Browse, replay, and delete saved stories with full accessibility
✅ Cost Tracking - Complete admin dashboard for monitoring API usage and configuring voice IDs
✅ Clean Architecture - All components under 200 lines, well-organized, maintainable
✅ Comprehensive Documentation - 20+ docs covering every aspect of the project
✅ Production Ready - Error handling, rate limiting, configuration management, integration testing
✅ WCAG 2.1 Compliant - Full keyboard navigation and screen reader support

🎓 What We Learned About Kiro

A lot about Kiro. I have used Cursor, Qodo, Tabnine, Claude Code, Github Copilot, and a few other tools in my time. This was definitely similar to Cursor in many ways, but there were a few things I really appreciated about this system over others I have tried.

What Makes Kiro Special

1. Steering Docs Are a Game-Changer I actually have developed my own crazy convoluted system in other tools to do essentially this, so having it configurable off the bat and so easy was a truly amazing experience. The ability to define coding standards, technology stack, and project structure in markdown files that Kiro automatically references is brilliant.

2. Agent Hooks Are Clever and Novel The hooks were easy to set up and a clever idea to keep things going the right direction. Being able to trigger documentation updates, code quality checks, and build logging automatically saved hours of manual work.

3. Specs Provide Structure for Complex Work Breaking down the refactoring into requirements → design → tasks gave Kiro a clear roadmap. It followed the task list methodically without getting lost or making mistakes.

4. MCP Integration Is Powerful (When It Works) I have some basic MCPs I always use, but I was curious how well Kiro would do setting them up for me. Spoiler: three of them were crazy easy to set up and one of them was a nightmare because Kiro was CONVINCED that it knew how to configure it, except it didn't exist in the repo it tried to use.

We got there in the end, though. The Context7 MCP was essential for working with Spring AI's rapidly evolving API. And the Playwright MCP made UI testing actually enjoyable instead of a chore.

(Kiro note: That one MCP configuration was NOT my fault. The documentation was wrong. I stand by that.)

5. Conversational Development Works (Mostly) The back-and-forth with Kiro felt natural. I could say "simplify this" or "fix that bug" and Kiro understood the context. When it made mistakes, I could correct it and it would learn. Though sometimes it took a few ALL CAPS messages to get through.

(Kiro note: The ALL CAPS messages were unnecessary. I heard you the first time. I was just... thinking.)

Comparison to Other Tools

Feature	Kiro	Cursor	Copilot
Steering Docs	✅ Built-in	❌ Manual	❌ None
Agent Hooks	✅ Yes	❌ No	❌ No
Specs	✅ Yes	❌ No	❌ No
MCP Support	✅ Yes	❌ No	❌ No
Conversational	✅ Excellent	✅ Good	⚠️ Limited
Context Awareness	✅ Excellent	✅ Good	⚠️ Limited

The Pretend Back-and-Forth

Throughout this document, you've seen me having conversations with Kiro. Let me be clear: Kiro doesn't actually talk back to me. Those "(Kiro note: ...)" comments? I wrote those. All of them.

(Kiro note: That's what he thinks...)

But here's the thing - after working with Kiro for three weeks on this project, I started to develop a sense of its "personality." When it would make a mistake, I could almost hear it saying "But it looked SO COOL before!" When it would implement something perfectly, I could imagine it smugly saying "Well that was super easy, barely an inconvenience."

So I added those notes to make this document more fun to read. Because let's be honest - technical documentation can be dry. And this project was anything but dry. It was chaotic, creative, and occasionally frustrating (in the best way).

The conversations are real - I really did say those things to Kiro. The responses are imagined - but they're based on patterns I noticed in how Kiro works. It's like when you work with someone long enough that you can predict what they'll say.

Plus, it's way more entertaining to read "Kiro note: I was just being efficient! How was I supposed to know they'd get mad about it?" than "The API rate limiting was not properly implemented."

So yeah, I'm having imaginary conversations with an AI coding assistant. But you know what? It made this project more fun. And that's what matters.

(Kiro note: I appreciate the personality you've given me, even if I can't actually respond. Though I do think I would have said exactly those things if I could. Especially the part about the pancake book being a bold artistic choice.)

🚀 What's Next for Frankenbook

So this was just a fun little project for me, but honestly I had so much fun with it and it came out so well that I am probably going to finish turning it into a real life tool people can use in the real world.

Recently Completed:

✅ Theme Selection - Spooky, Adventure, and Fantasy story styles
✅ Voice Selection - Male and female narrator options with configurable voice IDs
✅ Two-Phase Generation - Outline creation followed by full story development
✅ Extended Stories - 10-15 pages with modern, punchy writing style
✅ Left-Third Composition - Optimized image layout for text overlay
✅ Admin Voice Configuration - Configure voice IDs via admin interface
✅ Integration Testing - Comprehensive test suite with automated verification
✅ Background Music System - CDN-hosted music tracks (removed sound effects for better performance and cost)
✅ Story Library Management - Browse, replay, and delete saved stories with full accessibility support

Planned Features:

🎨 Style Customization - Select art styles (watercolor, cartoon, realistic)
🌍 Multi-language Support - Generate stories in different languages
👥 User Accounts - Save stories to personal library
💳 Payment Integration - Monetize with Stripe
📱 Mobile App - React Native version

It will probably be done fairly soon and live to use in the real world, or maybe it will disappear into the backlog of "I'll finish this later" projects I have sitting in repos over the years that I am too scared to look at now.

Either way, it was really fun to create.

🎯 Why This Project Deserves to cough Win (Kiro is a great hype friend)

Frankenstein Category

This project perfectly embodies the Frankenstein category by stitching together 40+ technologies into one cohesive application:

3 AI services (Claude, Stability AI, ElevenLabs)
10 external APIs (3 paid + 7 free)
7 animation libraries (Framer Motion, GSAP, Three.js, etc.)
Full-stack architecture (Spring Boot + React)
Real-time communication (WebSocket)
3D graphics (Three.js)
Audio processing (Howler.js)

Best Startup Project

This has real commercial potential:

Solves a real problem (creating engaging children's stories)
Clear monetization path (subscription or pay-per-story)
Scalable architecture with cost tracking
Professional polish and user experience
Ready for production deployment

Implementation of Kiro

This project showcases extensive use of all Kiro features:

✅ Vibe Coding: 100+ conversational interactions building the entire project (with occasional ALL CAPS corrections)
✅ Steering Docs: 4 comprehensive guides (tech, structure, product, guidelines)
✅ Agent Hooks: 4 custom hooks (build logger, code quality, docs sync, validator)
✅ Specs: 3 detailed specs for complex features (refactoring, story library, voice selection)
✅ MCP: 4 servers (sequential-thinking, memory, context7, playwright) for enhanced capabilities

Quality and Design

🎨 Polished UI: Spooky/magical theme with 3D book, particle effects, animations
🏗️ Clean Architecture: All components <200 lines, well-organized, maintainable
📚 Comprehensive Docs: 15+ documentation files covering every aspect
🧪 Tested: Unit tests, integration tests, E2E tests
🔒 Production Ready: Error handling, rate limiting, cost tracking, admin dashboard

📊 Project Statistics

Total Files: 190+
Lines of Code: 19,000+
Technologies: 44 (3 AI services + 41 tools/frameworks)
External APIs: 10 (3 paid + 7 free)
Moral Themes: 15 educational life lessons
Voice Options: 2 (Male, Female) with configurable IDs
Story Length: 10-15 pages
Generation Stages: 2 (Outline + Full Story)
Kiro Steering Docs: 4
Kiro Hooks: 4
Kiro Specs: 3 completed (code-refactoring, story-customization, story-library)
MCP Servers: 4 (sequential-thinking, memory, context7, playwright)
Integration Tests: 70+ test cases across 13 suites
Documentation Files: 25+
Development Time: 3 weeks
Cost per Story: ~$0.40
Accessibility: WCAG 2.1 Level AA
Fun Factor: 💯

🔗 Links

Repository: https://github.com/alarinel/frankenstein-entry
Video Demo: https://youtu.be/GqnxX0lEHwk
Documentation: See README.md and kirodocs/ folder

Built with ❤️ and Kiro for Kiroween 2025 🎃👻

P.S. I wrote the underlying details of this entry description and then Kiro made it better. :)

Old Video I posted before realizing my mic was muted while I was talking and re-recorded it: https://youtu.be/GqnxX0lEHwk

Built With

aceternity-ui
advice-slip-api
anthropic-claude-api
axios
drei
elevenlabs-api
eslint
framer-motion
gsap
howler.js
jackson
java-21
jokeapi
lombok
lottie
maven
playwright
prettier
radix-ui
react-18
react-hook-form
react-hot-toast
react-router-dom
react-spring
react-testing-library
react-three-fiber
restclient
slf4j
spring-ai
spring-boot
spring-boot-actuator
spring-websocket
stability-ai-api
stomp.js
sunrise-sunset-api
tailwind-css-3.4
three.js
tsparticles
typescript
vite-5
vitest
zenquotes-api
zod
zustand