HealthCare Doctor Appointment Featuring Admin Dashboard Notifications (Approve/Decline) - Next.js Web Application

This repository contains a Next.js application for managing healthcare appointments, patient data, and notifications. It features a user-friendly interface for patients and an admin dashboard for appointment management, with SMS notifications powered by Twilio and file storage using Appwrite.

Project Overview

It is a comprehensive solution for clinics and hospitals to manage patient data, appointments, notifications, and more. It provides:

User registration and authentication
Patient profiles and medical details
Doctor and appointment management
Admin dashboard for appointment control
Automated SMS notifications via Twilio
File storage using Appwrite
Performance/error monitoring with Sentry
Responsive design for all devices

Live-Demo: https://healthcare-arnob.vercel.app/

Key Features

Patient Registration: Users sign up and create detailed profiles with medical and contact information.
Appointment Booking: Patients schedule appointments with doctors, select time slots, and provide visit reasons.
Admin Dashboard: Admins manage, confirm, schedule, or cancel appointments and view patient records.
SMS Notifications: Patients receive SMS confirmations for appointments using Twilio.
File Upload: Secure upload and storage of files (e.g., patient docs) via Appwrite.
Performance Monitoring: Integrated Sentry for tracking errors and performance.
Responsive UI: Fully responsive for desktop, tablet, and mobile.
Form Validation: Robust validation with Zod and react-hook-form.
Modern UI: Built with Shadcn-UI and TailwindCSS for a clean, professional look.

Technology Stack

Frontend: Next.js, React, TypeScript, TailwindCSS, Shadcn-UI
Backend/Services: Appwrite (Database + Storage), Twilio (SMS), Sentry (Monitoring)
Validation: Zod, react-hook-form
Utilities: clsx, tailwind-merge, Radix UI, Lucide Icons

Project Structure

The project is organized for scalability and maintainability. Here’s a breakdown:

/app                # Next.js app directory (pages, components, layouts)
  /globals.css      # Global styles
/components         # Reusable UI components (forms, modals, tables, UI elements)
/constants          # Constant values, enums, lists (e.g., doctors, status icons)
/lib                # Utility functions (date formatting, validation, Appwrite config, actions)
/types              # TypeScript type and interface definitions
/public/assets      # Static images, icons, backgrounds

Example File Structure:

tailwind.config.ts - TailwindCSS configuration
types/index.d.ts - TypeScript types for forms and models
lib/utils.ts - Utility functions (formatting, encryption, etc.)
lib/validation.ts - Zod validation schemas
constants/index.ts - App constants (doctor list, identification types, etc.)

Component & API Walkthrough

Main Components

PatientForm: Handles patient registration and validation. Uses Zod for schema validation and react-hook-form for form state.
AppointmentForm: Schedules, updates, and cancels appointments. Integrates with Appwrite for backend operations.
RegisterForm: Full patient registration with medical and contact details, including file uploads.
AppointmentModal: Modal for scheduling/cancelling appointments, using Radix UI Dialog.
FileUploader: Secure file upload for patient documents, using Appwrite Storage.
StatusBadge, StatCard, SubmitButton: UI elements for status, stats, and actions.
ThemeProvider: Manages dark/light theme using next-themes.

API & Actions

Appwrite Config (lib/appwrite.config.ts): Centralized Appwrite client setup for database, users, messaging, and storage.
Actions (lib/actions/): Functions for patient and appointment CRUD operations, using Appwrite SDK.
Validation (lib/validation.ts): Zod schemas for form validation, including async checks for email/phone uniqueness.
Constants (constants/index.ts): Lists for gender, identification types, doctor names, and default form values.

Routing

/ - Home page with patient registration.
/admin - Admin dashboard for managing appointments.
/patients/[userId]/register - Patient registration page.
/patients/[userId]/new-appointment - Appointment booking page.
/patients/[userId]/new-appointment/success - Success page after booking.

