UIGen

The problem I addressed

I wanted to go beyond generating a component by adding inspectable files, iteration, preview, persistence and a route back to normal source code.

What I built

• Prompt-driven React component generation
• A virtual file system with code editing
• Live component preview
• Registered-user persistence and generated-code export
• A mock-provider fallback when an AI key is unavailable

My role

I designed and developed this as a full-stack learning project.

Why this matters to me

I use UIGen to demonstrate full-stack application structure, AI integration and attention to the practical workflow around generated output.

Decisions I made

• Kept provider behavior behind a fallback so local evaluation is possible without a key
• Used a virtual file system instead of writing generated files directly to disk
• Combined generation, inspection, editing and export in one workflow

Challenges I handled

• Safely previewing generated code
• Synchronising editable virtual files
• Keeping local setup usable without a paid provider

System signals

• AI integration
• Live preview
• Virtual file system
• Persistence
• Mock fallback
• Export flow