Frontend Overview

Tracera’s Next.js frontend architecture

Frontend Overview

Tracera’s frontend is built with Next.js 16 and React 19, using the App Router for server-side rendering and React Server Components.

Tech Stack

Technology	Version	Purpose
Next.js	16.1.6	React framework with App Router
React	19.0.0	UI library
Tailwind CSS	4.2.1	Utility-first styling
shadcn/ui	-	Accessible component primitives
Radix UI	-	Unstyled, accessible UI components
Zustand	5.0.11	Client-side state management
Zod	4.3.6	Runtime validation
next-themes	-	Dark/light mode theming
Lucide React	0.575.0	Icon library

Project Structure

apps/web/
├── app/                    # App Router pages
│   ├── layout.tsx          # Root layout with AuthProvider
│   ├── page.tsx            # Home (redirects based on auth)
│   ├── login/
│   │   ├── page.tsx        # Login page
│   │   └── login-form.tsx  # Login form component
│   ├── dashboard/
│   │   └── page.tsx        # User dashboard
│   └── actions/
│       └── auth.ts         # Server Actions
├── components/
│   ├── ui/                 # shadcn/ui components
│   ├── app-shell.tsx       # Main layout wrapper
│   ├── user-avatar.tsx     # Profile picture
│   ├── oauth-button.tsx    # OAuth provider button
│   ├── theme-provider.tsx  # Theme context
│   └── theme-toggle.tsx    # Dark/light toggle
├── lib/
│   ├── auth.ts             # getSession() for server components
│   ├── auth-context.tsx    # AuthProvider React context
│   ├── api.ts              # serverFetch() and authURL()
│   ├── schemas.ts          # Zod validation schemas
│   ├── store.ts            # Zustand store
│   └── utils.ts            # Utility functions
└── public/                 # Static assets

Key Patterns

Server Components by Default

Pages are server components by default, enabling data fetching at the server level without client-side loading states:

// app/dashboard/page.tsx — Server Component
export default async function DashboardPage() {
  const user = await getSession();
  if (!user) redirect('/login');
  return <Dashboard user={user} />;
}

Server Actions

Authentication operations use Next.js Server Actions for secure server-side mutations:

// actions/auth.ts
'use server'

export async function logout() {
  // Calls backend logout endpoint
}

export async function requestMagicLink(email: string) {
  // Calls backend magic link endpoint
}

Auth Context

Client components access authentication state via React Context:

const { user } = useAuth();

Security Headers

The Next.js config sets comprehensive security headers:

• Content Security Policy (CSP)
• Strict-Transport-Security (HSTS)
• X-Frame-Options
• X-Content-Type-Options
• Referrer-Policy