Skip to content
BranchesTags

Latest commit

 

History

22 Commits

Folders and files

NameName
Last commit message
Last commit date
app
app
 
 
components
components
 
 
constants
constants
 
 
lib
lib
 
 
public
public
 
 
screenshots
screenshots
 
 
types
types
 
 
.gitignore
.gitignore
 
 
AGENTS.md
AGENTS.md
 
 
CLAUDE.md
CLAUDE.md
 
 
README.md
README.md
 
 
components.json
components.json
 
 
eslint.config.mjs
eslint.config.mjs
 
 
instrumentation-client.ts
instrumentation-client.ts
 
 
instrumentation.ts
instrumentation.ts
 
 
next.config.ts
next.config.ts
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 
postcss.config.js
postcss.config.js
 
 
postcss.config.mjs
postcss.config.mjs
 
 
sentry.edge.config.ts
sentry.edge.config.ts
 
 
sentry.server.config.ts
sentry.server.config.ts
 
 
tailwind.config.ts
tailwind.config.ts
 
 
tsconfig.json
tsconfig.json
 
 

Repository files navigation

Patient Management System

A modern healthcare appointment management system built using Next.js, TypeScript, Appwrite, and Tailwind CSS. The platform streamlines patient registration, appointment scheduling, administrative workflows, SMS notifications, and secure healthcare data management.

Next.js React TypeScript Tailwind CSS Appwrite License

Live Demo

🌐 Live Website

https://patient-management-system-qoi5.vercel.app/

📂 GitHub Repository

https://github.com/IdushaGaravi/Patient-Management-System

Features at a Glance

  • Patient Registration System
  • Patient Login System
  • Appointment Scheduling System
  • Appointment Approval Workflow
  • Appointment Cancellation Workflow
  • Administrative Dashboard
  • Admin Passkey Verification
  • SMS Notifications for Appointment Updates
  • Secure File Upload System
  • Cloud Backend Services using Appwrite
  • Form Validation using Zod
  • Error Monitoring using Sentry
  • Responsive User Interface
  • Modern Next.js Architecture
  • Type-Safe Development with TypeScript
  • Healthcare-Oriented UI Design

Overview

The Patient Management System is a modern healthcare appointment management platform designed to simplify and enhance patient interactions with healthcare providers.

The system enables patients to:

  • Register securely.
  • Login to manage appointments.
  • Submit medical information.
  • Upload required healthcare documents.
  • Schedule appointments.
  • Receive SMS notifications when appointments are approved or cancelled.

Healthcare administrators can:

  • Access a secure administrative dashboard.
  • Verify their identity using an admin passkey.
  • Approve or cancel appointment requests.
  • Efficiently manage appointment workflows.

This project demonstrates practical experience in:

  • Full-Stack Web Development.
  • Healthcare Management Systems.
  • Cloud Backend Services.
  • Secure Authentication and Authorization.
  • SMS Notification Services.
  • Responsive Application Development.
  • Modern UI Component Design.
  • Type-Safe Development using TypeScript.

Tech Stack

Technology Version Purpose
Next.js 15.x Full-Stack Framework
React 19.x Frontend Library
TypeScript 5.x Type Safety
Appwrite Latest Backend Services
Tailwind CSS 4.x Styling
React Hook Form Latest Form Management
Zod Latest Form Validation
React Datepicker Latest Appointment Scheduling
React Dropzone Latest File Uploads
TanStack React Table Latest Administrative Dashboard
Sentry Latest Error Monitoring
Lucide React Latest Icons
Twilio Latest SMS Notification Services

Technologies Used

Frontend

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • Lucide React

Backend Services

  • Appwrite

Form Management

  • React Hook Form
  • Zod

Notification Services

  • Twilio SMS API

Additional Libraries

  • React Datepicker
  • React Dropzone
  • TanStack React Table
  • Sentry

Application Showcase

All screenshots are stored inside the screenshots folder.

Patient Login

Registered patients can securely log in to access healthcare services and appointment information.

Patient Login

Patient Registration

Patients can securely register by providing their personal and medical information.

Patient Registration

Appointment Scheduling

Patients can conveniently schedule appointments with healthcare providers.

Appointment Scheduling

Appointment Confirmation

Patients are notified when their appointments are successfully confirmed.

Appointment Confirmation

SMS Notifications

Patients receive SMS notifications whenever their appointments are approved or cancelled.

SMS Notifications

Admin Access Verification

Administrators are required to enter a secure passkey before accessing the administrative dashboard.

Admin Access Verification

Administrative Dashboard

Healthcare administrators can efficiently manage patient appointments and requests, view scheduled, pending, and cancelled appointment counts at a glance.

