Forem

DevForge Templates
DevForge Templates

Posted on

I Built 12 Production React Templates with AI - Here Is What I Learned

#react #typescript #docker #ai

Over the past 3 months, I built 12 production-ready fullstack templates — each with AI features, Docker deployment, and a real database. Not boilerplates with TODO comments. Actual apps with auth, payments, dashboards, and seed data.

Here's what I learned, what worked, and what surprised me.

The Stack (One Stack, Every Template)

Every template runs the same stack:

  • React 19 + Vite 7 + Mantine 8 (frontend)
  • Fastify 5 + Prisma 7 + PostgreSQL (backend)
  • Zustand + TanStack Query (state management)
  • Zod (shared validation — one schema, zero type drift)
  • Docker + Traefik (deployment with auto-SSL)

Why the same stack everywhere? Because consistency compounds. Every template shares the same patterns, the same folder structure, the same auth flow. If you learn one, you can navigate all twelve.

The 12 Templates

  1. Full-Stack Starter Kit — Auth, dashboard, AI chat, Stripe. The base everything else builds on.
  2. AgentForge — AI agent management dashboard. Agent registry, task queue, execution logs, CRON scheduling.
  3. CRM — Contact management, pipeline stages, activity tracking.
  4. E-Commerce Dashboard — Product management, orders, inventory, analytics.
  5. SaaS MVP — Multi-tenant, subscription billing, usage tracking.
  6. Booking System — Calendar, appointments, availability management.
  7. HR Platform — Employee directory, leave management, onboarding.
  8. Client Portal — Project tracking, file sharing, invoicing.
  9. Healthcare Dashboard — Patient records, appointments, clinical data.
  10. Restaurant Management — Menu, orders, table management, kitchen display.
  11. Real Estate — Property listings, virtual tours, lead management.
  12. AI Document Processor — Upload, extract, summarize documents with AI.

What Every Template Includes

  • JWT auth with refresh token rotation + Google OAuth
  • AI chat widget (Claude/OpenAI API, mock mode included)
  • Role-based access (admin, user, custom roles)
  • Docker deployment — one docker compose up for production
  • Seed data — realistic test data, not empty tables
  • Mock mode — everything works without API keys

That last point matters more than you'd think. If someone clones your template and has to configure 4 API keys before seeing anything work, most will give up. Mock mode means: clone, install, run. It just works.

Building with AI: What Actually Helped

I used Claude Code for about 70% of the development. Here's what worked:

Great for:

  • Generating CRUD routes that follow established patterns
  • Writing Prisma schemas and seed data
  • Creating React components that match existing UI patterns
  • Test scaffolding
  • Docker configuration

Not great for:

  • Novel architectural decisions (still needs human thinking)
  • Complex business logic with edge cases
  • UI design choices (it follows patterns, doesn't create them)

The key was CLAUDE.md — a file that defines project conventions, stack choices, and patterns. With good context, Claude generates code that fits. Without it, you get generic code that needs heavy editing.

Deployment: Docker + Traefik

Every template deploys the same way:

docker compose -f docker-compose.prod.yml up -d
Enter fullscreen mode Exit fullscreen mode

Traefik handles SSL certificates automatically via Let's Encrypt. No nginx config files, no certbot cron jobs. Add a new template? Add Traefik labels. Done.

Currently running 12 live demos on a single VPS, each with its own subdomain and auto-renewing SSL.

The Numbers

  • 12 templates, all passing pnpm build
  • ~50,000 lines of TypeScript across all templates
  • 12 live demos running on Docker
  • Same VPS, same Traefik instance
  • Average template: 3,000-5,000 lines of code
  • Time to deploy a new template: under 30 minutes

What Surprised Me

  1. Mock mode was the highest-impact feature. It took an extra day per template but made the difference between "interesting" and "I can actually use this."

  2. Seed data sells templates. An empty dashboard looks like a skeleton. A dashboard with realistic data looks like a product. Every template ships with 50-200 seed records.

  3. One stack > variety. I initially considered mixing Next.js, Remix, and Vite across templates. Staying with one stack made everything faster and more maintainable.

  4. AI features are table stakes now. In 2024, "has AI chatbot" was a differentiator. In 2026, templates without AI features feel incomplete.

  5. Docker deployment is a selling point. Many developers are tired of Vercel lock-in for dashboards that don't need edge functions. "Self-hosted with Docker" resonates.

What's Next

All templates are live on Gumroad with a 30% launch discount (code: LAUNCH30). Each comes with full TypeScript source, Docker config, seed data, and MIT license.

Live demos and details: devforgetemplates.gumroad.com

I'm also offering custom builds — if you need a template adapted for your specific use case, that's my fastest turnaround since the foundation is already built.

Full disclosure: I built these templates and sell them. This article is my launch announcement, but I tried to make the technical content genuinely useful regardless. Happy to answer questions about the stack, architecture, or deployment setup in the comments.

Top comments (0)