MediSave - Medical Appointment Booking App

MediSave is a premium, secure, and production-grade medical appointment booking application built with Next.js, Appwrite, and Sentry. The platform divides client registration into user-friendly steps, handles document uploads, schedules/cancels doctor appointments, sends automated SMS confirmations, and features a complete Administrator Dashboard for managing queues.

---

Table of Contents

1. About the Project
2. Interface & Features Walkthrough
   • Patient Onboarding Flow
   • Appointment Booking & Confirmation
   • Administrator Management Dashboard
3. Technology Stack
   • Core Technologies
   • Key Integrations & APIs
   • Libraries & UI Components
4. Getting Started
   • Prerequisites
   • Installation & Setup
5. License

---

About the Project

MediSave serves as a functional demo of a modern healthcare scheduling system. It manages patient databases, stores medical documents, schedules physician sessions, and logs errors in real-time. By leveraging Appwrite's serverless databases, storage buckets, and messaging modules, combined with Sentry's application monitoring, MediSave delivers a robust, secure, and highly observable user experience.

---

Interface & Features Walkthrough

Patient Onboarding Flow

1. Welcome Landing Screen

The gateway page where new patients enter their basic credentials (name, email, phone) to initiate registration or check logs.

• Featured Page: Welcome / Landing
• Visual:

2. Patient Registration Wizard

Once verified, patients complete a comprehensive profile layout divided into three sections:

• Step 1: Basic user info, date of birth, gender, and contact coordinates.

• Step 2: Occupation, emergency contact details, and primary physician selection.

• Step 3: Insurance details, medical history, past allergies, document uploads (IDs), and legal consent acknowledgements.

• Visuals:

---

Appointment Booking & Confirmation

1. Schedule Appointment Form

Patients select their preferred doctor, choose a date and time slot using an inline calendar, specify the reason for their visit, and submit notes.

• Featured Page: Appointment Scheduling
• Visual:

2. Appointment Success Confirmation

Displays a summary of the scheduled appointment (physician details, date, and confirmation status) and notifies the patient that their request has been successfully queued.

• Featured Page: Successful Booking Confirmation
• Visual:

---

Administrator Management Dashboard

1. Admin Control Board

A robust dashboard showing analytics for total, scheduled, pending, and cancelled appointments. Administrators can search, filter, and schedule/cancel appointments dynamically, triggering automated SMS messages to patients.

• Featured Page: Admin Dashboard View
• Visual:

---

Technology Stack

Core Technologies

• Next.js 14 (App Router): Powers React Server Components (RSC), serverless actions, API route handlers, and optimized page loads.
• React 18: Standard UI component framework.
• TypeScript: Ensures static typing, validation schemas, and structural integrity.
• Tailwind CSS: Manages layout grids, dark/light themes, and custom animations.

Key Integrations & APIs

• Appwrite (node-appwrite):
  • Databases: Manages user, patient, and appointment schemas and collections.
  • Storage (Buckets): Securely stores client uploaded medical files and ID documents.
  • Messaging: Triggers SMS notifications directly to user phones using Appwrite SMS dispatchers.
• Sentry (@sentry/nextjs): Provides application monitoring, real-time error logging, performance insights, and transaction tracing on both client and server boundaries.

Libraries & UI Components

• Radix UI Primitives: Headless, highly accessible UI elements (Dialogs, Selectors, Dropdowns, Radio groups).
• Zod: Declares strict data validation schemas for patient forms and appointment structures.
• React Hook Form: Handles client form state, validations, and submission lifecycles.
• React Datepicker & Day Picker: Delivers localized interactive calendars.
• React Dropzone: Facilitates drag-and-drop file/document upload inputs.
• TanStack React Table: Renders performant, sortable, and filterable tables inside the Admin panel.
• Lucide Icons: Clean UI iconography.

---

Getting Started

Prerequisites

• Node.js (v18.x or newer)
• Active Appwrite Cloud Account (or self-hosted Appwrite instance)
• Sentry Account & Organization DSN

Installation & Setup

1. Clone the repository:

   git clone <repository-url>
   cd medisave

2. Install dependencies:

   npm install

3. Configure environment variables: Create a .env.local file in the root directory and populate it with your keys:

   # Appwrite Config
   NEXT_PUBLIC_ENDPOINT="https://cloud.appwrite.io/v1"
   PROJECT_ID="your-appwrite-project-id"
   API_KEY="your-appwrite-api-key"
   DATABASE_ID="your-appwrite-database-id"
   PATIENT_COLLECTION_ID="your-patient-collection-id"
   DOCTOR_COLLECTION_ID="your-doctor-collection-id"
   APPOINTMENT_COLLECTION_ID="your-appointment-collection-id"
   NEXT_PUBLIC_BUCKET_ID="your-storage-bucket-id"
   
   # Sentry Config
   NEXT_PUBLIC_SENTRY_DSN="your-sentry-dsn"
   SENTRY_AUTH_TOKEN="your-sentry-auth-token"

4. Run the development server:

   npm run dev

---

License

This project is licensed under a Non-Commercial License.

• Modification & Distribution: Anyone is free to clone, modify, build upon, and distribute this codebase for educational, testing, or personal purposes.
• Commercial Restrictions: You are strictly prohibited from selling, licensing, or distributing this software, any portion thereof, or any derivative works for commercial gain or monetary profit.