Spec 02 Tech Stack - SekiroKenjii/Quizzivy GitHub Wiki
Section of Quizzivy — Frontend Portal & Data Model Specification · Previous · Next
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.