# APLP Frontend — Setup

| | |
| --- | --- |
| **Status** | Phase 0 hoàn tất — repo đã khởi tạo Vite + React + TS |

## 1. Prerequisites

- Node.js 18+ (chọn LTS, xác nhận khi khởi tạo)
- npm/pnpm (chọn 1 — candidate npm)
- Backend chạy local (xem `docs/SETUP.md` của `aplp.backend.spring`)

## 2. Cấu trúc dự án dự kiến

```text
aplp.frontend.react/
├── README.md
├── docs/                       # frontend docs
│   ├── PHASES.md               # công việc frontend theo phase APLP
│   ├── ARCHITECTURE.md
│   ├── CONVENTIONS.md
│   └── SETUP.md
├── index.html
├── vite.config.ts
├── package.json
├── tsconfig.json
├── .env.example
├── public/
└── src/
    ├── app/
    ├── api/
    ├── features/...
    ├── shared/
    └── types/
```

## 3. Khởi tạo (Phase 0)

> Repo hiện tại là template trống từ GitLab. Các bước dưới sẽ thực hiện khi bắt đầu Phase 0.

1. Khởi tạo React + TypeScript app (candidate: Vite): `npm create vite@latest . -- --template react-ts`
2. Thêm `react-router-dom`, axios, TanStack Query, Zustand, tooling lint/test.
3. Tạo config env mẫu `.env.example`: `VITE_API_BASE_URL=http://localhost:8080/api`
4. Dựng api client + auth flow + ProtectedRoute (an toàn tương ứng Phase 0).
5. Tạo folder structure theo `docs/ARCHITECTURE.md`.
6. Viết README chính thức thay template GitLab.
7. Kiểm tra: `npm run lint`, `npm run typecheck`, `npm test`, `npm run dev` build ok.

> ✅ Đã thực hiện xong. Xem `README.md` cho cấu trúc và scripts hiện tại.

## 4. Local Dev Flow

- Backend chạy local (port 8080 ví dụ).
- Chạy frontend: `npm run dev` → mở địa chỉ Vite.
- Env qua file `.env` (không commit; chỉ commit `.env.example`).

## 5. Environment Example

```env
VITE_API_BASE_URL=http://localhost:8080/api
VITE_APP_NAME=APLP
```

## 6. Verification Checklist (khi có code)

- [ ] `npm run lint` pass
- [ ] `npm run typecheck` pass
- [ ] `npm test` pass
- [ ] `npm run build` pass
- [ ] Login → protected route đúng, refresh token hoạt động

## 7. Open Questions

| ID | Question | Status |
| --- | --- | --- |
| SET-001 | npm hay pnpm? | Open (candidate npm) |
| SET-002 | Node version quản lý (nvm)? | Open |
| SET-003 | Deploy target (nginx/container/Vercel)? | Open |