iamfourh2e Frontend Web Skill
The web frontend at web/ — a React 19 SPA using TanStack Router, Zustand, ConnectRPC, and Tailwind CSS v4.
Tech Stack
| Layer | Technology | Version |
|---|---|---|
| Framework | React | 19 |
| Router | TanStack Router (file-based) | 1.167+ |
| State | Zustand | 5 |
| Styling | Tailwind CSS v4 + CSS custom properties | 4.2 |
| gRPC Client | ConnectRPC (gRPC-Web) | 2.1 |
| Proto Codegen | @bufbuild/protoc-gen-es |
2.11 |
| Icons | HugeIcons React | 1.1 |
| UI Primitives | Radix UI + shadcn/ui v4 | Latest |
| Animations | Framer Motion | 12 |
| Font | Geist Variable + Khmer fonts | Google Fonts |
| Toast | goey-toast | 0.4 |
| Build | Vite 7 | 7.3 |
| Test | Vitest + Testing Library | 3.2 |
| Package Manager | Bun | Latest |
Quick Reference
| Topic | File |
|---|---|
| Folder structure | folder-structure.md |
| Routing & layouts | routing.md |
| State management | state-management.md |
| gRPC client | grpc-client.md |
| Theming system | theming.md |
| i18n | i18n.md |
| Component patterns | components.md |
| SVG icon system | svg-icons.md |
| Color system | colors.md |
Entrypoints
| File | Purpose |
|---|---|
main.tsx |
ReactDOM render with RouterProvider |
router.tsx |
createRouter() with routeTree, scroll restoration, prefetch |
routes/__root.tsx |
Root layout: <Outlet /> + <GooeyToaster /> |
routes/_auth.tsx |
Auth layout: dark bg, noise grain, centered card |
routes/_app.tsx |
Dashboard layout: sidebar + header + themed content card |
styles.css |
Global Tailwind + CSS custom properties + keyframes |
Ports
| Port | Purpose |
|---|---|
3000 |
Vite dev server (bun run dev) |
50050 |
Backend gRPC (proxied via ConnectRPC gRPC-Web) |
Key Patterns
- File-based routing — TanStack Router auto-generates
routeTree.gen.tsfromroutes/directory - Layout groups —
_auth/(login/register) and_app/(dashboard) with shared layouts - Zustand stores — 5 stores:
useAuth,useAppearanceStore,useCompanyStore,useSidebarStore,useTabStore - ConnectRPC gRPC-Web — Type-safe clients generated from proto, one per service (12 clients)
- CSS custom properties —
AppearanceStorewrites 50+ CSS vars to:rootviaapplyToDOM() - OKLCH color system — 12 color presets with 11-step scales in OKLCH color space
- View Transitions API — Circular-reveal theme toggle (light ↔ dark)
- Khmer/English i18n — Zustand-based with dotted key paths and interpolation
- 56 shadcn/ui components — Radix-based primitives in
components/ui/ - Auth flow — JWT token rotation with auto-refresh timer, Google One Tap, 2FA support