القائمة
TanStack Router + React frontend patterns, ConnectRPC gRPC-Web client, Zustand stores, Tailwind v4, i18n, and AppearancePanel theming for the Anachak platform.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Rust gRPC backend patterns, folder structure, module anatomy, and infrastructure wiring for the Anachak multi-tenant SaaS platform.
CI/CD pipeline, Docker multi-stage build, GitHub Actions, and Cloud Run deployment for the Anachak platform.
Fish shell configuration, aliases, gRPC debugging, PostgreSQL CLI helpers, and dev workflow shortcuts for the Anachak platform.
| name | frontend-web |
| description | TanStack Router + React frontend patterns, ConnectRPC gRPC-Web client, Zustand stores, Tailwind v4, i18n, and AppearancePanel theming for the Anachak platform. |
The web frontend at web/ — a React 19 SPA using TanStack Router, Zustand, ConnectRPC, and Tailwind CSS v4.
| 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 |
| 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 |
| 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 |
| Port | Purpose |
|---|---|
3000 | Vite dev server (bun run dev) |
50050 | Backend gRPC (proxied via ConnectRPC gRPC-Web) |
routeTree.gen.ts from routes/ directory_auth/ (login/register) and _app/ (dashboard) with shared layoutsuseAuth, useAppearanceStore, useCompanyStore, useSidebarStore, useTabStoreAppearanceStore writes 50+ CSS vars to :root via applyToDOM()components/ui/