Spec 02 Tech Stack

Section of Quizzivy — Frontend Portal & Data Model Specification · Previous · Next

2. Tech stack

Fixed unless Thuong approves a change. Do not swap libraries silently.

Concern	Choice	Notes
Build	Vite + React 19 + TypeScript (strict)	pnpm
Routing	React Router v7 (SPA mode)	Route-level code splitting via lazy
Server state	TanStack Query v5	All API reads/writes go through query/mutation hooks
Client state	Zustand (minimal)	Auth session, test-taking engine, UI prefs only
Forms	react-hook-form + zod	Zod schemas are the single source of validation and TS types
Styling	Tailwind CSS v4 + shadcn/ui (neutral/zinc base)	See §12
Icons	lucide-react	One icon set only
i18n	i18next + react-i18next	vi default, en secondary. All strings via t() from day one.
Dates	date-fns + date-fns-tz	Asia/Ho_Chi_Minh default
HTTP	native fetch wrapped in src/lib/api/client.ts	No axios
Google auth	Google Identity Services	Authorization Code + PKCE, exchanged server-side (§5.3)
AI assistant	Anthropic's API, through the official Go SDK in platform/anthropic	Reached only through the ai module's Completer port, wired in core. Two tiers, fast and capable (the capable one reads images and PDF pages); each tier's model and its three prices are configuration (AI_TIER_*), and no model identifier is written in the code or the documents. Off unless ANTHROPIC_API_KEY is set. §8, §15, §16, §17
Audio	native <audio> element + custom React controls	No wavesurfer.js, no howler. See §11.3
Object storage	Cloudflare R2 (S3-compatible)	Audio and image assets. aws-sdk-go-v2/s3 on the backend
Markdown	react-markdown + rehype-sanitize	Never dangerouslySetInnerHTML with server content
Drag & drop	@dnd-kit/core + @dnd-kit/sortable	Builder reordering only; lazy-loaded
Testing	Vitest + Testing Library; Playwright e2e; MSW mocks	See §14
Lint/format	ESLint (typescript-eslint, react-hooks, jsx-a11y) + Prettier	CI fails on lint errors

Single SPA, three route trees. /teacher/*, /app/*, and a small public tree (/login, /join/*). Split at the route level so a student never downloads teacher code and an anonymous visitor downloads neither. A /admin/* address redirects to the same path under /teacher until R5 builds the Admin console at /admin.

---

Section of Quizzivy — Frontend Portal & Data Model Specification · Previous · Next

---

_{Generated from docs/quizzivy-spec-v0.3.md. Edit that file in the repository; changes made on this page are overwritten.}