File Organization

🚫

Critical Rule: AI defaults to putting files at project root. Fight this constantly.

The Standard Structure

project/
├── docs/           # Documentation only
├── scripts/        # Utility scripts  
├── tests/          # All test files
├── src/            # Source code
│   ├── components/ # UI components
│   ├── utils/      # Helper functions
│   ├── services/   # Business logic
│   ├── hooks/      # React hooks
│   ├── types/      # TypeScript types
│   └── lib/        # Third-party wrappers
├── public/         # Static assets
├── .gitignore      
└── README.md

The Right Way to Prompt

✅ Good: Specify the path

"Create the UserService class in `/src/services/UserService.ts`"

❌ Bad: Let AI decide

"Create the UserService class"

AI will likely put it at root or in a random location.

Creating Folders First

Before asking AI to create files, create the folders:

mkdir -p src/services src/components src/utils

Then prompt:

"Create a new service in /src/services/ for handling payments"

Fixing Misplaced Files

When AI puts a file in the wrong place:

Stop immediately — Don't continue building on wrong structure
Move the file — Use your IDE or terminal
Tell AI — "From now on, all services go in /src/services/"

Import Path Discipline

Bad AI output often has broken imports:

// AI might generate:
import { User } from '../../../models/User'  // Fragile relative path
 
// Better:
import { User } from '@/models/User'  // Path alias

Set up path aliases in tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

The Rule

Every file has ONE correct location. Know it. Enforce it. Don't let AI decide.

Project Setup Development Loop