Frontend Quality

Frontend Quality Checks

Runs TypeScript type checking, ESLint, and tests for the frontend.

Quick Check

cd front && pnpm type-check && pnpm lint

1. TypeScript Type Check

cd front && pnpm type-check

Checks all TypeScript files without emitting output.

Common Type Errors

Missing null check in page:

// Error: Build fails
export default function Page() {
  const { user } = useUser();
  return <Content userId={user.id} />; // user might be undefined!
}

// Fix: Add null check
export default function Page() {
  const { user } = useUser();
  if (!user) return null; // Required!
  return <Content userId={user.id} />;
}

API type mismatch:

# Regenerate types from backend
pnpm run generate:api

2. ESLint

Check:

cd front && pnpm lint

Auto-fix:

cd front && pnpm lint:fix

Common Lint Issues

Unused imports: Auto-fixed by lint:fix

Missing dependencies in useEffect:

// Warning: Missing dependency
useEffect(() => {
  fetchData(userId);
}, []); // userId missing

// Fix: Add all dependencies
useEffect(() => {
  fetchData(userId);
}, [userId]);

3. Tests (Vitest)

All tests:

cd front && pnpm test

Watch mode:

cd front && pnpm test:watch

Specific file:

cd front && pnpm test src/lib/utils.test.ts

4. Build Check

Full production build (catches more errors):

cd front && pnpm build

Common Build Errors

Dynamic import issues:

• Ensure client components have 'use client' directive
• Check for server-only code in client components

Environment variables:

• NEXT_PUBLIC_* for client-side
• Non-prefixed for server-side only

Pre-commit Checklist

cd front

# 1. Type check
pnpm type-check

# 2. Lint
pnpm lint

# 3. Run tests
pnpm test

# 4. (Optional) Full build
pnpm build

Configuration Files