React Boilerplate

Boilerplate React siap-pakai dengan struktur features-based yang clean dan contoh fitur Login end-to-end.

Stack

Tool	Kegunaan
Vite + React 19 + TypeScript	Build tool & framework (React Compiler aktif)
Tailwind CSS v4 + shadcn/ui	Styling & komponen UI
React Router DOM	Routing antar halaman
Axios	HTTP client ke API
TanStack Query	Server-state: caching, dedup, retry, loading
Zustand	State management (client state)
React Hook Form + Zod	Manajemen & validasi form
ESLint + Prettier	Linting & formatting
Husky + lint-staged + commitlint	Git hooks (pre-commit, commit-msg, pre-push)

Struktur Folder

Struktur feature-based (hybrid): kode milik satu fitur dikumpulkan di features/<nama>, sementara yang dipakai lintas-fitur tinggal di root.

src/
├── App.tsx                 # RouterProvider
├── main.tsx                # Entry point
├── index.css               # Tailwind + tema shadcn
├── components/
│   ├── ui/                 # Shared: komponen shadcn
│   └── layout/             # Shared: AppLayout, ProtectedRoute
├── lib/                    # Shared: utils, env, api (axios instance)
├── pages/                  # Shared: halaman lintas-fitur (dashboard, 404)
├── routes/                 # Shared: konfigurasi router
└── features/
    ├── auth/
    │   ├── api/            # auth.service.ts, auth.mock.ts
    │   ├── hooks/          # use-auth.ts
    │   ├── pages/          # login-page.tsx
    │   ├── schemas/        # auth.schema.ts (+ tipe via z.infer)
    │   ├── stores/         # auth.store.ts (zustand)
    │   ├── types/          # auth.types.ts
    │   └── index.ts        # barrel: API publik fitur
    └── products/           # contoh fitur list + detail (pola sama)
        ├── api/  components/  hooks/  pages/  schemas/
        └── index.ts

Aturan main:

• Setiap fitur hanya diakses lewat barrel index.ts-nya — internal fitur tidak diimpor langsung dari luar. Contoh: import { useAuth } from "@/features/auth".
• Import di dalam satu fitur memakai path relatif (../hooks/use-auth) agar fitur mudah dipindah; import ke shared memakai @/ (@/lib/api).
• Tanggung jawab per layer: schemas (validasi) → api (I/O HTTP) → stores (state) → hooks (orkestrasi) → pages/components (UI). UI tidak memanggil Axios langsung.

Menambah Fitur Baru

1. Buat folder src/features/<nama>/ dengan sub-folder seperlunya (api, hooks, pages, schemas, …).
2. Tulis index.ts yang meng-export hanya yang publik (biasanya pages & hooks).
3. Daftarkan halaman di src/routes/index.tsx lewat barrel: import { XxxPage } from "@/features/<nama>".

Setup

pnpm install
cp .env.example .env   # isi VITE_API_BASE_URL
pnpm dev

Scripts

Perintah	Fungsi
pnpm dev	Jalankan dev server
pnpm build	Typecheck + build produksi
pnpm preview	Preview hasil build
pnpm lint	ESLint (0 warning ditoleransi)
pnpm lint:fix	ESLint + auto-fix
pnpm format	Prettier write
pnpm format:check	Prettier check
pnpm typecheck	tsc -b