From Skeptic to Believer: 4 Days to a Full SaaS Product

A few days ago I wrote about starting my first "vibe coding" experiment. I was skeptical. Like really skeptical.

My exact words: "LLMs are good at simple tasks and not good with what constitutes complexity."

I was wrong.

What I Thought I Was Building

The plan was simple. A markdown-to-PDF converter. No paywalls, no sign-ups, just a tool that works.

Friday night, 7 PM, holiday season. I figured I'd mess around with AI-assisted development and see what happens.

The initial scope:

• Turbo repo monorepo
• Next.js with TailwindCSS
• Basic editor with live preview
• PDF export
• Maybe some simple auth

That was it. A weekend project.

What I Actually Built

Four days later (part-time), I have a full SaaS application.

Not a prototype. Not a demo. A production-ready product with:

Core Features:

• Dual editor support (CodeMirror + Lexical rich text)
• Real-time live preview
• Client-side PDF generation
• GitHub Flavored Markdown support

Full Authentication System:

• Better Auth integration
• Email/password + OAuth (Google, GitHub)
• Email verification with OTP
• Password reset
• Session management
• Protected routes

Complete Document Management:

• Full CRUD operations
• Auto-save
• Search and filter
• PostgreSQL persistence

Subscription System:

• Polar payment integration
• Free and paid tiers
• Usage limits and tracking
• Customer portal
• Webhook handling
• Device fingerprinting for anti-abuse

Admin Dashboard:

• User management with growth charts
• Document analytics
• Subscription management
• Product/plan configuration
• Related accounts tracking

Landing Page:

• Hero with animations
• Features showcase
• Pricing section
• FAQ
• Full responsive design

The Secret: Structure Over Prompts

Here's what changed my mind about AI-assisted development.

It's not about better prompts. It's about giving the AI a framework to work within.

I built three things that made everything work:

1. Feature-Based Architecture

Instead of organizing code by technical layers (components, hooks, utils), I organized by domain:

features/
├── admin/
├── auth/
├── document/
├── editor/
├── landing/
├── pdf-export/
├── preview/
├── subscription/
└── support/

Each feature has its own components, hooks, server logic, types. Everything related to "auth" lives in the auth folder.

This sounds simple but it changed everything. The AI could understand scope. When working on auth, it knew exactly where to look and what patterns to follow.

2. Cursor Rules System

I created 13 rules that the AI consults before implementing anything.

Core rules that always apply:

• Architecture principles
• Code documentation standards
• Next.js best practices
• Project consistency

Conditional rules that activate based on context:

• Better Auth patterns (when touching auth code)
• Drizzle ORM patterns (when touching database code)
• tRPC patterns (when touching API code)
• Polar integration (when touching payments)

Each rule is a markdown file with metadata about when to apply it. The AI reads the relevant rules before writing any code.

Example rule structure:

---
description: Master consistency rule
globs:
  - "**/*.ts"
  - "**/*.tsx"
alwaysApply: true
---

# Rule Content
...

3. AGENTS.md

This is the central instruction file for AI agents. A living document that provides:

• Project overview and tech stack
• Architecture guidelines
• Code style conventions
• Framework-specific rules
• Git workflow
• Testing instructions

The key section is the "Primary Rule": Always follow @project-consistency before implementing any task.

Every implementation ends with a checklist:

1. Run bun typecheck
2. Analyze and fix errors
3. Verify architecture compliance
4. Check documentation standards

The Tech Stack

Frontend:

• Next.js 16 with App Router
• React 19
• TypeScript (strict mode)
• TailwindCSS 4.x
• shadcn/ui components
• Zustand for state
• GSAP and Motion.dev for animations

Backend:

• tRPC for type-safe APIs
• Drizzle ORM
• PostgreSQL
• Better Auth
• Polar for payments
• Resend for email

Development:

• Bun as package manager
• Vitest for testing
• ESLint + Prettier
• Husky + Commitlint

What Made It Work

Type Safety End-to-End

tRPC gives you type safety from database to frontend. Change a return type on the server, TypeScript immediately tells you every place in the UI that needs to update.

The AI could catch its own mistakes before they became bugs.

Consistent Patterns

When every feature follows the same structure, the AI learns the pattern. By the third feature, it was generating code that matched perfectly.

Incremental Development

I didn't try to build everything at once. Each feature was a focused session:

1. Define the structure
2. Let AI implement
3. Verify with typecheck
4. Move to next feature

The Rules Compound

Every rule I added made future development faster. The AI stopped making the same mistakes. Code quality went up. Review time went down.

Real Talk: What Didn't Work

The first attempt was rough.

• Import paths were wrong
• Monorepo structure was off
• Packages were in the wrong place

I almost gave up that first night.

The difference came when I stopped treating the AI like magic and started treating it like a junior developer who needs clear documentation.

Give it a style guide. Give it architecture rules. Give it examples to follow.

Then it works.

Timeline

Day 1: Foundation

• Next.js setup
• Feature architecture
• Basic editor and preview
• tRPC and database

Day 2: Core Features

• PDF export
• Document persistence
• Started auth system

Day 3: Extended Features

• Full Better Auth integration
• Polar subscriptions
• Admin dashboard started

Day 4: Polish

• Auto-save
• Device fingerprinting
• Landing page with animations
• Admin analytics
• Responsive design

What I Learned

The AI isn't the limiting factor. The structure is.

Give it clear architecture, consistent patterns, and good documentation. It will build things that would take weeks in days.

Type safety is essential.

TypeScript strict mode + tRPC meant the AI could verify its own work. Errors were caught before I even saw the output.

Rules scale.

13 cursor rules might sound like overkill. But each rule represents a class of bugs that will never happen again.

Ship fast, iterate later.

The landing page wasn't perfect on day 4. The admin dashboard needed polish. But the product worked. Users could sign up, create documents, export PDFs, and subscribe.

Everything else is iteration.

What's Next

The product is live. Now it's about:

• Getting feedback
• Watching how people use it
• Iterating on what matters

I went from "LLMs are bad with complexity" to "I just built a SaaS in 4 days."

The tools are ready. The question is whether we're ready to use them correctly.

If you're building something and want to see how the rules system works, DM me. Happy to share the setup.

And if you're skeptical about AI-assisted development like I was... try adding structure first. The results might surprise you.

Ref: Vibe Coding an idea into a product