Skip to content

Frontend Development Guide

Purpose

This guide defines how frontend work should be built, checked, and prepared for review to deliver a consistent user experience and professional UI code.

Technology Stack

Library Role
Next.js App Router, SSR, and Routing
Shadcn/UI Base UI components & consistency
Tailwind CSS Utility-first styling & layout
Playwright E2E flow verification

Workflow

  1. Branch: Start from dev.
  2. Scope: Confirm UI expectations and states (Loading, Success, Error).
  3. Build: Implement using shadcn/ui and Tailwind.
  4. Connect: Bind to backend APIs or mock data.
  5. Check: Run local linting and accessibility checks.
  6. PR: Open a PR with screenshots or recordings.

Definition of Done

Frontend Checklist
  • [ ] UI matches the feature design exactly.
  • [ ] Responsive behaviour verified (Mobile/Desktop).
  • [ ] Loading, Success, and Error states are handled.
  • [ ] Components are modular and reusable.
  • [ ] Manually verified in at least two browsers.
  • [ ] PR includes visual evidence (Screenshots/Video).

UI Best Practices

Prefer extending shadcn/ui patterns over inventing one-off components. Keep components small and focused.

import { Button } from "@/components/ui/button"

export function ActionButton() {
  return <Button variant="outline">Action</Button>
}

Use Tailwind class usage intentionally. Avoid "magic numbers" in layouts; use the spacing scale.

Make state handling explicit. Use server components where possible for data fetching to reduce client-side complexity.