Advanced Patterns and Workflows

You can build apps with vibe coding. Now let’s make you fast and reliable at it. These advanced patterns are what experienced vibe coders use to build complex projects without drowning in bugs.

🔄 Quick Recall: In the previous lesson, you learned to production-harden your app: real databases, authentication, error handling, and security. Now you’ll learn patterns that scale to larger, more complex projects.

Pattern 1: Rules Files for Consistency

As projects grow, you’d repeat the same instructions in every prompt: “use TypeScript,” “follow this pattern,” “put components in /components.” Rules files eliminate this repetition.

Cursor (.cursorrules in project root):

# Project: DevMarks Bookmark Manager
# Stack: Next.js 14, TypeScript, Tailwind CSS, Supabase

## Code Style
- Always use TypeScript (never JavaScript)
- Use functional components with hooks
- Name components in PascalCase, files in kebab-case
- Use Tailwind CSS for all styling (no CSS modules)

## Project Structure
- Components: /components/{feature-name}/{ComponentName}.tsx
- Pages: /app/{route}/page.tsx
- API: /app/api/{endpoint}/route.ts
- Types: /types/{domain}.ts

## Patterns
- Use React Server Components by default
- Use 'use client' only when needed (onClick, useState, etc.)
- Always handle loading and error states
- Use Zod for all form validation

Claude Code (.claude/rules in project root):

When working in this project:
- Use TypeScript for all files
- Follow the existing folder structure
- Run tests after making changes
- Commit after each working feature

Rules files are read by the AI before every interaction — like giving it a team’s coding standards document.

✅ Quick Check: You start a new feature conversation without a rules file. The AI generates JavaScript instead of your project’s TypeScript standard. With a rules file, would this happen? (Answer: No. The rules file specifies “Always use TypeScript” and is included automatically in every AI interaction. Without it, the AI defaults to whatever seems natural — which is often JavaScript. Rules files prevent these consistency issues.)

Pattern 2: Multi-File Architecture

Small apps live in one or two files. Larger apps need structure. Ask the AI to plan the architecture before building:

I'm building a project management tool. Before writing code, plan the
file architecture:

Features:
- User authentication
- Project CRUD (create, read, update, delete)
- Task management within projects
- Team member assignment

Please propose:
1. Folder structure
2. Key files and their responsibilities
3. How data flows between components
4. Which components are server vs client

Don't write code yet — just the plan.

Review the plan. Then build feature by feature, referencing the architecture.

Pattern 3: API Integration

Connecting to external APIs is a common vibe coding task:

Integrate the OpenWeatherMap API into my dashboard:

API key: stored in .env.local as WEATHER_API_KEY
Endpoint: https://api.openweathermap.org/data/2.5/weather

Requirements:
1. Create a server-side API route at /api/weather that proxies the request
   (never expose the API key to the client)
2. Create a WeatherWidget component that shows city, temperature, and condition
3. Fetch data on page load with a 5-minute cache
4. Handle errors: show "Weather unavailable" if the API is down
5. Loading state: show a skeleton while fetching

Key pattern: Always proxy third-party APIs through your own server route. This keeps API keys secret and lets you add caching, rate limiting, and error handling in one place.

Pattern 4: Testing Your Vibe-Coded App

Tests are especially valuable in vibe coding because you can’t manually review every line:

Add automated tests for my bookmark manager:

1. Unit tests (using Vitest):
   - Adding a bookmark updates the list
   - Filtering by tag shows correct results
   - Search matches title, URL, and tags

2. Integration tests:
   - Signup creates a new user
   - Login redirects to dashboard
   - Unauthenticated users can't access /dashboard

Put tests in a __tests__ folder next to the component they test.

After writing tests, run them after every AI-generated change. A failing test immediately tells you what broke.

✅ Quick Check: The AI adds a new “archive bookmark” feature and your test for “filtering by tag” suddenly fails. What does this tell you? (Answer: The archive feature modified the filtering logic — even though you didn’t ask for that. Tests caught an unintended side effect. Without the test, you might not have noticed the broken filtering until a user reported it.)

Pattern 5: Knowing When to Hand-Code

Vibe coding isn’t the answer to everything. Recognize when hand-coding is better:

The best vibe coders use both approaches fluidly — AI for the heavy lifting, hand-coding for precision.

From Vibe Coding to Agentic Engineering

Even Karpathy, who coined “vibe coding,” now says the approach is evolving. The next phase — “agentic engineering” — means AI agents do more of the work autonomously while you act as reviewer and decision-maker.

The skills you’ve learned in this course (clear communication, structured prompting, debugging, architecture planning) are exactly what agentic engineering requires. The prompts become agent instructions. The debugging becomes code review. The principles are the same.

Practice Exercise

1. Create a rules file for your project (pick the format for your tool)
2. Ask the AI to propose a file architecture for a feature you want to add
3. Add one automated test for your core feature
4. Identify one thing in your project that’s faster to hand-code — do it
5. Integrate a free public API (weather, quotes, news) using the proxy pattern

Key Takeaways

• Rules files eliminate repetitive instructions — set up once, apply to every prompt
• Plan multi-file architecture before building — review the plan first
• Proxy third-party APIs through server routes to protect API keys
• Automated tests are your safety net — they catch what you can’t manually review
• Use vibe coding for heavy lifting, hand-code for precision — be pragmatic
• These skills transfer directly to “agentic engineering” — the next evolution of AI-assisted development

Up Next

In the final lesson, you’ll bring everything together: build a complete application from scratch, deploy it, and share it with the world.