Vibe Coding Masterclass

Managing Complexity

As your projects grow, you'll need to organize code across multiple files. This isn't just about cleanliness — it helps Claude understand and modify your code more effectively.

🎯 What You'll Learn

• When to split code into multiple files
• Common folder structures
• Components, utilities, and hooks
• Import/export patterns

Standard Next.js Structure

my-app/
├── app/                 # Pages and routes
│   ├── page.js          # Homepage
│   ├── about/page.js    # /about page
│   └── layout.js        # Shared layout
├── components/          # Reusable UI pieces
│   ├── Header.js
│   ├── Footer.js
│   └── Button.js
├── lib/                 # Utilities and helpers
│   ├── utils.js
│   └── supabase.js
└── public/              # Static files (images)

When to Create a New File

Reusable Component

If you use the same UI element in multiple places, extract it to components/

Utility Function

Helper functions used across files go in lib/utils.js

New Page

Each route gets its own folder in app/ with a page.js file

💡 Ask Claude

"This file is getting long. Can you refactor it by extracting the [component name] into its own file in the components folder?"