Getting Started

Installation

Clone the repository:

git clone https://github.com/arnobt78/HealthCare-Doctor-Appointment--NextJS.git
cd HealthCare-Doctor-Appointment--NextJS

Install dependencies:
```
npm install
# or
yarn install
```

Running the App

Start the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Visit http://localhost:3000 to view the app.

Environment Variables

Create a .env.local file in your project root and add:

# APPWRITE
NEXT_PUBLIC_ENDPOINT=https://cloud.appwrite.io/v1
NEXT_PUBLIC_PROJECT_ID=
NEXT_PUBLIC_API_KEY=
NEXT_PUBLIC_DATABASE_ID=
NEXT_PUBLIC_PATIENT_COLLECTION_ID=
NEXT_PUBLIC_DOCTOR_COLLECTION_ID=
NEXT_PUBLIC_APPOINTMENT_COLLECTION_ID=
NEXT_PUBLIC_BUCKET_ID=

NEXT_PUBLIC_ADMIN_PASSKEY=123123

Replace the placeholder values with your actual Appwrite credentials.

Appwrite Setup

Sign up at Appwrite.
Create a project and note the Project ID and API Key.
Create a database (e.g., patient-db) with three collections:
- patient
- doctor
- appointment
Attributes for patient:
- email, phone, irerId, name, privacyConsent (Required)
- gender, birthDate, address, occupation, emergencyContactName, emergencyContactNumber, primaryPhysician, insuranceProvider, insurancePolicyNumber, allergies, currentMedication, familyMedicalHistory, pastMedicalHistory, identificationType, identificationNumber, identificationDocument
Attributes for appointment:
- Relationship: Many-to-One with patient
- schedule, reason, note, primaryPhysician, status, cancellationReason

See Appwrite Docs for full details.

Twilio Setup

Sign up at Twilio.
Get your Account SID, Auth token, and Sender number.
Add these to your Appwrite project's Messaging > Twilio integration.
For Appwrite + Twilio docs, see: Appwrite Messaging & Twilio

Sentry Setup

For error and performance monitoring:

Sign up at Sentry.
Create a new project and get your DSN.

Sentry Official Docs

Functional Walkthrough

1. Register as a Patient

New users register, fill out medical and contact details, and consent to privacy policies. The registration form uses Zod for validation and react-hook-form for state management.

Example:

// components/forms/PatientForm.tsx
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { UserFormValidation } from "@/lib/validation";

const form = useForm({
  resolver: zodResolver(UserFormValidation),
  defaultValues: { name: "", email: "", phone: "" },
});

2. Book Appointments

Patients view available doctors, select time slots, and provide the reason for their visit. Multiple appointments can be managed. The appointment form integrates with Appwrite for backend operations.

Example:

// components/forms/AppointmentForm.tsx
import { useForm } from "react-hook-form";
import { getAppointmentSchema } from "@/lib/validation";

const form = useForm({
  resolver: zodResolver(getAppointmentSchema()),
  defaultValues: { schedule: new Date(), reason: "" },
});

3. Admin Panel

Admins can:

View all appointments
Confirm or schedule appointments
Cancel appointments (with SMS notifications)
Manage patient records and uploaded documents

Example:

// app/admin/page.tsx
import { StatCard } from "@/components/StatCard";
import { DataTable } from "@/components/table/DataTable";

<StatCard type="appointments" count={appointments.scheduledCount} label="Scheduled appointments" />
<DataTable columns={Columns} data={appointments.list} />

4. Notifications

Patients receive SMS notifications on successful appointment confirmation using Twilio integration via Appwrite Messaging.

Example:

// lib/appwrite.config.ts
export const messaging = new sdk.Messaging(client);
// Use messaging.send() to trigger SMS notifications

5. Performance and Error Tracking

Sentry integration monitors errors and performance bottlenecks. All major pages and API routes are instrumented with Sentry.