Admin Dashboard

Schedule Appointment (Admin)

Admins can schedule a patient's appointment by selecting a doctor, date/time, reason, and notes.

Schedule Appointment

Cancel Appointment (Admin)

Admins can cancel a pending or scheduled appointment by providing a reason for cancellation.

Cancel Appointment

Responsive Design

The application is fully responsive across desktop and mobile devices.

Responsive Design

Core Features

Patient Management

  • Patient Registration
  • Patient Login
  • Medical Information Collection
  • Secure Document Uploads

Appointment Management

  • Schedule Appointments
  • Appointment Approval Workflow
  • Appointment Cancellation Workflow
  • Appointment Status Tracking

Administrative Features

  • Passkey Protected Admin Access
  • Appointment Management Dashboard
  • Manage Appointment Requests
  • Patient Information Management

SMS Notification System

  • Appointment Confirmation Notifications
  • Appointment Cancellation Notifications
  • Real-Time Appointment Updates

Security Features

  • Passkey Protected Admin Access
  • Secure Cloud Storage using Appwrite
  • Input Validation using Zod
  • Environment Variable Protection
  • Type-Safe Development

User Interface

  • Responsive Design
  • Modern Healthcare UI
  • Accessible Components

Project Structure

Patient-Management-System/
│
├── app/
├── components/
├── constants/
├── lib/
├── public/
├── screenshots/
│
├── package.json
├── next.config.ts
├── tailwind.config.ts
├── tsconfig.json
├── README.md
└── .env.local

Application Workflow

                    Patient Registration
                              │
                              ▼
                          Patient Login
                              │
                              ▼
                    Upload Medical Information
                              │
                              ▼
                       Schedule Appointment
                              │
                              ▼
                      Appointment Request
                              │
                              ▼
                     Admin Access Verification
                              │
                              ▼
                    Appointment Approval / Cancellation
                              │
                              ▼
                        SMS Notification Sent
                              │
                              ▼
                     Appointment Confirmation

Installation

Clone the Repository

git clone https://github.com/IdushaGaravi/Patient-Management-System.git

cd Patient-Management-System

Install Dependencies

npm install

Environment Variables

Create a .env.local file in the root directory and configure the following variables:

NEXT_PUBLIC_ENDPOINT=

PROJECT_ID=

API_KEY=

DATABASE_ID=

PATIENT_COLLECTION_ID=

DOCTOR_COLLECTION_ID=

APPOINTMENT_COLLECTION_ID=

NEXT_PUBLIC_BUCKET_ID=

NEXT_PUBLIC_ADMIN_PASSKEY=

TWILIO_ACCOUNT_SID=

TWILIO_AUTH_TOKEN=

TWILIO_PHONE_NUMBER=

Configure these variables using your Appwrite and Twilio project settings.

Running the Project

Start the development server:

npm run dev

The application will run locally at:

http://localhost:3000

Production Build

Generate the production build:

npm run build

Run the production server:

npm start

Key Concepts Implemented

  • Full-Stack Development with Next.js
  • Healthcare Appointment Management Systems
  • Cloud Backend Integration using Appwrite
  • Secure Authentication and Authorization
  • SMS Notification Integration
  • Appointment Scheduling Workflow
  • Secure File Upload Management
  • Type-Safe Development with TypeScript
  • Form Validation using Zod
  • Responsive Web Design
  • Modern Component Architecture

What I Learned

This project provided valuable experience in:

  • Building modern healthcare management systems.
  • Developing full-stack applications using Next.js.
  • Integrating Appwrite cloud services.
  • Implementing appointment scheduling workflows.
  • Designing secure authentication mechanisms.
  • Sending real-time SMS notifications.
  • Managing secure healthcare document uploads.
  • Applying TypeScript best practices.
  • Creating scalable and maintainable architectures.
  • Developing responsive and accessible user interfaces.

Future Improvements

Planned enhancements include:

  • Email Notifications
  • Online Consultation Support
  • Doctor Availability Management
  • Medical Report Management
  • Online Payments
  • Patient Medical History Tracking
  • Multi-Language Support
  • Role-Based Authentication
  • CI/CD Pipeline Integration
  • Progressive Web App (PWA) Support

Author

Idusha Garavi

  • Undergraduate Software Engineering Student
  • Full-Stack Web Development Enthusiast
  • Passionate about Cloud Technologies and Modern Web Applications

License

This project is intended for educational and portfolio purposes.

Feel free to fork the repository and explore the implementation.

Support

If you found this project useful, consider giving it a ⭐ on GitHub.

GitHub Repository:

https://github.com/IdushaGaravi/Patient-Management-System

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages