TL;DR
I built Dashtact — a production-ready, full-stack dashboard skeleton with 30+ features, 2 complete applications, and 118 Kiro files — in just 4 weeks. What would normally take 3-4 months of solo development was compressed into a hackathon timeline thanks to Kiro AI.
This isn't a tutorial. This is a story of how AI-assisted development changed everything I thought I knew about building software.
The Problem Every Developer Faces
Let me paint a picture you probably recognize:
Monday morning. New project. Client wants a dashboard with authentication, user management, role-based access, notifications, and "maybe some e-commerce later."
You open your IDE. You stare at an empty folder.
And then you spend the next 3 weeks building:
- JWT authentication (again)
- Password reset flow (again)
- Role-based permissions (again)
- User CRUD operations (again)
- Real-time notifications (again)
By the time you get to the actual business logic — the thing that makes this project unique — you're already behind schedule, over budget, and questioning your career choices.
I've done this dance dozens of times. Every startup, every agency project, every freelance gig. The same foundation. The same bugs. The same wasted weeks.
So I asked myself: What if I could build ONE skeleton that could transform into ANY application?
Enter Kiroween: The Perfect Challenge
When I discovered the Kiroween Hackathon and its Skeleton Crew category, I knew this was my chance. The rules were clear:
Build a skeleton/template that can be used to create multiple distinct applications. Demonstrate versatility by building at least 2 different apps from the same foundation.
Perfect. But here's the catch: I had 4 weeks to build something that would normally take months.
That's when Kiro AI became more than just a tool. It became my co-pilot.
What is Dashtact?
Dashtact is a production-ready, full-stack dashboard skeleton built with:
| Layer | Technology |
|---|---|
| Frontend | Next.js 14 (App Router) + TypeScript + Tailwind CSS |
| Backend | NestJS + Prisma + PostgreSQL |
| Real-time | WebSocket (Socket.io) |
| UI | shadcn/ui + Radix UI + Lucide Icons |
| Auth | JWT + bcrypt + 2FA |
But technology is just the foundation. Here's what makes Dashtact special:
30+ Production Features
Not demo features. Not "coming soon" features. Real, working, production-ready features:
🔐 Security & Auth
- JWT authentication with access/refresh tokens
- Two-factor authentication (2FA) via email
- Password reset with secure tokens
- Role-based access control (RBAC)
- Permission system (
resource:actionformat) - Account lockout protection
- Audit logging for all auth events
👥 User Management
- Complete CRUD operations
- Role assignment and management
- Profile management with avatars
- Activity tracking
- User search and filtering
📊 Dashboard System
- Customizable widget system
- Drag-and-drop layout
- 20+ pre-built widgets
- Real-time data updates
- Role-based dashboards
💬 Communication
- Real-time messaging (WebSocket)
- Group conversations
- Read receipts
- In-app notifications
- Email notifications
- Notification preferences
📅 Calendar & Events
- Event scheduling
- Recurring events
- Attendee management
- Multiple calendar views
- Reminders
📝 Content Management
- Blog system with rich text editor
- Landing page builder
- Custom pages
- SEO optimization
- Media library
🛍️ E-commerce
- Product management
- Inventory tracking
- Shopping cart
- Checkout system
- Order management
- Customer accounts
⚙️ System Features
- Feature flags (enable/disable modules)
- Global search (Cmd/Ctrl + K)
- Dark/Light/System themes
- OKLCH color system
- Cron job management
- Activity logs
The Two Applications: Proof of Versatility
Building a skeleton is easy. Proving it works is hard.
So I built two completely different applications from the same codebase:
🎃 Application 1: Spooky Store (E-commerce)
A complete online store with:
- Modern storefront with product catalog
- Shopping cart and checkout flow
- Customer accounts with order tracking
- Wishlist functionality
- Product variants (size, color)
- Category and price filtering
- Admin dashboard for store management
Live Demo: store.dashtact.com
🎯 Application 2: CoachDashtact (Coaching Platform)
A comprehensive coaching management system with:
- Coach-member relationship management
- Real-time booking with availability slots
- Session scheduling and lifecycle management
- Integrated messaging
- Progress tracking
- Rating and feedback system
- Member onboarding flow
Live Demo: coach.dashtact.com
Same skeleton. Same codebase. Completely different applications.
The magic? Feature flags.
# Spooky Store configuration
ENABLE_ECOMMERCE=true
ENABLE_CALENDAR=false
ENABLE_CRM=false
# CoachDashtact configuration
ENABLE_ECOMMERCE=false
ENABLE_CALENDAR=true
ENABLE_CRM=true
No code removal. No structural changes. Just toggle the features you need.
How Kiro AI Changed Everything
Now let's talk about the real game-changer: Kiro AI.
I've used GitHub Copilot. I've used ChatGPT. I've used Claude. They're all useful for generating snippets and answering questions.
Kiro is different.
Kiro doesn't just generate code. It understands your entire project. It knows your architecture, your patterns, your conventions. It becomes a true development partner.
Here's exactly how I used Kiro to build Dashtact:
1. Spec-Driven Development (30 Specs)
Instead of vibe-coding everything, I used Kiro's spec system to structure complex features.
How it works:
- I describe what I need in natural language
- Kiro generates a complete spec with requirements, design, and tasks
- I iterate on each task with Kiro's assistance
- The feature gets built incrementally with clear documentation
Example: Building the Messaging System
I told Kiro:
"I need a real-time messaging system with conversations, participants, read receipts, and WebSocket support."
Kiro generated:
.kiro/specs/messaging-system/
├── requirements.md # What the feature must do
├── design.md # How it will be architected
└── tasks.md # Step-by-step implementation plan
Then, task by task, Kiro helped me implement:
- Database schema with Prisma
- NestJS module with WebSocket gateway
- React components with real-time updates
- API endpoints with authentication
- TypeScript types synchronized across the stack
Result: A complete messaging system in hours, not days.
My 30 specs covered:
- Authentication system
- Dashboard customization
- E-commerce system
- Notification system
- Calendar planning
- Blog system
- Landing page CMS
- Media library
- And 22 more...
2. Agent Hooks (8 Automation Workflows)
This is where Kiro gets really powerful.
Agent hooks are automated workflows that trigger on specific events. They're like having a junior developer who handles all the boring stuff.
My most impactful hook: Prisma Sync Agent
# .kiro/hooks/prisma-sync-agent.kiro.hook
name: Prisma Database Sync Agent
trigger:
- file: backend/prisma/schema.prisma
action:
- Generate migrations
- Update Prisma client
- Sync TypeScript types to frontend
- Update API client methods
- Create comprehensive tests
- Verify type consistency
Before this hook: Every schema change meant 15-20 minutes of manual work — running migrations, regenerating types, updating frontend interfaces, checking for type mismatches.
After this hook: I change the schema, save the file, and everything syncs automatically. Zero type mismatches. Zero manual work.
My 8 hooks:
| Hook | Purpose |
|---|---|
prisma-sync-agent |
Auto-sync database changes across stack |
run-full-stack |
Start backend + frontend with one command |
frontend-deploy-agent |
Automated deployment pipeline |
pageheader-breadcrumb-auto |
Auto-generate page headers |
widget-registry-integration |
Widget system automation |
nextjs-page-header-agent |
Page header generation |
manual-bug-fix |
Assisted debugging workflow |
manual-deploy-dashtact |
Production deployment |
3. Steering Documents (19 Guidelines)
Here's a problem with AI code generation: inconsistency.
Ask an AI to generate a component twice, and you'll get two different coding styles. Different naming conventions. Different patterns.
Steering documents solve this.
They're markdown files that teach Kiro your project's rules. Once defined, Kiro follows them consistently across every interaction.
Example: Toast Notification System
Before steering, Kiro would sometimes generate:
// ❌ Wrong - shadcn/ui pattern
import { useToast } from '@/hooks/use-toast';
const { toast } = useToast();
toast({ title: "Success" });
After I created toast-notification-system.md:
// ✅ Correct - Our Sonner-based pattern
import { toast } from '@/hooks/use-toast';
toast.success('Success');
My 19 steering documents:
-
coding-standards.md— Code quality rules -
api-routing-system.md— API conventions -
database-sync.md— Prisma workflow -
nestjs-module-architecture.md— Backend patterns -
toast-notification-system.md— UI notifications -
fullstack-structure.md— Project organization -
mcp-tools-usage.md— MCP integration guide - And 12 more...
The result: As the project grew to 50,000+ lines of code, Kiro's responses remained consistent. It learned my patterns and followed them religiously.
4. MCP Integration (6 Servers)
Model Context Protocol (MCP) gives Kiro superpowers beyond code generation.
I configured 6 MCP servers:
🐘 Postgres MCP
{
"postgres": {
"command": "uvx",
"args": ["postgres-mcp", "--access-mode=unrestricted"]
}
}
Now I can ask Kiro:
- "What are the slowest queries in my database?"
- "Suggest indexes for the orders table"
- "Show me all users who signed up this week"
And Kiro queries my actual database to answer.
🐙 GitHub MCP
- Search repositories for examples
- Create issues and PRs
- Read/write files directly
🌐 Fetch MCP
- Get latest documentation
- Fetch API responses
- Web scraping for research
⏰ Time MCP
- Timezone conversions
- Scheduling calculations
- Date formatting
🎭 Playwright MCP
- Browser automation
- E2E testing
- Screenshots
⚡ Next.js Devtools MCP
- Runtime analysis
- Performance insights
MCP turned Kiro from a code generator into a full development partner with access to my database, repositories, and the web.
The Numbers Don't Lie
Let me break down what I actually built:
Kiro Files (Main Dashtact Only)
| Category | Count |
|---|---|
| Specs (requirements + design + tasks) | 90 files |
| Steering documents | 19 files |
| Agent hooks | 8 files |
| MCP configuration | 1 file |
| Total | 118 files |
Codebase Statistics
| Metric | Count |
|---|---|
| Database models | 50+ |
| API endpoints | 100+ |
| React components | 200+ |
| Lines of code | 50,000+ |
| Feature modules | 30+ |
Lessons Learned
1. Specs vs Vibe Coding: Know When to Use Each
Use specs for:
- Complex features with multiple components
- Features requiring architectural planning
- Long-term maintainability
- Team collaboration
Use vibe coding for:
- Quick UI iterations
- Bug fixes
- Experimental features
- Rapid prototyping
I used both strategically. Complex features got specs. Quick fixes got vibe coding.
2. Steering Documents Are Essential at Scale
Small projects don't need steering. But once you hit 10,000+ lines of code, consistency becomes critical.
Invest time upfront in defining your patterns. It pays dividends as the project grows.
3. Agent Hooks Eliminate Entire Categories of Bugs
The Prisma Sync Agent alone prevented dozens of type mismatches. Automation isn't just about speed — it's about reliability.
4. MCP Makes AI Actually Useful
Without MCP, AI is limited to what's in your prompt. With MCP, AI can access your database, your repositories, the web. It becomes genuinely helpful for real-world problems.
5. Testing Isn't Optional Anymore
Working with Kiro changed my perspective on testing. When creating specs, Kiro consistently included testing requirements. It made me realize that tests aren't just about catching bugs today — they're about preventing bugs tomorrow.
The Moment I Knew I Was #HookedOnKiro
There was one moment that defined everything.
I asked Kiro to generate a new data module: full CRUD, validation, DTOs, service logic, UI forms, and table listing.
It generated everything — perfectly — in a single pass.
No broken imports. No wrong folder paths. No missing logic.
Just clean, production-level code that followed all my steering documents and matched my existing patterns.
That was the moment I said: "Okay… I'm hooked."
Why This Matters for You
If you're a developer who:
- Rebuilds the same features for every project
- Spends weeks on infrastructure before building your product
- Struggles with consistency across large codebases
- Wants to ship faster without sacrificing quality
Kiro will change your workflow.
It's not about replacing developers. It's about amplifying what we can do.
With Kiro, I built in 4 weeks what would have taken 4 months. And the code quality is better than what I would have written alone, because Kiro enforced consistency I would have let slip.
Try It Yourself
Dashtact is open source. MIT licensed. Free to use, modify, and build upon.
🔗 GitHub: github.com/FouadABT/kiroween-dashtact
🔗 Live Demos:
- Main Dashboard: dashtact.com
- Spooky Store: store.dashtact.com
- CoachDashtact: coach.dashtact.com
Quick Start:
git clone https://github.com/FouadABT/kiroween-dashtact.git
cd kiroween-dashtact
node setup-cli.js
The interactive CLI will guide you through setup in minutes.
Final Thoughts
We're entering a new era of software development.
An era where:
- You focus on architecture and innovation
- Your AI handles the boilerplate
- Your code stays clean
- You ship fast
- You enjoy building again
Kiro made this possible for me. And I believe it will redefine the workflow for thousands of developers.
If you're working on a new idea, a hackathon project, or your next SaaS — give Kiro a try.
I did. And it changed everything.
Built with ❤️ and Kiro AI for Kiroween 2025 🎃
What's your experience with AI-assisted development? Have you tried Kiro? Drop a comment below — I'd love to hear your thoughts.
Connect With Me
If you found this helpful, consider:
- ⭐ Starring the GitHub repo
- 🔄 Sharing this post
- 💬 Leaving a comment
Thanks for reading! 🙏
Top comments (0)