aplp.frontend.web/docs/SETUP.md

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

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

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