Frontend Vite Stack

Vite Admin Stack

Stack

Vite 7 · React 19 · React Router 7 · TanStack Query v5 · Axios · RHF + Zod 4 · shadcn/ui · Tailwind v4 · Chart.js

No Redux/Zustand — React Query for server state, Context for auth.

Layout (recommended for new apps)

src/
├── main.tsx
├── App.tsx
├── routes/
│   ├── index.tsx
│   └── features/*.routes.tsx
├── layouts/dashboard-layout.tsx
├── providers/
├── components/ui/ + shared/
├── config/env.ts, sidebar.ts
├── lib/api.ts, cookies.ts, form-utils.ts
└── features/{name}/
    ├── pages/
    ├── components/
    ├── api/          # api.ts, keys.ts, queries.ts, mutations.ts
    └── types/

Legacy repos: monolithic router.tsx, data/sidebar-data.ts, services/ — detect and match.

Providers

ThemeProvider → QueryProvider → AuthProvider → [domain] → RouterProvider

Conventions

• UI English-only; entity fields bilingual _en/_ar
• Backend routes: get-all-X, create-X, ?id= query params
• Images: `${API_URL}${path}`
• Cookie JWT token (7-day)

Related Skills