github.com/adrianhajdin/healthcare @main

<a href="https://youtu.be/lEflo_sc82g?feature=shared" target="_blank">
  <img src="https://github.com/adrianhajdin/healthcare/assets/151519281/a7dd73b6-93de-484d-84e0-e7f4e299167b" alt="Project Banner">
</a>







<img src="https://img.shields.io/badge/-Next_JS-black?style=for-the-badge&logoColor=white&logo=nextdotjs&color=000000" alt="nextdotjs" />
<img src="https://img.shields.io/badge/-TypeScript-black?style=for-the-badge&logoColor=white&logo=typescript&color=3178C6" alt="typescript" />
<img src="https://img.shields.io/badge/-Tailwind_CSS-black?style=for-the-badge&logoColor=white&logo=tailwindcss&color=06B6D4" alt="tailwindcss" />
<img src="https://img.shields.io/badge/-Appwrite-black?style=for-the-badge&logoColor=white&logo=appwrite&color=FD366E" alt="appwrite" />

A HealthCare Management System

 Build this project step by step with our detailed tutorial on <a href="https://www.youtube.com/@javascriptmastery/videos" target="_blank"><b>JavaScript Mastery</b></a> YouTube. Join the JSM family!

📋 Table of Contents

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start
5. 🕸️ Snippets (Code to Copy)
6. 🔗 Assets
7. 🚀 More

🚨 Tutorial

This repository contains the code corresponding to an in-depth tutorial available on our YouTube channel, JavaScript Mastery.

If you prefer visual learning, this is the perfect resource for you. Follow our tutorial to learn how to build projects like these step-by-step in a beginner-friendly manner!

🤖 Introduction

A healthcare patient management application that allows patients to easily register, book, and manage their appointments with doctors, featuring administrative tools for scheduling, confirming, and canceling appointments, along with SMS notifications, all built using Next.js.

If you're getting started and need assistance or face any bugs, join our active Discord community with over 34k+ members. It's a place where people help each other out.

⚙️ Tech Stack

• Next.js
• Appwrite
• Typescript
• TailwindCSS
• ShadCN
• Twilio

🔋 Features

👉 Register as a Patient: Users can sign up and create a personal profile as a patient.

👉 Book a New Appointment with Doctor: Patients can schedule appointments with doctors at their convenience and can book multiple appointments.

👉 Manage Appointments on Admin Side: Administrators can efficiently view and handle all scheduled appointments.

👉 Confirm/Schedule Appointment from Admin Side: Admins can confirm and set appointment times to ensure they are properly scheduled.

👉 Cancel Appointment from Admin Side: Administrators have the ability to cancel any appointment as needed.

👉 Send SMS on Appointment Confirmation: Patients receive SMS notifications to confirm their appointment details.

👉 Complete Responsiveness: The application works seamlessly on all device types and screen sizes.

👉 File Upload Using Appwrite Storage: Users can upload and store files securely within the app using Appwrite storage services.

👉 Manage and Track Application Performance Using Sentry: The application uses Sentry to monitor and track its performance and detect any errors.

and many more, including code architecture and reusability

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone https://github.com/adrianhajdin/healthcare.git
cd healthcare

Installation

Install the project dependencies using npm:

npm install

Set Up Environment Variables

Create a new file named .env.local in the root of your project and add the following content:

#APPWRITE
NEXT_PUBLIC_ENDPOINT=https://cloud.appwrite.io/v1
PROJECT_ID=
API_KEY=
DATABASE_ID=
PATIENT_COLLECTION_ID=
APPOINTMENT_COLLECTION_ID=
NEXT_PUBLIC_BUCKET_ID=

NEXT_PUBLIC_ADMIN_PASSKEY=111111

Replace the placeholder values with your actual Appwrite credentials. You can obtain these credentials by signing up on the Appwrite website.

Running the Project

npm run dev

Open http://localhost:3000 in your browser to view the project.

