ระบบลงทะเบียนและติดตามผู้ป่วย

เจ้าของผลงานเล่าไว้แบบนี้

agnos asignment real-time-patient project https://agnos-asignment.vercel.app # Real-time Patient Registration & Staff Monitoring System An interactive, real-time patient form and staff monitoring web application built for the **Agnos Candidate Assignment**. > 📌 **Developer Implementation Notes (ขั้นตอนการทำภาษาไทย):** > สามารถอ่านแนวคิดขั้นตอนการพัฒนา, สถาปัตยกรรมระบบ (Architecture Diagram), และเหตุผลในการเลือกเทคโนโลยีเพิ่มเติมได้ที่ [README_STEP.MD](./README_STEP.md) --- ## 📝 ขั้นตอนการทำ & เครื่องมือพัฒนา (Implementation Steps & Dev Tools) 1. **โครงสร้างโปรเจกต์:** ให้ AI ช่วยขึ้นโครงสร้างตามที่ศึกษามาแล้วว่าเหมาะสมตามหลัก Modular Architecture 2. **ดีไซน์ UI & Branding:** ดีไซน์ด้วยสี (`rgb(26 89 194)`), ฟอนต์ภาษาไทย `Anuphan` และโลโก้แบรนด์ Agnos แท้อ้างอิงจาก [Agnos Health](https://www.agnoshealth.com/) 3. **ระบบ 2 ภาษา (i18n):** ทำระบบรองรับ 2 ภาษา (TH/EN) ด้วยโครงสร้าง JSON Object ดูแลรักษานำไปใช้งานต่อได้ง่าย 4. **Responsive Design (787px):** แยก Mobile (`<= 787px`) และ Desktop (`> 787px`) ด้วย Tailwind CSS Breakpoint `--breakpoint-md: 788px` พร้อม Mobile Slide-over Overlay Menu อนิเมชัน 60fps รองรับหน้าจอเล็กสุดถึง 200px (มาตรฐาน 320px) พร้อม CSS `clamp()` หดไม่เกิน 20% 5. **Supabase Realtime Broadcast:** ใช้ `@supabase/supabase-js` เชื่อมต่อ WebSocket Broadcast Channel (`patient-form-sync`) ส่งข้อมูลสด 0ms โดยไม่ต้องสร้าง Overhead ในการเขียน DB 6. **Unit Testing:** เขียน Unit Test ด้วย Vitest ครอบคลุม Form Validation Schema และ Supabase Realtime รันผ่านคำสั่ง `npm run test` (5/5 Tests Passed) 7. **Code Quality:** ตรวจสอบคุณภาพโค้ดด้

โดย tonepice · ดูโพสต์ต้นทาง