Code Architecture
Development · 7 articles
Add a new page to your project
Prompt Lovable: 'Add a new page for [feature].' Lovable will create a new route, add it to navigation, and build the page layout. Use clear names and describe what the page should do.
Code Modification Approach
Lovable operates in Agent mode (autonomous changes) and Plan mode (reasoning without code modification). Use Plan mode to explore ideas and investigate issues, then switch to Agent mode for implementation. For modifying existing code, be specific about what needs changing and test incrementally to catch issues early.
Component Architecture
Lovable generates production-ready React code with proper component structure. Keep components focused (single responsibility). Pass data via props and lift state when multiple components need it. Use custom hooks to share logic. Organize components by feature, not just type. This modular approach makes your codebase scalable and maintainable.
Dead Code Elimination
Regularly review code for unused functions, imports, and styles. Remove or refactor code that's no longer used—it creates clutter and makes debugging harder. During refactoring sessions, clean up any remnants from previous iterations. A clean codebase is easier to understand and modify.
Preventing Duplicate Components
Before creating a new component, check if a similar one already exists in your codebase. Reuse and customize existing components rather than duplicating them. If you need a variant, refactor the component to accept props that handle both cases. This keeps your codebase lean and makes updates easier.
Progressive Enhancement
Build core functionality first with solid foundations (database schema, authentication, basic UI). Then layer on enhancements (animations, advanced features, optimizations). This approach keeps your app stable during development and prevents breaking changes when adding complexity. Use Plan mode to design the enhancement path before Agent mode builds it.
Refactor code
Ask Lovable to refactor specific parts of your code. Use Plan mode first to discuss the approach, then Agent mode to execute. Break complex refactors into smaller prompts for best results.
