Skip to content

UI for Admin — Tech Stack

Adopted Technologies

Layer Technology Notes
Framework Next.js 15 App Router Consistent with "Amplify/NextJS" in Service Architecture Proposal - AWS System Configuration. Server Components prevent authentication tokens from being exposed to client-side JS
Runtime / Tooling Bun, Biome, Lefthook, TypeScript 5.9 Unified with api-admin, allowing monorepo configuration to be reused
UI Kit shadcn/ui + Tailwind v4 + Radix Source owned within the project. The standard choice for back-office CRUD
Data Fetching TanStack Query v5 Caching, invalidation, optimistic updates, pagination
API Client Orval generates TanStack Query hooks + TS types + Zod from /api/v1/doc Single codegen step. Details: Setup
Table TanStack Table v8 Headless. Works well with the shadcn DataTable pattern
Form React Hook Form + Zod (Orval-generated) Pass Orval-generated schemas to zodResolver
URL State nuqs Persist filters, pages, and sort order in the URL
i18n next-intl ja / en (aligned with documentation)
Testing Vitest + Testing Library + Playwright Vitest is the same as api-admin
Deployment AWS Amplify Hosting Consistent with Service Architecture Proposal - AWS System Configuration

Rejected Technologies (with Reasons)

  • Refine — Manually composing shadcn + TanStack gives more freedom per screen and avoids constraints imposed by scaffolding
  • NextAuth / Auth.js — The backend owns the session lifecycle (PostgreSQL session table, RBAC, cleanup jobs), so double management is avoided
  • aws-amplify/auth SDK — Would talk directly to Cognito, bypassing the admin API's session table and DB-derived RBAC
  • openapi-zod-client — Functionality overlaps with Orval's Zod output