Why AI Projects Turn into Spaghetti
After 10+ prompt iterations, your Lovable project has files everywhere. Components are 500 lines. Utils are duplicated. The structure doesn't make sense.
Here's how to fix it.
The Optimal Lovable Structure
src/
├── components/
│ ├── ui/ # shadcn/ui components
│ ├── layout/ # Navbar, Footer, Sidebar
│ └── features/ # Feature-specific components
├── pages/ # Route-level pages
├── hooks/ # Custom React hooks
├── lib/ # Utilities, constants, helpers
├── api/ # API client setup
└── main.jsx # Entry point
Refactoring Steps
1. Extract Large Components
If a component exceeds 150 lines, break it into sub-components. Prompt:
"Component X is too large. Break it into smaller, focused components. Each sub-component should be under 100 lines with a single responsibility."
2. Move Utilities
Extract repeated logic into /lib:
"Find all duplicated utility functions (formatting, validation, data transformation) and extract them into src/lib/utils."
3. Create Custom Hooks
"Extract custom hooks for: useAuth, useSupabase, useForm. Each hook should be in src/hooks/."
