Frontend Component Organization

This is a reference pattern. Learn from the approach, adapt to your context — don't copy verbatim.

Problem: Frontend projects grow into disorganized directories where related files are hard to find and shared code has no clear home.

Solution: Organize by type (components, hooks, lib, types), with subdirectories for grouping related items within each type.

Pattern

frontend/
├── app/                 # Framework routing (Next.js app dir, Nuxt pages, etc.)
│   ├── layout.tsx
│   └── page.tsx
├── components/          # All components
│   ├── ui/              # Base primitives (Button, Input, Modal)