Kiroween Avatar Maker

Inspiration

Halloween is all about creativity and self-expression, but creating custom avatars usually requires design skills. So I wanted to build a tool that lets anyone create their own spooky ghost character in seconds without design experience needed.

What it does

Kiroween Avatar Maker is a web-based ghost avatar creator that lets users:

Customize ghost characters with different eyes, hats, capes, accessories, and backgrounds
Mix and match dozens of options to create unique Halloween avatars
Generate random combinations for inspiration

The app features an intuitive interface with real-time preview, making it easy to experiment and find the perfect spooky look.

How we built it

I built this with a modern React stack

Next.js 14 with App Router
TypeScript with strict mode
Tailwind CSS
Zustand for state management

Challenges we ran into

Different SVG files came with varying viewBox dimensions. I built a transform calculation system that automatically normalizes any SVG to our standard 1024x1024 coordinate system while maintaining aspect ratio and centering.

Accomplishments that we're proud of

The component registry pattern and validation middleware ensure the app never breaks, even with invalid configurations. It gracefully falls back to defaults and provides helpful development warnings.

What we learned

Building this project with Kiro IDE showed how AI can accelerate development without sacrificing code quality. I could focus on design decisions while Kiro handled boilerplate, test generation, and refactoring.