๐Ÿ“‹ ุงู„ู…ุดุฑูˆุน 3: ุชุทุจูŠู‚ ุฅุฏุงุฑุฉ ู…ู‡ุงู… โ€” Laravel API + React

GLM-5.1 Evaluation | Full-Stack Task Manager | 20+ ู…ู„ู
Laravel 11 React + TypeScript Sanctum Auth Vite Optimistic UI Dark Mode
20+
ู…ู„ู
6
API Endpoints
5
Unit Tests
โœ…
ู…ูƒุชู…ู„

๐Ÿ—๏ธ ุงู„ุจู†ูŠุฉ ุงู„ู…ุนู…ุงุฑูŠุฉ

๐Ÿ“ฑ React + TS
Vite Dev Server
โ†’
๐Ÿ”Œ Axios + CORS
withCredentials
โ†’
๐Ÿ”’ Sanctum
SPA Auth
โ†’
โšก Laravel API
Resources + Policies
โ†’
๐Ÿ—„๏ธ MySQL
Eloquent ORM

๐Ÿ“ ู‡ูŠูƒู„ ุงู„ู€ Backend

๐Ÿ“ ู‡ูŠูƒู„ ุงู„ู€ Frontend

๐Ÿงช ุงุฎุชุจุงุฑุงุช API โ€” 5 Test Cases

๐Ÿ“Š ุชุบุทูŠุฉ ุงู„ุงุฎุชุจุงุฑุงุช

  • โœ“ GET /api/tasks โ€” ุนุฑุถ ู…ู‡ุงู… ุงู„ู…ุณุชุฎุฏู… ูู‚ุท (assertOk + assertJsonStructure)
  • โœ“ POST /api/tasks โ€” ุฅู†ุดุงุก ู…ู‡ู…ุฉ ุจุจูŠุงู†ุงุช ุตุญูŠุญุฉ โ†’ 201 Created
  • โœ“ POST /api/tasks โ€” ุจูŠุงู†ุงุช ุฎุงุทุฆุฉ โ†’ 422 Unprocessable Entity
  • โœ“ PATCH /api/tasks/{id}/toggle โ€” ุชุจุฏูŠู„ ุงู„ุญุงู„ุฉ pending โ†” done
  • โœ“ DELETE /api/tasks/{id} โ€” ุญุฐู ู…ู‡ู…ุฉ propres + ู…ู†ุน ุญุฐู ู…ู‡ู…ุฉ ุบุฑูŠุจุฉ โ†’ 403

โš™๏ธ Backend Requirements

  • โœ“ API Resources: TaskResource + TaskCollection
  • โœ“ Authentication: Laravel Sanctum (SPA tokens)
  • โœ“ GET /tasks โ€” ู‚ุงุฆู…ุฉ ู…ุน Pagination + Meta
  • โœ“ POST /tasks โ€” ุฅู†ุดุงุก ู…ุน Validation โ†’ 201
  • โœ“ PUT /tasks/{id} โ€” ุชุญุฏูŠุซ ูƒุงู…ู„
  • โœ“ DELETE /tasks/{id} โ€” ุญุฐู ู…ุน Authorization
  • โœ“ PATCH /tasks/{id}/toggle โ€” ุชุจุฏูŠู„ ุงู„ุญุงู„ุฉ
  • โœ“ Filtering: ?status=done&priority=high&due=today
  • โœ“ Rate Limiting: 60/min auth, 10/min guest
  • โœ“ 5 Unit Tests ู…ุน RefreshDatabase
  • โœ“ Form Requests: StoreTaskRequest + UpdateTaskRequest
  • โœ“ Scopes: byStatus, byPriority, dueToday, overdue

๐ŸŽจ Frontend Requirements

  • โœ“ Vite + React Setup (ุจุฏูˆู† CRA)
  • โœ“ TypeScript โ€” ุฃู†ูˆุงุน Task, TaskFormData, TaskFilters
  • โœ“ useReducer โ€” TaskReducer ู…ุน 9 action types
  • โœ“ Custom Hook: useTasks() โ€” fetch/create/update/delete/toggle
  • โœ“ Optimistic UI โ€” ADD/UPDATE/DELETE/TOGGLE ู…ุน Revert ุนู†ุฏ ุงู„ูุดู„
  • โœ“ Error Handling โ€” Toast notification ุนู†ุฏ ูุดู„ ุงู„ุทู„ุจ
  • โœ“ Dark Mode โ€” CSS Variables + toggle + localStorage
  • โœ“ axios instance โ€” baseURL + withCredentials + interceptors
  • โœ“ CORS configured โ€” localhost:5173
  • โœ“ Loading / Error / Empty states
  • โœ“ Pagination controls
  • โœ“ Search + Multi-filter UI
  • โœ“ Confirm delete pattern

๐Ÿ” REST Conventions Check

  • โœ“ 201 Created โ€” ุนู†ุฏ POST ู†ุงุฌุญ
  • โœ“ 200 OK โ€” GET, PUT, PATCH, DELETE
  • โœ“ 422 Unprocessable โ€” Validation failure
  • โœ“ 403 Forbidden โ€” Unauthorized access
  • โœ“ JSON response structure โ€” data + meta + links
โ† ุงู„ุนูˆุฏุฉ ู„ุตูุญุฉ GLM