Aplikasi manajemen kesehatan berbasis web untuk pasien dan dokter.
Dibangun sebagai Tugas Akhir mata kuliah Interaksi Manusia & Komputer (IMK) Semester 4.
- Tentang Proyek
- Fitur Utama
- Teknologi
- Struktur Proyek
- Instalasi dan Menjalankan Lokal
- Skrip yang Tersedia
- Anggota Tim
- Lisensi
Healthi adalah prototipe aplikasi manajemen layanan kesehatan berbasis web yang dirancang untuk mempertemukan pasien dan dokter dalam satu platform digital yang intuitif dan modern.
Aplikasi mendukung dua peran pengguna yang dapat diakses dalam satu sesi:
- Mode Pasien: Menemukan dokter, booking konsultasi, melihat resep & riwayat medis.
- Mode Dokter: Mengelola jadwal praktik, memantau pasien, melihat statistik, dan melakukan konsultasi online.
| Fitur | Keterangan |
|---|---|
| Dashboard | Rekomendasi dokter, pencarian & filter spesialisasi/lokasi/harga, jadwal janji temu mendatang |
| Konsultasi Saya | Daftar booking aktif, riwayat, reschedule/cancel janji temu |
| Riwayat Medis | Rekam medis lengkap dalam tampilan timeline & unduh sebagai PDF |
| Resep | Lihat & unduh resep digital dari dokter (PDF + QR Code) |
| Pesan | Chat real-time dengan dokter, lampiran file, emoji, panggilan suara/video |
| Notifikasi | Notifikasi pengingat janji temu dan pesan sistem |
| Profile | Edit data pribadi, foto profil, informasi medis dasar |
| Go Pro | Halaman promosi upgrade ke layanan premium |
| Bantuan | FAQ, kontak dukungan, dan onboarding tour interaktif |
| Fitur | Keterangan |
|---|---|
| Dashboard Dokter | Statistik praktik (pasien hari ini, pendapatan, rating), jadwal konsultasi, grafik pendapatan |
| Pasien Saya | Daftar pasien terdaftar dengan detail catatan |
| Rekam Medis | Akses & kelola rekam medis pasien |
| Jadwal Praktik | Atur ketersediaan waktu konsultasi (My Availability) |
| Konsultasi Online | Antarmuka sesi konsultasi berbasis video/teks |
| Catatan Pasien | Tulis dan simpan catatan pemeriksaan per pasien |
| Pesan | Chat dengan seluruh pasien |
- Dark / Light Mode: Tersedia di semua halaman
- Onboarding Tour: Panduan interaktif langkah demi langkah (react-joyride)
- Animasi Halus: Transisi halaman & elemen UI dengan Framer Motion dan GSAP
- Desain Responsif: Optimal di layar desktop
| Library | Versi | Fungsi |
|---|---|---|
| React | 19 | UI Library |
| TypeScript | 5 | Type Safety |
| Vite | 7 | Build Tool & Dev Server |
| TanStack Router | 1.x | File-based Routing |
| TanStack Start | 1.x | SSR / Full-Stack Framework |
| Library | Fungsi |
|---|---|
| Tailwind CSS v4 | Utility-first CSS |
| shadcn/ui + Radix UI | Komponen UI headless |
| Lucide React | Icon Set |
| Framer Motion | Animasi & Transisi |
| GSAP | Animasi kompleks |
| Recharts | Grafik & Visualisasi Data |
| next-themes | Dark/Light Mode |
| Library | Fungsi |
|---|---|
| react-hook-form + Zod | Validasi Form |
| react-joyride | Onboarding Tour Interaktif |
| jsPDF + jspdf-autotable | Generate PDF |
| QRCode | Generate QR Code untuk resep |
| Sonner | Toast Notification |
| date-fns | Manipulasi Tanggal |
sem4-imk/
├── public/ # Aset statis
├── src/
│ ├── assets/ # Gambar & media
│ ├── components/ # Komponen UI reusable
│ │ ├── charts/ # Komponen grafik (Recharts)
│ │ ├── magicui/ # Komponen animasi khusus
│ │ ├── skeletons/ # Skeleton loading
│ │ ├── ui/ # Komponen shadcn/ui
│ │ ├── AppSidebar.tsx # Sidebar navigasi utama (role-aware)
│ │ ├── OnboardingTour.tsx # Tour panduan interaktif
│ │ ├── RoleSwitcher.tsx # Ganti mode Pasien / Dokter
│ │ └── TopBar.tsx # Header halaman
│ ├── hooks/ # Custom React Hooks
│ ├── lib/ # Utilitas, store, data
│ │ ├── appointments-store.ts # State janji temu
│ │ ├── mock-data.ts # Data dummy dokter & pasien
│ │ ├── role.ts # Manajemen peran (pasien/dokter)
│ │ └── user-store.ts # State profil pengguna
│ └── routes/
│ ├── _app/ # Halaman yang memerlukan auth/sidebar
│ │ ├── dashboard.tsx # Dashboard Pasien
│ │ ├── dokter-dashboard.tsx # Dashboard Dokter
│ │ ├── konsultasi-saya.tsx # Konsultasi Saya (Pasien)
│ │ ├── riwayat-medis.tsx # Riwayat Medis
│ │ ├── resep.tsx # Resep Digital
│ │ ├── chat.tsx # Pesan / Chat
│ │ ├── profile.tsx # Profil Pengguna
│ │ ├── bantuan.tsx # Bantuan & FAQ
│ │ ├── pasien-saya.tsx # Daftar Pasien (Dokter)
│ │ ├── my-availability.tsx # Jadwal Praktik (Dokter)
│ │ ├── catatan-pasien.tsx # Catatan Pemeriksaan (Dokter)
│ │ └── konsultasi-online.tsx # Konsultasi Online (Dokter)
│ ├── _app.tsx # Layout utama (Sidebar + Outlet)
│ ├── index.tsx # Halaman Landing
│ ├── login.tsx # Login
│ └── register.tsx # Registrasi
├── LICENSE
├── package.json
├── vite.config.ts
└── README.md
- Bun >= 1.x (direkomendasikan) atau Node.js >= 18
- Git
# 1. Clone repositori
git clone https://github.com/Buthzz/sem4-imk.git
cd sem4-imk
# 2. Install dependensi
bun install
# atau: npm install
# 3. Jalankan server pengembangan
bun run dev
# atau: npm run devBuka browser dan akses: http://localhost:3000 (atau port yang ditampilkan di terminal).
| Mode | Nama Pengguna Demo |
|---|---|
| Pasien | M Fajar N |
| Dokter | dr. Aslih Maulana Syadat, Sp.JP |
Mode dapat diganti kapan saja melalui tombol DOKTER / PASIEN di TopBar atau Sidebar.
bun run dev # Jalankan server pengembangan
bun run build # Build untuk produksi
bun run preview # Preview build produksi secara lokal
bun run lint # Cek ESLint
bun run format # Format kode dengan Prettier| Nama | NIM | Peran |
|---|---|---|
| Muhammad Fajar Nugroho | 240411100103 | Frontend Developer |
| Aslih Maulana Syadat | 240411100166 | UI/UX Design |
Mata Kuliah: Interaksi Manusia & Komputer (IMK) Program Studi: Teknik Informatika Semester: 4 - Tahun Akademik 2025/2026
Healthi (c) 2026 Muhammad Fajar Nugroho & Aslih Maulana Syadat
Dilisensikan di bawah Creative Commons Attribution-NonCommercial 4.0 International (CC BY-NC 4.0).
- Boleh digunakan & dimodifikasi untuk keperluan non-komersial
- Boleh disebarluaskan dengan atribusi yang sesuai
- Tidak boleh digunakan untuk tujuan komersial
Lihat file LICENSE untuk teks lengkap lisensi.