React + TypeScript Frontend for REST API

เอกสารวางแผนหนังสือสอนสร้าง frontend ด้วย React + TypeScript เพื่อเชื่อมต่อ REST API จริงจาก backend book ที่มีอยู่แล้ว

เป้าหมายของเล่มนี้คือพาผู้เรียนสร้าง Admin Dashboard / Back-office App ที่ใช้งานกับ API ได้จริง ไม่ใช่แค่ฝึก component แยกส่วน

เอกสารควบคุมคุณภาพ

เอกสารภายในสำหรับพัฒนา ตรวจ และ release หนังสืออยู่ที่ docs/internal และใช้ Book Documentation Standard v1 เหมือนหนังสือเล่มอื่น อ่านมาตรฐานได้ที่ docs/internal/README.md

docs/internal/
  README.md
  book-plan.md
  api-contract.md
  final-project-structure.md
  manuscript-status.md
  release-checklist.md
  style-guide.md
  teaching-principles.md
  validation-report.md
  decisions/
    0001-tech-stack.md
    0002-api-client-pattern.md
    0003-auth-token-storage.md
    0004-form-validation.md
    0005-state-management.md
  qa/
    accessibility-checklist.md
    browser-test-plan.md
    security-review-checklist.md

ไฟล์เฉพาะเล่ม:

• docs/internal/cross-backend-compatibility.md: ใช้ควบคุม compatibility ระหว่าง frontend book กับ backend book หลายภาษา

แนวทางหลัก

• ใช้ React + TypeScript + Vite
• ใช้ React Router สำหรับ routing
• ใช้ API client กลางสำหรับ REST API
• ใช้ React Hook Form + Zod สำหรับ form validation
• สร้าง auth flow, protected route และ admin-only route
• สร้าง user management, audit log และ dashboard overview
• ออกแบบให้ใช้ backend ได้ทั้ง Spring Boot และ ASP.NET Core ถ้า API contract ตรงกัน

Production-ready Documentation Gates

ก่อนเริ่มเขียนบทจริง ให้ใช้เอกสารเหล่านี้เป็นมาตรฐาน:

• AGENTS.md สำหรับ workflow ของ repo และการใช้ local skill
• skills/tutorial-book-auditor/SKILL.md สำหรับตรวจ/แก้บทเรียนและตัวอย่าง React
• teaching-principles.md สำหรับรูปแบบบทเรียน
• style-guide.md สำหรับภาษาและ code block
• release-checklist.md สำหรับ gate ก่อนเผยแพร่
• decisions/ สำหรับบันทึกเหตุผลของ technical choices
• qa/ สำหรับ browser, accessibility และ security review

Final Project

โปรเจกต์สุดท้ายควรเป็น React Admin Dashboard ที่มี:

• login/logout
• current user
• protected dashboard
• admin layout
• user list พร้อม search/filter/sort/pagination
• change role/status
• audit log
• loading/error/empty states
• production build