HealthCare-Doctor-Appointment--NextJS

HealthCare is a full-stack healthcare patient management application designed for clinics and hospitals. Built using Next.js and TypeScript, it streamlines patient registration, appointment scheduling, admin management, notifications, and file uploads—all with a modern, responsive UI.

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

---

Table of Contents

• Project Overview
• Key Features
• Technology Stack
• Project Structure
• Getting Started
  • Installation
  • Running the App
  • Environment Variables
  • Appwrite Setup
  • Twilio Setup
  • Sentry Setup
• Functional Walkthrough
• Code Examples
• Troubleshooting & Resources
• Keywords

---

Project Overview

HealthCare--NextJS enables clinics to manage patient data, appointments, and notifications efficiently. 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

---

Key Features

• Patient Registration: Users can sign up and create detailed profiles.
• Appointment Booking: Patients easily schedule appointments with doctors.
• Admin Dashboard: Admins manage, confirm, schedule, or cancel appointments.
• SMS Notifications: Patients receive SMS confirmations for appointments.
• 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.
• Modern UI: Built with Shadcn-UI and TailwindCSS.

---

Technology Stack

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

---

Project Structure

/app                # Next.js app directory (pages, components, layouts)
  /globals.css      # Global styles
/components         # Reusable UI components
/constants          # Constant values, enums, lists (e.g., doctors, status icons)
/lib                # Utility functions (e.g., date formatting, encryption, validation)
/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.)

---

Getting Started

Installation

1. Clone the repository:

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

2. 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_APPOINTMENT_COLLECTION_ID=
NEXT_PUBLIC_BUCKET_ID=

NEXT_PUBLIC_ADMIN_PASSKEY=123123

Replace the placeholder values with your actual Appwrite credentials.

Appwrite Setup

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

See Appwrite Docs for full details.

Twilio Setup

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

Sentry Setup

For error and performance monitoring:

• Sentry Official Docs

---

Functional Walkthrough

1. Register as a Patient:
   New users can register, fill out medical and contact details, and consent to privacy policies.

2. Book Appointments:
   Patients can view available doctors, select time slots, and provide the reason for their visit. Multiple appointments can be managed.

3. Admin Panel:
   Admins can:

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

4. Notifications:

   • Patients receive SMS notifications on successful appointment confirmation.

5. Performance and Error Tracking:

   • Sentry integration monitors errors and performance bottlenecks.

6. File Upload:

   • Users can upload documents (e.g., insurance, ID) securely.

---

Code Examples

tailwind.config.ts

import type { Config } from "tailwindcss";
const { fontFamily } = require("tailwindcss/defaultTheme");

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: { "2xl": "1400px" },
    },
    extend: {
      colors: {
        green: { 500: "#24AE7C", 600: "#0D2A1F" },
        blue: { 500: "#79B5EC", 600: "#152432" },
        red: { 500: "#F37877", 600: "#3E1716", 700: "#F24E43" },
        light: { 200: "#E8E9E9" },
        dark: {
          200: "#0D0F10", 300: "#131619", 400: "#1A1D21",
          500: "#363A3D", 600: "#76828D", 700: "#ABB8C4"
        }
      },
      fontFamily: { sans: ["var(--font-sans)", ...fontFamily.sans] },
      backgroundImage: {
        appointments: "url('/assets/images/appointments-bg.png')",
        pending: "url('/assets/images/pending-bg.png')",
        cancelled: "url('/assets/images/cancelled-bg.png')"
      },
      // ...more config
    }
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config;

export default config;

lib/utils.ts

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

export const formatDateTime = (dateString: Date | string) => {
  // returns formatted date/time objects
};

types/index.d.ts

declare type Gender = "Male" | "Female" | "Other";
declare type Status = "pending" | "scheduled" | "cancelled";

declare interface RegisterUserParams {
  name: string;
  email: string;
  phone: string;
  // ...additional fields
}

---

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

---

Note:
This README preserves all original screenshot images and provides an updated, detailed project overview for easier understanding and onboarding. For further customization or advanced deployment, please consult the official documentation of each integrated technology.