Configuration & Build

Configuration & Build

Package Scripts

Script	Command	Description
dev	next dev --turbopack	Dev server with Turbopack
build	next build	Production build
start	next start	Production server
lint	next lint	ESLint check
lint:biome	biome check --write .	Biome format + lint
typecheck	tsc --noEmit	TypeScript type checking
test	vitest run	Unit tests
test:watch	vitest	Unit tests in watch mode
test:e2e	playwright test	E2E tests
test:e2e:ui	playwright test --ui	E2E with interactive UI
ci	typecheck && lint:biome && lint && build && vitest	Full CI pipeline
storybook	storybook dev -p 6006	Storybook dev server
build-storybook	storybook build	Static Storybook
prepare	husky	Install git hooks
viz:list	tsx scripts/create-visualization-agent.ts list	List all visualizations
viz:next	tsx scripts/create-visualization-agent.ts next	Next unimplemented viz
viz:generate	tsx scripts/create-visualization-agent.ts generate <id>	Generate viz boilerplate
viz:status	tsx scripts/create-visualization-agent.ts status	Viz implementation status

Next.js Configuration (next.config.ts)

{
  reactStrictMode: true,
  images: {
    formats: ['image/avif', 'image/webp'],
  },
  experimental: {
    optimizePackageImports: [
      'lucide-react',
      '@tanstack/react-query',
      'zustand',
    ],
  },
  headers: [
    // Security headers on all routes:
    'X-Content-Type-Options: nosniff',
    'X-Frame-Options: DENY',
    'X-XSS-Protection: 1; mode=block',
    'Referrer-Policy: strict-origin-when-cross-origin',
  ],
}

TypeScript Configuration (tsconfig.json)

• Strict mode enabled
• Target: ES2017
• Module resolution: Bundler
• Path alias: @/* maps to project root
• Excludes: tests, stories, e2e from compilation

ESLint Configuration (eslint.config.mjs)

Flat config with:

• next/core-web-vitals preset
• next/typescript preset
• storybook plugin
• Relaxed no-unused-vars for _-prefixed vars and test patterns

Biome Configuration

Runs alongside ESLint for formatting and additional linting. Configured in biome.json.

Tailwind Configuration (tailwind.config.ts)

Tailwind v4 with:

• CSS variable-based design tokens
• Custom animations: fade, slide, pulse, glow, shimmer
• Content paths: app/, components/, lib/

Pre-commit Hooks

Managed by Husky + lint-staged:

{
  "*.{js,jsx,ts,tsx}": [
    "biome check --write",
    "eslint --fix --max-warnings 0"
  ]
}

Deployment

• Platform: Vercel
• URL: coding-drills.vercel.app
• Build command: next build
• Framework preset: Next.js (auto-detected)
• Node version: 18+

Key Dependencies

Package	Version	Purpose
next	16.x	Framework
react	19.x	UI library
@monaco-editor/react	Latest	Code editor
tailwindcss	4.x	Styling
motion	Latest	Animations
@mlc-ai/web-llm	Latest	Local AI inference
@ai-sdk/openai	Latest	Cloud AI fallback
@openfeature/web-sdk	Latest	Feature flags
zod	Latest	Schema validation
nuqs	Latest	URL query state
zustand	Latest	State management