MedSync — ระบบจัดการคลินิกและนัดหมายผู้ป่วย

ภาพรวมโปรเจกต์

MedSync เป็น SaaS platform สำหรับคลินิกทั่วไปและคลินิกเฉพาะทางขนาดเล็กถึงกลาง เป้าหมายหลักคือลดภาระงานธุรการ เช่น การจัดตารางนัด การบันทึกประวัติผู้ป่วย และการออกเอกสารทางการแพทย์ ที่ยังทำด้วย Excel และกระดาษในคลินิกส่วนใหญ่

สถาปัตยกรรมที่เราเลือก

เราเลือก Nuxt 3 + Vue 3 เพราะ:

• Composition API ทำให้ reuse logic ระหว่าง components ได้ง่าย
• Built-in SSR สำหรับหน้า public (landing page, pricing)
• TypeScript support ดีเยี่ยม ซึ่งสำคัญมากสำหรับ healthcare data

สำหรับ backend เลือก Supabase เพราะ:

• Row Level Security ทำให้ isolate ข้อมูลระหว่างคลินิกได้ง่าย
• Realtime subscriptions สำหรับ live appointment board
• Auth ที่ครบ พร้อม JWT ที่ integrate กับ Vue ได้ตรงไปตรงมา

ความท้าทายหลัก: Realtime Appointment Board

ฟีเจอร์ที่ยากที่สุดคือ appointment board ที่ต้องอัปเดต realtime เมื่อนัดถูกสร้าง เลื่อน หรือยกเลิก โดยไม่กระทบ performance ของหน้าอื่น

เราใช้ Supabase Realtime Channels ร่วมกับ Pinia store ออกแบบให้ events จาก websocket ไป mutate store โดยตรง โดยไม่ต้อง refetch ข้อมูลทั้งหมด

// composables/useAppointments.ts
const channel = supabase.channel('appointments')
  .on('postgres_changes', {
    event: '*',
    schema: 'public',
    table: 'appointments',
    filter: `clinic_id=eq.${clinicId}`,
  }, (payload) => {
    appointmentStore.handleRealtimeEvent(payload)
  })
  .subscribe()

ผลลัพธ์

• เวลาที่ใช้ในการจัดตารางนัดลดจาก 12 นาที → 2 นาที ต่อผู้ป่วย
• Error rate ในการออกใบเสร็จลดลง 95% (จาก manual entry)
• Staff satisfaction score 4.6/5 (จาก 8 คลินิก pilot)
• Lighthouse score: Performance 94, Accessibility 98

"ก่อนหน้านี้ reception ต้องเปิด Excel หลายไฟล์พร้อมกัน ตอนนี้ทุกอย่างอยู่ในหน้าเดียว"

— คุณพรรณี สุขสวัสดิ์, ผู้จัดการคลินิก