Architecture Report55/100

Issue: Supabase/DB calls found in pages/components (9 files)
Affected files: src/pages/AdminDashboard.tsx, src/pages/AdminUsers.tsx, src/pages/Billing.tsx, src/pages/Dashboard.tsx, src/pages/InvoiceCreate.tsx

Move all Supabase/database calls out of page files and components into a domains/ directory. Create domain-specific modules: domains/billing/actions.ts, domains/auth/queries.ts, etc. Pages should only import and call domain functions — never make DB calls directly. Example: instead of supabase.from('invoices').select() in a page, create domains/billing/queries.ts with export async function getInvoices() { ... } and import it.

Issue: 103 source files but no domains/ directory
Affected files: Create domains/<domain>/<slice>/ for business logic

Create a domains/ directory at the root of your src/ folder. Inside, create subdirectories for each business domain: domains/auth/, domains/billing/, domains/admin/. Each domain should contain its own actions, queries, types, and UI components. This is the first structural boundary — without it, business logic has nowhere organized to go. Start by: mkdir -p src/domains/auth src/domains/billing src/domains/admin.

Issue: 10 pages over 80 lines — extract logic to domains/
Affected files: src/pages/AdminUsers.tsx (144 lines), src/pages/Billing.tsx (211 lines), src/pages/Dashboard.tsx (224 lines), src/pages/Index.tsx (86 lines), src/pages/InvoiceCreate.tsx (316 lines)

Refactor fat page files to be thin wrappers under 80 lines. Pages should only handle: layout, data fetching (calling domain functions), and rendering domain components. Extract all business logic, form handling, and state management into domain modules. Example: a 200-line Billing page becomes: import { BillingDashboard } from '@/domains/billing/ui/BillingDashboard'; export default function BillingPage() { return <BillingDashboard />; }.

Issue: 1 file over 500 lines — split into smaller modules
Affected files: src/components/ui/sidebar.tsx (638 lines)

Split any source file over 500 lines into smaller, focused modules. Large files indicate mixed responsibilities. For a 600-line component: extract sub-components, move utility functions to separate files, split form logic from display logic. For a large API route: extract handler functions, validation, and business logic into separate files. Target: no file over 300 lines, ideally under 200.

Issue: No CI/CD pipeline found — code goes from developer to production unchecked

Add a CI/CD pipeline to your project. Create .github/workflows/ci.yml with at minimum: checkout, install dependencies, lint, and build steps. For safety enforcement, add: npx @vibecodiq/cli guard check. Example workflow: on: [push, pull_request] → jobs: ci: runs-on: ubuntu-latest → steps: checkout, setup-node, npm ci, npm run build, npx @vibecodiq/cli guard check.