Architectural layout of files, directories, and route patterns across our frontend applications.

Frontend Project Structure

We follow the Next.js App Router conventions with clear separation of concerns across layouts, route segments, and shared UI libraries.

Directory Layout

layout.tsx

page.tsx

globals.css

header.tsx

sidebar.tsx

Keep styles, unit tests, and helper functions close to the components that consume them.

Always use @/ alias for root relative imports:

import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

Structure components with pure Server Components as orchestrators, passing data down into minimal Client Components for interactivity.