🕸️ Snippets

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}",
  ],
  prefix: "",
  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')",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
        "caret-blink": {
          "0%,70%,100%": { opacity: "1" },
          "20%,50%": { opacity: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
        "caret-blink": "caret-blink 1.25s ease-out infinite",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config;

export default config;

app/globals.css

```css @tailwind base; @tailwind components; @tailwind utilities;

/ ========================================== TAILWIND STYLES / @layer base { / Remove scrollbar / .remove-scrollbar::-webkit-scrollbar { width: 0px; height: 0px; border-radius: 0px; }

.remove-scrollbar::-webkit-scrollbar-track { background: transparent; }

.remove-scrollbar::-webkit-scrollbar-thumb { background: transparent; border-radius: 0px; }

.remove-scrollbar::-webkit-scrollbar-thumb:hover { / background: #1e2238; / background: transparent; } }

@layer utilities { / ===== UTILITIES / .sidebar { @apply remove-scrollbar w-full max-w-72 flex-col overflow-auto bg-black-800 px-7 py-10; }

.left-sidebar { @apply hidden lg:flex; }

.right-sidebar { @apply hidden xl:flex; }

.clip-text { @apply bg-clip-text text-transparent; }

.bg-image { @apply bg-black-900 bg-light-rays bg-cover bg-no-repeat; }

.header { @apply text-32-bold md:text-36-bold; }

.sub-header { @apply text-18-bold md:text-24-bold; }

.container { @apply relative flex-1 overflow-y-auto px-[5%]; }

.sub-container { @apply mx-auto flex size-full flex-col py-10; }

.side-img { @apply hidden h-full object-cover md:block; }

.copyright { @apply text-14-regular justify-items-end text-center text-dark-600 xl:text-left; }

/ ==== SUCCESS / .success-img { @apply m-auto flex flex-1 flex-col items-center justify-between gap-10 py-10; }

.request-details { @apply flex w-full flex-col items-center gap-8 border-y-2 border-dark-400 py-8 md:w-fit md:flex-row; }

/ ===== ADMIN / .admin-header { @apply sticky top-3 z-20 mx-3 flex items-center justify-between rounded-2xl bg-dark-200 px-[5%] py-5 shadow-lg xl:px-12; }

.admin-main { @apply flex flex-col items-center space-y-6 px-[5%] pb-12 xl:space-y-12 xl:px-12; }

.admin-stat { @apply flex w-full flex-col justify-between gap-5 sm:flex-row xl:gap-10; }

/ ==== FORM / .radio-group { @apply flex h-full flex-1 items-center gap-2 rounded-md border border-dashed border-dark-500 bg-dark-400 p-3; }

.checkbox-label { @apply cursor-pointer text-sm font-medium text-dark-700 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 md:leading-none; }

/ ==== File Upload / .file-upload { @apply text-12-regular flex cursor-pointer flex-col items-center justify-center gap-3 rounded-md border border-dashed border-dark-500 bg-dark-400 p-5; }

.file-upload_label { @apply flex flex-col justify-center gap-2 text-center text-dark-600; }

/ ==== Stat Card / .stat-card { @apply flex flex-1 flex-col gap-6 rounded-2xl bg-cover p-6 shadow-lg; }

/ ==== Status Badge / .status-badge { @apply flex w-fit items-center gap-2 rounded-full px-4 py-2; }

/ Data Table / .data-table { @apply z-10 w-full overflow-hidden rounded-lg border border-dark-400 shadow-lg; }

.table-actions { @apply flex w-full items-center justify-between space-x-2 p-4; }

/ ===== ALIGNMENTS / .flex-center { @apply flex items-center justify-center; }

.flex-between { @apply flex items-center justify-between; }

/ ===== TYPOGRAPHY / .text-36-bold { @apply text-[36px] leading-[40px] font-bold; }

.text-24-bold { @apply text-[24px] leading-[28px] font-bold; }

.text-32-bold { @apply text-[32px] leading-[36px] font-bold; }

.text-18-bold { @apply text-[18px] leading-[24px] font-bold; }

.text-16-semibold { @apply text-[16px] leading-[20px] font-semibold; }

.text-16-regular { @apply text-[16px] leading-[20px] font-normal; }

.text-14-medium { @apply text-[14px] leading-[18px] font-medium; }

.text-14-regular { @apply text-[14px] leading-[18px] font-normal; }

.text-12-regular { @apply text-[12px] leading-[16px] font-normal; }

.text-12-semibold { @apply text-[12px] leading-[16px] font-semibold; }

/ ===== SHADCN OVERRIDES / .shad-primary-btn { @apply bg-green-500 text-white !important; }

.shad-danger-btn { @apply bg-red-700 text-white !important; }

.shad-gray-btn { @apply border border-dark-500 cursor-pointer bg-dark-400 text-white !important; }

.shad-input-label { @apply text-14-medium text-dark-700 !important; }

.shad-input { @apply bg-dark-400 placeholder:text-dark-600 border-dark-500 h-11 focus-visible:ring-0 focus-visible:ring-offset-0 !important; }

.shad-input-icon { @apply bg-dark-400 placeholder:text-dark-600 border-dark-500 h-11 focus-visible:ring-0 focus-visible:ring-offset-0 !important; }

.shad-textArea { @apply bg-dark-400 placeholder:text-dark-600 border-dark-500 focus-visible:ring-0 focus-visible:ring-offset-0 !important; }

.shad-combobox-item { @apply data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 !important; }

.shad-combobox-trigger { @apply h-11 !important; }

.shad-select-trigger { @apply bg-dark-400 placeholder:text-dark-600 border-dark-500 h-11 focus:ring-0 focus:ring-offset-0 !important; }

.shad-select-content { @apply bg-dark-400 border-dark-500 !important; }

.shad-dialog { @apply bg-dark-400 border-dark-500 !important; }

.shad-dialog button { @apply focus:ring-0 focus:ring-offset-0 focus-visible:border-none focus-visible:outline-none focus-visible:ring-transparent focus-visible:ring-offset-0 !important; }

.shad-error { @apply text-red-400 !important; }

.shad-table { @apply rounded-lg overflow-hidden !important; }

.shad-table-row-header { @apply border-b border-dark-400 text-light-200 hover:bg-transparent !important; }

.shad-table-row { @apply border-b border-dark-400 text-light-200 !important; }

.shad-otp { @apply w-full flex justify-between !important; }

.shad-otp-slot { @apply text-36-bold justify-center flex border border-dark-500 rounded-lg size-16 gap-4 !important; }

.shad-alert-dialog { @apply space-y-5 bg-dark-400 border-dark-500 outline-none !important; }

.shad-sheet-content button { @apply top-2 focus:ring-0 focus:ring-offset-0 focus-visible:border-none focus-visible:outline-none focus-visible:ring-transparent focus-visible:ring-offset-0 !important; }

/ ===== REACT PHONE NUMBER INPUT OVERRIDES / .input-phone { @apply mt-2 h-11 rounded-md px-3 text-sm border bg-dark-400 placeholder:text-dark-600 border-dark-500 !important; }

/ ===== REACT DATE PICKER OVERRIDES / .date-picker { @apply