Example:

// sentry.client.config.ts
import * as Sentry from "@sentry/nextjs";
Sentry.init({ dsn: process.env.SENTRY_DSN });

6. File Upload

Users can upload documents (e.g., insurance, ID) securely using the FileUploader component and Appwrite Storage.

Example:

// components/FileUploader.tsx
import { storage } from "@/lib/appwrite.config";
const uploadFile = async (file: File) => {
  await storage.createFile(BUCKET_ID, file.name, file);
};

Code Examples & Reusability

Utility Function

// lib/utils.ts
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Patient Form Validation

// lib/validation.ts
export const UserFormValidation = z.object({
  name: z.string().min(2).max(50),
  email: z.string().email().refine(async (email) => !(await checkEmailExists(email)), "Email already exists"),
  phone: z.string().refine(async (phone) => !(await checkPhoneExists(phone)), "Phone already exists"),
});

Reusing Components

CustomFormField: Use for any form field with validation and custom UI.
FileUploader: Use for uploading files in any form.
StatusBadge: Display status for appointments, patients, etc.

API Usage

// lib/appwrite.config.ts
const client = new sdk.Client();
client.setEndpoint(ENDPOINT!).setProject(NEXT_PUBLIC_PROJECT_ID!).setKey(NEXT_PUBLIC_API_KEY!);
export const databases = new sdk.Databases(client);
export const users = new sdk.Users(client);
export const messaging = new sdk.Messaging(client);
export const storage = new sdk.Storage(client);

Troubleshooting & Resources

Node.js Installation: Download Node.js
Appwrite Docs: Appwrite Documentation
Twilio Docs: Twilio Messaging
Sentry Docs: Sentry Monitoring
YouTube Tutorial: HealthCare App with Next.js & Appwrite
CORS Issues with Appwrite: Solving CORS Errors

Keywords

Next.js, HealthCare, Patient Management, Appointment, Twilio, Appwrite, Sentry, TypeScript, TailwindCSS, Shadcn-UI, Zod, Admin Dashboard, File Upload, Responsive Design, SMS Notification, Medical App, Full Stack, Clinic, Hospital, Database, Form Validation, React

Conclusion

This project is designed for rapid development and deployment of healthcare management solutions. Its modular structure, reusable components, and integration with modern cloud services make it ideal for clinics, hospitals, and developers looking to build scalable medical applications.

Happy Coding! 🎉

Feel free to use this project repository and extend this project further!

If you have any questions or want to share your work, reach out via GitHub or my portfolio at https://arnob-mahmud.vercel.app/.

Enjoy building and learning! 🚀

Thank you! 😊

Name		Name	Last commit message	Last commit date
Latest commit History 27 Commits
.vscode		.vscode
app		app
components		components
constants		constants
lib		lib
public		public
types		types
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
README.md		README.md
components.json		components.json
instrumentation.ts		instrumentation.ts
next.config.mjs		next.config.mjs
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
sentry.client.config.ts		sentry.client.config.ts
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

arnobt78/HealthCare-Doctor-Appointment--NextJS-FullStack

Folders and files

Latest commit

History

Repository files navigation

HealthCare Doctor Appointment Featuring Admin Dashboard Notifications (Approve/Decline) - Next.js Web Application

Project Overview

Table of Contents

Key Features

Technology Stack

Project Structure

Component & API Walkthrough

Main Components

API & Actions

Routing

Getting Started

Installation

Running the App

Environment Variables

Appwrite Setup

Twilio Setup

Sentry Setup

Functional Walkthrough

1. Register as a Patient

2. Book Appointments

3. Admin Panel

4. Notifications

5. Performance and Error Tracking

6. File Upload

Code Examples & Reusability

Utility Function

Patient Form Validation

Reusing Components

API Usage

Troubleshooting & Resources

Keywords

Conclusion

Happy Coding! 🎉

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Languages

Packages