🎆Welcome!🎉
26 |Start the day with managing new appointments
27 |
20 |
34 | )
35 | }
36 | export default StatCard
37 |
--------------------------------------------------------------------------------
/types/appwrite.types.ts:
--------------------------------------------------------------------------------
1 | import { Models } from "node-appwrite";
2 |
3 | export interface Patient extends Models.Document {
4 | userId: string;
5 | name: string;
6 | email: string;
7 | phone: string;
8 | birthDate: Date;
9 | gender: Gender;
10 | address: string;
11 | occupation: string;
12 | emergencyContactName: string;
13 | emergencyContactNumber: string;
14 | primaryPhysician: string;
15 | insuranceProvider: string;
16 | insurancePolicyNumber: string;
17 | allergies: string | undefined;
18 | currentMedication: string | undefined;
19 | familyMedicalHistory: string | undefined;
20 | pastMedicalHistory: string | undefined;
21 | identificationType: string | undefined;
22 | identificationNumber: string | undefined;
23 | identificationDocument: FormData | undefined;
24 | privacyConsent: boolean;
25 | }
26 |
27 | export interface Appointment extends Models.Document {
28 | patient: Patient;
29 | schedule: Date;
30 | status: Status;
31 | primaryPhysician: string;
32 | reason: string;
33 | note: string;
34 | userId: string;
35 | cancellationReason: string | null;
36 | }
37 |
--------------------------------------------------------------------------------
/components/ui/checkbox.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
5 | import { Check } from "lucide-react"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const Checkbox = React.forwardRef<
10 | React.ElementRef
21 |
30 | {count}
29 |{label}
31 | 32 | 33 |
12 | {isAdmin &&
16 |
36 |
44 | );
45 | }
46 |
--------------------------------------------------------------------------------
/public/assets/icons/close.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "medical_schedule_app",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint"
10 | },
11 | "dependencies": {
12 | "@hookform/resolvers": "^3.9.0",
13 | "@radix-ui/react-alert-dialog": "^1.1.2",
14 | "@radix-ui/react-checkbox": "^1.1.2",
15 | "@radix-ui/react-label": "^2.1.0",
16 | "@radix-ui/react-radio-group": "^1.2.1",
17 | "@radix-ui/react-select": "^2.1.2",
18 | "@radix-ui/react-slot": "^1.1.0",
19 | "class-variance-authority": "^0.7.0",
20 | "clsx": "^2.1.1",
21 | "input-otp": "^1.4.1",
22 | "lucide-react": "^0.427.0",
23 | "next": "14.2.5",
24 | "next-themes": "^0.3.0",
25 | "node-appwrite": "^13.0.0",
26 | "react": "^18",
27 | "react-datepicker": "^7.5.0",
28 | "react-dom": "^18",
29 | "react-dropzone": "^14.3.5",
30 | "react-hook-form": "^7.52.2",
31 | "react-phone-number-input": "^3.4.5",
32 | "shadcn-ui": "^0.9.3",
33 | "tailwind-merge": "^2.5.2",
34 | "tailwindcss-animate": "^1.0.7",
35 | "zod": "^3.23.8"
36 | },
37 | "devDependencies": {
38 | "@types/node": "^20",
39 | "@types/react": "^18",
40 | "@types/react-dom": "^18",
41 | "eslint": "^8",
42 | "eslint-config-next": "14.2.5",
43 | "postcss": "^8",
44 | "tailwindcss": "^3.4.1",
45 | "typescript": "^5"
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/app/patients/[userId]/new-appointment/page.tsx:
--------------------------------------------------------------------------------
1 |
2 | import Image from "next/image";
3 | import AppointmentForm from "@/components/forms/AppointmentForm";
4 | import {getPatient} from "@/lib/actions/patient.actions";
5 | import PatientForm from "@/components/forms/PatientForm";
6 |
7 | export default async function NewAppointment({params :{userId}}:SearchParamProps) {
8 | const patient = await getPatient(userId);
9 | return (
10 |
17 |
35 | 27 | ©️ 2024 CarePulse 28 |
29 |
30 |
31 | Admin
32 |
33 |
34 |
11 |
12 |
33 |
41 | );
42 | }
43 |
--------------------------------------------------------------------------------
/components/ui/radio-group.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
5 | import { Circle } from "lucide-react"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const RadioGroup = React.forwardRef<
10 | React.ElementRef
13 |
32 | 28 | ©️ 2024 CarePulse 29 |
30 | 31 |
11 | {/* OTP verification */}
12 |
13 |
14 |
15 |
35 |
43 | )
44 | }
45 | export default Register
46 |
--------------------------------------------------------------------------------
/app/patients/[userId]/register/page.tsx~:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Image from 'next/image'
3 | import Link from "next/link";
4 | import RegisterForm from "@/components/forms/RegisterForm";
5 | import {getUser} from "@/lib/actions/patient.actions";
6 |
7 | const Register = async ({params:{userId}}:SearchParamProps) => {
8 | const user = await getUser(userId);
9 | return (
10 |
16 |
24 |
25 |
34 |
26 |
33 | 27 | ©️ 2024 CarePulse 28 |
29 | 30 | Admin 31 | 32 |
11 | {/* OTP verification */}
12 |
13 |
14 |
15 |
35 |
43 | )
44 | }
45 | export default Register
46 |
--------------------------------------------------------------------------------
/public/assets/icons/check-circle.svg:
--------------------------------------------------------------------------------
1 |
24 |
--------------------------------------------------------------------------------
/components/FileUploader.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import React, {useCallback} from 'react'
4 | import {useDropzone} from 'react-dropzone'
5 | import Image from 'next/image'
6 | import convertFileToURL from 'react-dropzone'
7 |
8 | type FileUploaderProps = {
9 | files: File[] | undefined,
10 | onChange: (files: File[]) => void
11 | }
12 |
13 | const FileUploader = ({files, onChange}:FileUploaderProps) => {
14 | const onDrop = useCallback((acceptedFiles:File[]) => {
15 | onChange(acceptedFiles)
16 | }, [])
17 | const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop})
18 |
19 | // @ts-ignore
20 | // @ts-ignore
21 | // @ts-ignore
22 | return (
23 |
16 |
24 |
25 |
34 |
26 |
33 | 27 | ©️ 2024 CarePulse 28 |
29 | 30 | Admin 31 | 32 |
24 |
25 | {files && files?.length > 0 ? (
26 |
49 | )
50 | }
51 | export default FileUploader
--------------------------------------------------------------------------------
/app/admin/page.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Link from "next/link";
3 | import Image from "next/image";
4 | import StatCard from "@/components/StatCard";
5 |
6 | const Admin = () => {
7 | return (
8 |
36 |
41 |
42 | }
43 | {
44 | isDragActive ?
45 | 37 | Click to upload or drag & drop 38 |
39 |SVG, PNG, JPG, GIF (max 800x600)
40 |Drop the files here ...
: 46 |Drag `'`n`'` drop some files here, or click to select files
47 | } 48 |
9 |
10 |
13 |
23 |
24 |
25 |
28 |
29 |
30 |
49 |
50 |
51 |
52 |
53 | )
54 | }
55 | export default Admin
56 |
--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
1 |
2 | import * as React from "react"
3 | import { Slot } from "@radix-ui/react-slot"
4 | import { cva, type VariantProps } from "class-variance-authority"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const buttonVariants = cva(
9 | "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
10 | {
11 | variants: {
12 | variant: {
13 | default: "bg-primary text-primary-foreground hover:bg-primary/90",
14 | destructive:
15 | "bg-destructive text-destructive-foreground hover:bg-destructive/90",
16 | outline:
17 | "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
18 | secondary:
19 | "bg-secondary text-secondary-foreground hover:bg-secondary/80",
20 | ghost: "hover:bg-accent hover:text-accent-foreground",
21 | link: "text-primary underline-offset-4 hover:underline",
22 | },
23 | size: {
24 | default: "h-10 px-4 py-2",
25 | sm: "h-9 rounded-md px-3",
26 | lg: "h-11 rounded-md px-8",
27 | icon: "h-10 w-10",
28 | },
29 | },
30 | defaultVariants: {
31 | variant: "default",
32 | size: "default",
33 | },
34 | }
35 | )
36 |
37 | export interface ButtonProps
38 | extends React.ButtonHTMLAttributesAdmin Dashboard
22 |
50 | {char}
51 | {hasFakeCaret && (
52 |
57 | )
58 | })
59 | InputOTPSlot.displayName = "InputOTPSlot"
60 |
61 | const InputOTPSeparator = React.forwardRef<
62 | React.ElementRef<"div">,
63 | React.ComponentPropsWithoutRef<"div">
64 | >(({ ...props }, ref) => (
65 |
53 |
54 |
55 | )}
56 |
66 |
68 | ))
69 | InputOTPSeparator.displayName = "InputOTPSeparator"
70 |
71 | export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
72 |
--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs));
6 | }
7 |
8 | export const parseStringify = (value: any) => JSON.parse(JSON.stringify(value));
9 |
10 | export const convertFileToUrl = (file: File) => URL.createObjectURL(file);
11 |
12 | // FORMAT DATE TIME
13 | export const formatDateTime = (dateString: Date | string) => {
14 | const dateTimeOptions: Intl.DateTimeFormatOptions = {
15 | // weekday: "short", // abbreviated weekday name (e.g., 'Mon')
16 | month: "short", // abbreviated month name (e.g., 'Oct')
17 | day: "numeric", // numeric day of the month (e.g., '25')
18 | year: "numeric", // numeric year (e.g., '2023')
19 | hour: "numeric", // numeric hour (e.g., '8')
20 | minute: "numeric", // numeric minute (e.g., '30')
21 | hour12: true, // use 12-hour clock (true) or 24-hour clock (false)
22 | };
23 |
24 | const dateDayOptions: Intl.DateTimeFormatOptions = {
25 | weekday: "short", // abbreviated weekday name (e.g., 'Mon')
26 | year: "numeric", // numeric year (e.g., '2023')
27 | month: "2-digit", // abbreviated month name (e.g., 'Oct')
28 | day: "2-digit", // numeric day of the month (e.g., '25')
29 | };
30 |
31 | const dateOptions: Intl.DateTimeFormatOptions = {
32 | month: "short", // abbreviated month name (e.g., 'Oct')
33 | year: "numeric", // numeric year (e.g., '2023')
34 | day: "numeric", // numeric day of the month (e.g., '25')
35 | };
36 |
37 | const timeOptions: Intl.DateTimeFormatOptions = {
38 | hour: "numeric", // numeric hour (e.g., '8')
39 | minute: "numeric", // numeric minute (e.g., '30')
40 | hour12: true, // use 12-hour clock (true) or 24-hour clock (false)
41 | };
42 |
43 | const formattedDateTime: string = new Date(dateString).toLocaleString(
44 | "en-US",
45 | dateTimeOptions
46 | );
47 |
48 | const formattedDateDay: string = new Date(dateString).toLocaleString(
49 | "en-US",
50 | dateDayOptions
51 | );
52 |
53 | const formattedDate: string = new Date(dateString).toLocaleString(
54 | "en-US",
55 | dateOptions
56 | );
57 |
58 | const formattedTime: string = new Date(dateString).toLocaleString(
59 | "en-US",
60 | timeOptions
61 | );
62 |
63 | return {
64 | dateTime: formattedDateTime,
65 | dateDay: formattedDateDay,
66 | dateOnly: formattedDate,
67 | timeOnly: formattedTime,
68 | };
69 | };
70 |
71 | export function encryptKey(passkey: string) {
72 | return btoa(passkey);
73 | }
74 |
75 | export function decryptKey(passkey: string) {
76 | return atob(passkey);
77 | }
78 |
--------------------------------------------------------------------------------
/lib/actions/patient.actions.ts:
--------------------------------------------------------------------------------
1 | "use server";
2 | import {ID, Query } from "node-appwrite";
3 | import {
4 | BUCKET_ID,
5 | DATABASE_ID,
6 | databases,
7 | ENDPOINT,
8 | PATIENT_COLLECTION_ID,
9 | PROJECT_ID,
10 | storage,
11 | users
12 | } from "../appwrite.config";
13 | import { parseStringify } from "../utils";
14 | import {InputFile} from "node-appwrite/file";
15 |
16 |
17 | export const createUser = async (user: CreateUserParams) => {
18 | try {
19 | const newUser = await users.create(
20 | ID.unique(),
21 | user.email,
22 | user.phone,
23 | undefined,
24 | user.name
25 | );
26 |
27 | return parseStringify(newUser);
28 | } catch (error: any) {
29 | if(error && error?.code === 409) {
30 | const existingUser = await users.list([
31 | Query.equal('email', [user.email])
32 | ]);
33 |
34 | return existingUser?.users[0]
35 | }
36 | }
37 |
38 |
39 | };
40 |
41 | export const getUser = async (userId: string) => {
42 | try {
43 | const user = await users.get(userId);
44 | return parseStringify(user);
45 | }
46 | catch (error) {
47 | console.log(error)
48 | }
49 | }
50 |
51 | export const getPatient = async (userId: string) => {
52 | try {
53 | const patients = await databases.listDocuments(
54 | DATABASE_ID!,
55 | PATIENT_COLLECTION_ID!,
56 | [Query.equal('userId', [userId])]
57 | );
58 | return parseStringify(patients.documents[0]);
59 |
60 | }
61 | catch (error) {
62 | console.log(error)
63 | }
64 | }
65 |
66 | export const registerPatient = async ({identificationDocument, ...patient}:
67 | RegisterUserParams) => {
68 | try {
69 | let file;
70 | if (identificationDocument) {
71 | const inputFile = InputFile.fromBuffer(
72 | identificationDocument?.get("blobFile") as Blob,
73 | identificationDocument?.get("filename") as string,
74 | )
75 | file = await storage.createFile(BUCKET_ID!, ID.unique(), inputFile)
76 | }
77 | const newPatient = await databases.createDocument(
78 | DATABASE_ID!,
79 | PATIENT_COLLECTION_ID!,
80 | ID.unique(),
81 | {
82 | identificationDocumentId: file?.$id || null,
83 | identificationDocumentUrl: `${ENDPOINT}/storage/buckets/${BUCKET_ID}/files/${file?.$id}/view?project=${PROJECT_ID}`,
84 | ...patient
85 | }
86 | )
87 | return parseStringify(newPatient);
88 | } catch (e) {
89 | console.log(e)
90 | }
91 | }
92 |
--------------------------------------------------------------------------------
/app/patients/[userId]/new-appointment/success/page.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Link from "next/link";
3 | import Image from "next/image";
4 | import {getAppointment} from "@/lib/actions/appointment.actions";
5 | import {Doctors} from "@/constants";
6 | import {formatDateTime} from "@/lib/utils";
7 | import {Button} from "@/components/ui/button";
8 |
9 |
10 | const Success = async ({params: {userId}, searchParams}: SearchParamProps) => {
11 | const appointmentId = (searchParams?.appointmentId as string) || "";
12 | const appointment = await getAppointment(appointmentId)
13 |
14 | const doctor = Doctors.find((doc) => doc.name === appointment.primaryPhysician)
15 |
16 | return (
17 |
18 |
82 | )
83 | }
84 |
85 | export default Success
86 |
--------------------------------------------------------------------------------
/components/forms/PatientForm.tsx~:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { zodResolver } from "@hookform/resolvers/zod"
4 | import { useForm } from "react-hook-form"
5 | import { z } from "zod"
6 | import { Button } from "@/components/ui/button"
7 | import { Form } from "@/components/ui/form"
8 | import { Input } from "@/components/ui/input"
9 | import CustomFormField from "../CustomFormField"
10 | import SubmitButton from "../SubmitButton"
11 | import { useState } from "react"
12 | import { UserFormValidation } from "@/lib/validation"
13 | import { useRouter } from "next/navigation"
14 | import { createUser } from "@/lib/actions/patient.actions"
15 |
16 | export enum FormFieldType {
17 | INPUT = 'input',
18 | TEXTAREA = 'textarea',
19 | PHONE_INPUT = 'phone_input',
20 | CHECKBOX = 'checkbox' ,
21 | DATE_PICKER = 'datePicker',
22 | SELECT = 'select' ,
23 | SKELETON = 'skeleton',
24 | }
25 |
26 |
27 |
28 |
29 | const PatientForm = () => {
30 | const router = useRouter();
31 | const [isLoading, setIsLoading] = useState(false)
32 | // 1. Define your form.
33 | const form = useForm
19 |
20 |
29 |
44 |
45 |
70 |
78 |
81 | 38 | Your 39 | appointment has been 40 | successfully scheduled. 41 |
42 |We will be in touch shortly to confirm
43 |Requested appointment details
46 |
47 |
56 | Dr. {doctor?.name}
55 |
57 |
65 | {formatDateTime(appointment.schedule).dateTime}
66 | 67 | 68 | 69 |©️ 2024 CarePulse
79 | 80 |
99 | setPasskey(value)}>
100 |
101 |
108 |
109 | {error && (
113 | 110 | {error} 111 |
)} 112 |162 | {body} 163 |
164 | ) 165 | }) 166 | FormMessage.displayName = "FormMessage" 167 | 168 | export { 169 | useFormField, 170 | Form, 171 | FormItem, 172 | FormLabel, 173 | FormControl, 174 | FormDescription, 175 | FormMessage, 176 | FormField, 177 | } 178 | -------------------------------------------------------------------------------- /public/assets/icons/logo-icon.svg: -------------------------------------------------------------------------------- 1 | 46 | -------------------------------------------------------------------------------- /components/ui/alert-dialog.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" 5 | 6 | import { cn } from "@/lib/utils" 7 | import { buttonVariants } from "@/components/ui/button" 8 | 9 | const AlertDialog = AlertDialogPrimitive.Root 10 | 11 | const AlertDialogTrigger = AlertDialogPrimitive.Trigger 12 | 13 | const AlertDialogPortal = AlertDialogPrimitive.Portal 14 | 15 | const AlertDialogOverlay = React.forwardRef< 16 | React.ElementRef
48 | {iconSrc && (
49 |
59 |
64 |
65 |
66 | )
67 | case FormFieldType.TEXTAREA:
68 | return (
69 |
96 |
104 |
106 | field.onChange(date)}
107 | dateFormat={dateFormat ?? 'MM/dd/yyyy'}
108 | showTimeSelect={showTimeSelect ?? false}
109 | timeInputLabel="Time:"
110 | wrapperClassName="date-picker"
111 | // showMonthYearDropdown={false}
112 |
113 | />
114 |
115 |
116 |
117 | )
118 | case FormFieldType.SELECT:
119 | return (
120 |
146 |
153 |
2 |
3 | 4 |
5 |
6 |
7 | 8 |
16 |
17 |
18 |
19 |
20 | 21 |
22 |
23 |
24 |
25 |
26 |
27 | 28 |
29 |
30 |
31 |
32 |
33 | 34 |
35 |
36 |
37 |
38 | 39 | 40 | 41 |
51 |
52 | ## 🎥 Video Reference
53 |
54 | You can watch the tutorial here: [JavaScript Mastery Tutorial](https://www.youtube.com/watch?v=lEflo_sc82g&t=2776s&ab_channel=JavaScriptMastery).
55 |
56 |
57 |
58 | ## 🚨 Tutorial
59 |
60 | This repository contains the code corresponding to an in-depth tutorial available on JavaScript Mastery YouTube channel.
61 |
62 |
63 |
64 | ## 🤖 Introduction
65 |
66 | 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.
67 |
68 |
69 | ## ⚙️ Tech Stack
70 |
71 | - Next.js
72 | - Appwrite
73 | - Typescript
74 | - TailwindCSS
75 | - ShadCN
76 | - Twilio
77 |
78 | ## 🔋 Features
79 |
80 | 👉 **Register as a Patient**: Users can sign up and create a personal profile as a patient.
81 |
82 | 👉 **Book a New Appointment with Doctor**: Patients can schedule appointments with doctors at their convenience and can book multiple appointments.
83 |
84 | 👉 **Manage Appointments on Admin Side**: Administrators can efficiently view and handle all scheduled appointments.
85 |
86 | 👉 **Confirm/Schedule Appointment from Admin Side**: Admins can confirm and set appointment times to ensure they are properly scheduled.
87 |
88 | 👉 **Cancel Appointment from Admin Side**: Administrators have the ability to cancel any appointment as needed.
89 |
90 | 👉 **Send SMS on Appointment Confirmation**: Patients receive SMS notifications to confirm their appointment details.
91 |
92 | 👉 **Complete Responsiveness**: The application works seamlessly on all device types and screen sizes.
93 |
94 | 👉 **File Upload Using Appwrite Storage**: Users can upload and store files securely within the app using Appwrite storage services.
95 |
96 | 👉 **Manage and Track Application Performance Using Sentry**: The application uses Sentry to monitor and track its performance and detect any errors.
97 |
98 | and many more, including code architecture and reusability
99 |
100 | ## 🤸 Quick Start
101 |
102 | Follow these steps to set up the project locally on your machine.
103 |
104 | **Prerequisites**
105 |
106 | Make sure you have the following installed on your machine:
107 |
108 | - [Git](https://git-scm.com/)
109 | - [Node.js](https://nodejs.org/en)
110 | - [npm](https://www.npmjs.com/) (Node Package Manager)
111 |
112 | **Cloning the Repository**
113 |
114 | ```bash
115 | git clone https://github.com/rr3s1/jsm_medical_schedule_app.git
116 | cd jsm_medical_schedule_app
117 | ```
118 |
119 | **Installation**
120 |
121 | Install the project dependencies using npm:
122 |
123 | ```bash
124 | npm install
125 | ```
126 |
127 | **Set Up Environment Variables**
128 |
129 | Create a new file named `.env.local` in the root of your project and add the following content:
130 |
131 | ```env
132 | #APPWRITE
133 | NEXT_PUBLIC_ENDPOINT=https://cloud.appwrite.io/v1
134 | PROJECT_ID=
135 | API_KEY=
136 | DATABASE_ID=
137 | PATIENT_COLLECTION_ID=
138 | APPOINTMENT_COLLECTION_ID=
139 | NEXT_PUBLIC_BUCKET_ID=
140 |
141 | NEXT_PUBLIC_ADMIN_PASSKEY=111111
142 | ```
143 |
144 | Replace the placeholder values with your actual Appwrite credentials. You can obtain these credentials by signing up on the [Appwrite website](https://appwrite.io/).
145 |
146 | **Running the Project**
147 |
148 | ```bash
149 | npm run dev
150 | ```
151 |
152 | Open [http://localhost:3000](http://localhost:3000) in your browser to view the project.
153 |
154 | ## 🕸️ Snippets
155 |
156 | 3 | 4 |
7 | 8 |
9 | 
10 | 
11 | 
12 | 
13 |
14 |
15 |
10 |
11 |
12 |
13 | 16 |
Welcome Screen
17 |
20 | 21 |
22 |
Patient Registration
23 |
26 |
27 | 28 |
Patient Registration 2nd part
29 |
32 |
33 | 34 |
Admin dashboard
35 |
38 | 39 | 40 | 41 |
HealthCare Management System
42 | 43 |
44 | In this repository, I am following along with Adrian Hajdin from JavaScript Mastery (YouTube) to build a HealthCare Management System.
45 |
46 |
47 |
48 | https://github.com/adrianhajdin
49 |
50 |
157 |
158 |
159 | ```typescript
160 | import type { Config } from "tailwindcss";
161 |
162 | const { fontFamily } = require("tailwindcss/defaultTheme");
163 |
164 | const config = {
165 | darkMode: ["class"],
166 | content: [
167 | "./pages/**/*.{ts,tsx}",
168 | "./components/**/*.{ts,tsx}",
169 | "./app/**/*.{ts,tsx}",
170 | "./src/**/*.{ts,tsx}",
171 | ],
172 | prefix: "",
173 | theme: {
174 | container: {
175 | center: true,
176 | padding: "2rem",
177 | screens: {
178 | "2xl": "1400px",
179 | },
180 | },
181 | extend: {
182 | colors: {
183 | green: {
184 | 500: "#24AE7C",
185 | 600: "#0D2A1F",
186 | },
187 | blue: {
188 | 500: "#79B5EC",
189 | 600: "#152432",
190 | },
191 | red: {
192 | 500: "#F37877",
193 | 600: "#3E1716",
194 | 700: "#F24E43",
195 | },
196 | light: {
197 | 200: "#E8E9E9",
198 | },
199 | dark: {
200 | 200: "#0D0F10",
201 | 300: "#131619",
202 | 400: "#1A1D21",
203 | 500: "#363A3D",
204 | 600: "#76828D",
205 | 700: "#ABB8C4",
206 | },
207 | },
208 | fontFamily: {
209 | sans: ["var(--font-sans)", ...fontFamily.sans],
210 | },
211 | backgroundImage: {
212 | appointments: "url('/assets/images/appointments-bg.png')",
213 | pending: "url('/assets/images/pending-bg.png')",
214 | cancelled: "url('/assets/images/cancelled-bg.png')",
215 | },
216 | keyframes: {
217 | "accordion-down": {
218 | from: { height: "0" },
219 | to: { height: "var(--radix-accordion-content-height)" },
220 | },
221 | "accordion-up": {
222 | from: { height: "var(--radix-accordion-content-height)" },
223 | to: { height: "0" },
224 | },
225 | "caret-blink": {
226 | "0%,70%,100%": { opacity: "1" },
227 | "20%,50%": { opacity: "0" },
228 | },
229 | },
230 | animation: {
231 | "accordion-down": "accordion-down 0.2s ease-out",
232 | "accordion-up": "accordion-up 0.2s ease-out",
233 | "caret-blink": "caret-blink 1.25s ease-out infinite",
234 | },
235 | },
236 | },
237 | plugins: [require("tailwindcss-animate")],
238 | } satisfies Config;
239 |
240 | export default config;
241 | ```
242 |
243 |
244 |
245 | tailwind.config.ts
158 |
159 | ```typescript
160 | import type { Config } from "tailwindcss";
161 |
162 | const { fontFamily } = require("tailwindcss/defaultTheme");
163 |
164 | const config = {
165 | darkMode: ["class"],
166 | content: [
167 | "./pages/**/*.{ts,tsx}",
168 | "./components/**/*.{ts,tsx}",
169 | "./app/**/*.{ts,tsx}",
170 | "./src/**/*.{ts,tsx}",
171 | ],
172 | prefix: "",
173 | theme: {
174 | container: {
175 | center: true,
176 | padding: "2rem",
177 | screens: {
178 | "2xl": "1400px",
179 | },
180 | },
181 | extend: {
182 | colors: {
183 | green: {
184 | 500: "#24AE7C",
185 | 600: "#0D2A1F",
186 | },
187 | blue: {
188 | 500: "#79B5EC",
189 | 600: "#152432",
190 | },
191 | red: {
192 | 500: "#F37877",
193 | 600: "#3E1716",
194 | 700: "#F24E43",
195 | },
196 | light: {
197 | 200: "#E8E9E9",
198 | },
199 | dark: {
200 | 200: "#0D0F10",
201 | 300: "#131619",
202 | 400: "#1A1D21",
203 | 500: "#363A3D",
204 | 600: "#76828D",
205 | 700: "#ABB8C4",
206 | },
207 | },
208 | fontFamily: {
209 | sans: ["var(--font-sans)", ...fontFamily.sans],
210 | },
211 | backgroundImage: {
212 | appointments: "url('/assets/images/appointments-bg.png')",
213 | pending: "url('/assets/images/pending-bg.png')",
214 | cancelled: "url('/assets/images/cancelled-bg.png')",
215 | },
216 | keyframes: {
217 | "accordion-down": {
218 | from: { height: "0" },
219 | to: { height: "var(--radix-accordion-content-height)" },
220 | },
221 | "accordion-up": {
222 | from: { height: "var(--radix-accordion-content-height)" },
223 | to: { height: "0" },
224 | },
225 | "caret-blink": {
226 | "0%,70%,100%": { opacity: "1" },
227 | "20%,50%": { opacity: "0" },
228 | },
229 | },
230 | animation: {
231 | "accordion-down": "accordion-down 0.2s ease-out",
232 | "accordion-up": "accordion-up 0.2s ease-out",
233 | "caret-blink": "caret-blink 1.25s ease-out infinite",
234 | },
235 | },
236 | },
237 | plugins: [require("tailwindcss-animate")],
238 | } satisfies Config;
239 |
240 | export default config;
241 | ```
242 |
243 |
246 |
247 |
248 | ```css
249 | @tailwind base;
250 | @tailwind components;
251 | @tailwind utilities;
252 |
253 | /* ========================================== TAILWIND STYLES */
254 | @layer base {
255 | /* Remove scrollbar */
256 | .remove-scrollbar::-webkit-scrollbar {
257 | width: 0px;
258 | height: 0px;
259 | border-radius: 0px;
260 | }
261 |
262 | .remove-scrollbar::-webkit-scrollbar-track {
263 | background: transparent;
264 | }
265 |
266 | .remove-scrollbar::-webkit-scrollbar-thumb {
267 | background: transparent;
268 | border-radius: 0px;
269 | }
270 |
271 | .remove-scrollbar::-webkit-scrollbar-thumb:hover {
272 | /* background: #1e2238; */
273 | background: transparent;
274 | }
275 | }
276 |
277 | @layer utilities {
278 | /* ===== UTILITIES */
279 | .sidebar {
280 | @apply remove-scrollbar w-full max-w-72 flex-col overflow-auto bg-black-800 px-7 py-10;
281 | }
282 |
283 | .left-sidebar {
284 | @apply hidden lg:flex;
285 | }
286 |
287 | .right-sidebar {
288 | @apply hidden xl:flex;
289 | }
290 |
291 | .clip-text {
292 | @apply bg-clip-text text-transparent;
293 | }
294 |
295 | .bg-image {
296 | @apply bg-black-900 bg-light-rays bg-cover bg-no-repeat;
297 | }
298 |
299 | .header {
300 | @apply text-32-bold md:text-36-bold;
301 | }
302 |
303 | .sub-header {
304 | @apply text-18-bold md:text-24-bold;
305 | }
306 |
307 | .container {
308 | @apply relative flex-1 overflow-y-auto px-[5%];
309 | }
310 |
311 | .sub-container {
312 | @apply mx-auto flex size-full flex-col py-10;
313 | }
314 |
315 | .side-img {
316 | @apply hidden h-full object-cover md:block;
317 | }
318 |
319 | .copyright {
320 | @apply text-14-regular justify-items-end text-center text-dark-600 xl:text-left;
321 | }
322 |
323 | /* ==== SUCCESS */
324 | .success-img {
325 | @apply m-auto flex flex-1 flex-col items-center justify-between gap-10 py-10;
326 | }
327 |
328 | .request-details {
329 | @apply flex w-full flex-col items-center gap-8 border-y-2 border-dark-400 py-8 md:w-fit md:flex-row;
330 | }
331 |
332 | /* ===== ADMIN */
333 | .admin-header {
334 | @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;
335 | }
336 |
337 | .admin-main {
338 | @apply flex flex-col items-center space-y-6 px-[5%] pb-12 xl:space-y-12 xl:px-12;
339 | }
340 |
341 | .admin-stat {
342 | @apply flex w-full flex-col justify-between gap-5 sm:flex-row xl:gap-10;
343 | }
344 |
345 | /* ==== FORM */
346 | .radio-group {
347 | @apply flex h-full flex-1 items-center gap-2 rounded-md border border-dashed border-dark-500 bg-dark-400 p-3;
348 | }
349 |
350 | .checkbox-label {
351 | @apply cursor-pointer text-sm font-medium text-dark-700 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 md:leading-none;
352 | }
353 |
354 | /* ==== File Upload */
355 | .file-upload {
356 | @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;
357 | }
358 |
359 | .file-upload_label {
360 | @apply flex flex-col justify-center gap-2 text-center text-dark-600;
361 | }
362 |
363 | /* ==== Stat Card */
364 | .stat-card {
365 | @apply flex flex-1 flex-col gap-6 rounded-2xl bg-cover p-6 shadow-lg;
366 | }
367 |
368 | /* ==== Status Badge */
369 | .status-badge {
370 | @apply flex w-fit items-center gap-2 rounded-full px-4 py-2;
371 | }
372 |
373 | /* Data Table */
374 | .data-table {
375 | @apply z-10 w-full overflow-hidden rounded-lg border border-dark-400 shadow-lg;
376 | }
377 |
378 | .table-actions {
379 | @apply flex w-full items-center justify-between space-x-2 p-4;
380 | }
381 |
382 | /* ===== ALIGNMENTS */
383 | .flex-center {
384 | @apply flex items-center justify-center;
385 | }
386 |
387 | .flex-between {
388 | @apply flex items-center justify-between;
389 | }
390 |
391 | /* ===== TYPOGRAPHY */
392 | .text-36-bold {
393 | @apply text-[36px] leading-[40px] font-bold;
394 | }
395 |
396 | .text-24-bold {
397 | @apply text-[24px] leading-[28px] font-bold;
398 | }
399 |
400 | .text-32-bold {
401 | @apply text-[32px] leading-[36px] font-bold;
402 | }
403 |
404 | .text-18-bold {
405 | @apply text-[18px] leading-[24px] font-bold;
406 | }
407 |
408 | .text-16-semibold {
409 | @apply text-[16px] leading-[20px] font-semibold;
410 | }
411 |
412 | .text-16-regular {
413 | @apply text-[16px] leading-[20px] font-normal;
414 | }
415 |
416 | .text-14-medium {
417 | @apply text-[14px] leading-[18px] font-medium;
418 | }
419 |
420 | .text-14-regular {
421 | @apply text-[14px] leading-[18px] font-normal;
422 | }
423 |
424 | .text-12-regular {
425 | @apply text-[12px] leading-[16px] font-normal;
426 | }
427 |
428 | .text-12-semibold {
429 | @apply text-[12px] leading-[16px] font-semibold;
430 | }
431 |
432 | /* ===== SHADCN OVERRIDES */
433 | .shad-primary-btn {
434 | @apply bg-green-500 text-white !important;
435 | }
436 |
437 | .shad-danger-btn {
438 | @apply bg-red-700 text-white !important;
439 | }
440 |
441 | .shad-gray-btn {
442 | @apply border border-dark-500 cursor-pointer bg-dark-400 text-white !important;
443 | }
444 |
445 | .shad-input-label {
446 | @apply text-14-medium text-dark-700 !important;
447 | }
448 |
449 | .shad-input {
450 | @apply bg-dark-400 placeholder:text-dark-600 border-dark-500 h-11 focus-visible:ring-0 focus-visible:ring-offset-0 !important;
451 | }
452 |
453 | .shad-input-icon {
454 | @apply bg-dark-400 placeholder:text-dark-600 border-dark-500 h-11 focus-visible:ring-0 focus-visible:ring-offset-0 !important;
455 | }
456 |
457 | .shad-textArea {
458 | @apply bg-dark-400 placeholder:text-dark-600 border-dark-500 focus-visible:ring-0 focus-visible:ring-offset-0 !important;
459 | }
460 |
461 | .shad-combobox-item {
462 | @apply data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 !important;
463 | }
464 |
465 | .shad-combobox-trigger {
466 | @apply h-11 !important;
467 | }
468 |
469 | .shad-select-trigger {
470 | @apply bg-dark-400 placeholder:text-dark-600 border-dark-500 h-11 focus:ring-0 focus:ring-offset-0 !important;
471 | }
472 |
473 | .shad-select-content {
474 | @apply bg-dark-400 border-dark-500 !important;
475 | }
476 |
477 | .shad-dialog {
478 | @apply bg-dark-400 border-dark-500 !important;
479 | }
480 |
481 | .shad-dialog button {
482 | @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;
483 | }
484 |
485 | .shad-error {
486 | @apply text-red-400 !important;
487 | }
488 |
489 | .shad-table {
490 | @apply rounded-lg overflow-hidden !important;
491 | }
492 |
493 | .shad-table-row-header {
494 | @apply border-b border-dark-400 text-light-200 hover:bg-transparent !important;
495 | }
496 |
497 | .shad-table-row {
498 | @apply border-b border-dark-400 text-light-200 !important;
499 | }
500 |
501 | .shad-otp {
502 | @apply w-full flex justify-between !important;
503 | }
504 |
505 | .shad-otp-slot {
506 | @apply text-36-bold justify-center flex border border-dark-500 rounded-lg size-16 gap-4 !important;
507 | }
508 |
509 | .shad-alert-dialog {
510 | @apply space-y-5 bg-dark-400 border-dark-500 outline-none !important;
511 | }
512 |
513 | .shad-sheet-content button {
514 | @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;
515 | }
516 |
517 | /* ===== REACT PHONE NUMBER INPUT OVERRIDES */
518 | .input-phone {
519 | @apply mt-2 h-11 rounded-md px-3 text-sm border bg-dark-400 placeholder:text-dark-600 border-dark-500 !important;
520 | }
521 |
522 | /* ===== REACT DATE PICKER OVERRIDES */
523 | .date-picker {
524 | @apply overflow-hidden border-transparent w-full placeholder:text-dark-600 h-11 text-14-medium rounded-md px-3 outline-none !important;
525 | }
526 | }
527 |
528 | /* ===== REACT-DATEPICKER OVERRIDES */
529 | .react-datepicker-wrapper.date-picker {
530 | display: flex;
531 | align-items: center;
532 | }
533 |
534 | .react-datepicker,
535 | .react-datepicker__time,
536 | .react-datepicker__header,
537 | .react-datepicker__current-month,
538 | .react-datepicker__day-name,
539 | .react-datepicker__day,
540 | .react-datepicker-time__header {
541 | background-color: #1a1d21 !important;
542 | border-color: #363a3d !important;
543 | color: #abb8c4 !important;
544 | }
545 |
546 | .react-datepicker__current-month,
547 | .react-datepicker__day-name,
548 | .react-datepicker-time__header {
549 | color: #ffffff !important;
550 | }
551 |
552 | .react-datepicker__triangle {
553 | fill: #1a1d21 !important;
554 | color: #1a1d21 !important;
555 | stroke: #1a1d21 !important;
556 | }
557 |
558 | .react-datepicker__time-list-item:hover {
559 | background-color: #363a3d !important;
560 | }
561 |
562 | .react-datepicker__input-container input {
563 | background-color: #1a1d21 !important;
564 | width: 100%;
565 | outline: none;
566 | }
567 |
568 | .react-datepicker__day--selected {
569 | background-color: #24ae7c !important;
570 | color: #ffffff !important;
571 | border-radius: 4px;
572 | }
573 |
574 | .react-datepicker__time-list-item--selected {
575 | background-color: #24ae7c !important;
576 | }
577 |
578 | .react-datepicker__time-container {
579 | border-left: 1px solid #363a3d !important;
580 | }
581 |
582 | .react-datepicker__time-list-item {
583 | display: flex !important;
584 | align-items: center !important;
585 | }
586 |
587 | /* ===== REACT PHONE NUMBER INPUT OVERRIDES */
588 | .PhoneInputInput {
589 | outline: none;
590 | margin-left: 4px;
591 | background: #1a1d21;
592 | font-size: 14px;
593 | font-weight: 500;
594 | }
595 |
596 | .PhoneInputInput::placeholder {
597 | color: #1a1d21;
598 | }
599 | ```
600 |
601 |
602 |
603 | app/globals.css
247 |
248 | ```css
249 | @tailwind base;
250 | @tailwind components;
251 | @tailwind utilities;
252 |
253 | /* ========================================== TAILWIND STYLES */
254 | @layer base {
255 | /* Remove scrollbar */
256 | .remove-scrollbar::-webkit-scrollbar {
257 | width: 0px;
258 | height: 0px;
259 | border-radius: 0px;
260 | }
261 |
262 | .remove-scrollbar::-webkit-scrollbar-track {
263 | background: transparent;
264 | }
265 |
266 | .remove-scrollbar::-webkit-scrollbar-thumb {
267 | background: transparent;
268 | border-radius: 0px;
269 | }
270 |
271 | .remove-scrollbar::-webkit-scrollbar-thumb:hover {
272 | /* background: #1e2238; */
273 | background: transparent;
274 | }
275 | }
276 |
277 | @layer utilities {
278 | /* ===== UTILITIES */
279 | .sidebar {
280 | @apply remove-scrollbar w-full max-w-72 flex-col overflow-auto bg-black-800 px-7 py-10;
281 | }
282 |
283 | .left-sidebar {
284 | @apply hidden lg:flex;
285 | }
286 |
287 | .right-sidebar {
288 | @apply hidden xl:flex;
289 | }
290 |
291 | .clip-text {
292 | @apply bg-clip-text text-transparent;
293 | }
294 |
295 | .bg-image {
296 | @apply bg-black-900 bg-light-rays bg-cover bg-no-repeat;
297 | }
298 |
299 | .header {
300 | @apply text-32-bold md:text-36-bold;
301 | }
302 |
303 | .sub-header {
304 | @apply text-18-bold md:text-24-bold;
305 | }
306 |
307 | .container {
308 | @apply relative flex-1 overflow-y-auto px-[5%];
309 | }
310 |
311 | .sub-container {
312 | @apply mx-auto flex size-full flex-col py-10;
313 | }
314 |
315 | .side-img {
316 | @apply hidden h-full object-cover md:block;
317 | }
318 |
319 | .copyright {
320 | @apply text-14-regular justify-items-end text-center text-dark-600 xl:text-left;
321 | }
322 |
323 | /* ==== SUCCESS */
324 | .success-img {
325 | @apply m-auto flex flex-1 flex-col items-center justify-between gap-10 py-10;
326 | }
327 |
328 | .request-details {
329 | @apply flex w-full flex-col items-center gap-8 border-y-2 border-dark-400 py-8 md:w-fit md:flex-row;
330 | }
331 |
332 | /* ===== ADMIN */
333 | .admin-header {
334 | @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;
335 | }
336 |
337 | .admin-main {
338 | @apply flex flex-col items-center space-y-6 px-[5%] pb-12 xl:space-y-12 xl:px-12;
339 | }
340 |
341 | .admin-stat {
342 | @apply flex w-full flex-col justify-between gap-5 sm:flex-row xl:gap-10;
343 | }
344 |
345 | /* ==== FORM */
346 | .radio-group {
347 | @apply flex h-full flex-1 items-center gap-2 rounded-md border border-dashed border-dark-500 bg-dark-400 p-3;
348 | }
349 |
350 | .checkbox-label {
351 | @apply cursor-pointer text-sm font-medium text-dark-700 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 md:leading-none;
352 | }
353 |
354 | /* ==== File Upload */
355 | .file-upload {
356 | @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;
357 | }
358 |
359 | .file-upload_label {
360 | @apply flex flex-col justify-center gap-2 text-center text-dark-600;
361 | }
362 |
363 | /* ==== Stat Card */
364 | .stat-card {
365 | @apply flex flex-1 flex-col gap-6 rounded-2xl bg-cover p-6 shadow-lg;
366 | }
367 |
368 | /* ==== Status Badge */
369 | .status-badge {
370 | @apply flex w-fit items-center gap-2 rounded-full px-4 py-2;
371 | }
372 |
373 | /* Data Table */
374 | .data-table {
375 | @apply z-10 w-full overflow-hidden rounded-lg border border-dark-400 shadow-lg;
376 | }
377 |
378 | .table-actions {
379 | @apply flex w-full items-center justify-between space-x-2 p-4;
380 | }
381 |
382 | /* ===== ALIGNMENTS */
383 | .flex-center {
384 | @apply flex items-center justify-center;
385 | }
386 |
387 | .flex-between {
388 | @apply flex items-center justify-between;
389 | }
390 |
391 | /* ===== TYPOGRAPHY */
392 | .text-36-bold {
393 | @apply text-[36px] leading-[40px] font-bold;
394 | }
395 |
396 | .text-24-bold {
397 | @apply text-[24px] leading-[28px] font-bold;
398 | }
399 |
400 | .text-32-bold {
401 | @apply text-[32px] leading-[36px] font-bold;
402 | }
403 |
404 | .text-18-bold {
405 | @apply text-[18px] leading-[24px] font-bold;
406 | }
407 |
408 | .text-16-semibold {
409 | @apply text-[16px] leading-[20px] font-semibold;
410 | }
411 |
412 | .text-16-regular {
413 | @apply text-[16px] leading-[20px] font-normal;
414 | }
415 |
416 | .text-14-medium {
417 | @apply text-[14px] leading-[18px] font-medium;
418 | }
419 |
420 | .text-14-regular {
421 | @apply text-[14px] leading-[18px] font-normal;
422 | }
423 |
424 | .text-12-regular {
425 | @apply text-[12px] leading-[16px] font-normal;
426 | }
427 |
428 | .text-12-semibold {
429 | @apply text-[12px] leading-[16px] font-semibold;
430 | }
431 |
432 | /* ===== SHADCN OVERRIDES */
433 | .shad-primary-btn {
434 | @apply bg-green-500 text-white !important;
435 | }
436 |
437 | .shad-danger-btn {
438 | @apply bg-red-700 text-white !important;
439 | }
440 |
441 | .shad-gray-btn {
442 | @apply border border-dark-500 cursor-pointer bg-dark-400 text-white !important;
443 | }
444 |
445 | .shad-input-label {
446 | @apply text-14-medium text-dark-700 !important;
447 | }
448 |
449 | .shad-input {
450 | @apply bg-dark-400 placeholder:text-dark-600 border-dark-500 h-11 focus-visible:ring-0 focus-visible:ring-offset-0 !important;
451 | }
452 |
453 | .shad-input-icon {
454 | @apply bg-dark-400 placeholder:text-dark-600 border-dark-500 h-11 focus-visible:ring-0 focus-visible:ring-offset-0 !important;
455 | }
456 |
457 | .shad-textArea {
458 | @apply bg-dark-400 placeholder:text-dark-600 border-dark-500 focus-visible:ring-0 focus-visible:ring-offset-0 !important;
459 | }
460 |
461 | .shad-combobox-item {
462 | @apply data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 !important;
463 | }
464 |
465 | .shad-combobox-trigger {
466 | @apply h-11 !important;
467 | }
468 |
469 | .shad-select-trigger {
470 | @apply bg-dark-400 placeholder:text-dark-600 border-dark-500 h-11 focus:ring-0 focus:ring-offset-0 !important;
471 | }
472 |
473 | .shad-select-content {
474 | @apply bg-dark-400 border-dark-500 !important;
475 | }
476 |
477 | .shad-dialog {
478 | @apply bg-dark-400 border-dark-500 !important;
479 | }
480 |
481 | .shad-dialog button {
482 | @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;
483 | }
484 |
485 | .shad-error {
486 | @apply text-red-400 !important;
487 | }
488 |
489 | .shad-table {
490 | @apply rounded-lg overflow-hidden !important;
491 | }
492 |
493 | .shad-table-row-header {
494 | @apply border-b border-dark-400 text-light-200 hover:bg-transparent !important;
495 | }
496 |
497 | .shad-table-row {
498 | @apply border-b border-dark-400 text-light-200 !important;
499 | }
500 |
501 | .shad-otp {
502 | @apply w-full flex justify-between !important;
503 | }
504 |
505 | .shad-otp-slot {
506 | @apply text-36-bold justify-center flex border border-dark-500 rounded-lg size-16 gap-4 !important;
507 | }
508 |
509 | .shad-alert-dialog {
510 | @apply space-y-5 bg-dark-400 border-dark-500 outline-none !important;
511 | }
512 |
513 | .shad-sheet-content button {
514 | @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;
515 | }
516 |
517 | /* ===== REACT PHONE NUMBER INPUT OVERRIDES */
518 | .input-phone {
519 | @apply mt-2 h-11 rounded-md px-3 text-sm border bg-dark-400 placeholder:text-dark-600 border-dark-500 !important;
520 | }
521 |
522 | /* ===== REACT DATE PICKER OVERRIDES */
523 | .date-picker {
524 | @apply overflow-hidden border-transparent w-full placeholder:text-dark-600 h-11 text-14-medium rounded-md px-3 outline-none !important;
525 | }
526 | }
527 |
528 | /* ===== REACT-DATEPICKER OVERRIDES */
529 | .react-datepicker-wrapper.date-picker {
530 | display: flex;
531 | align-items: center;
532 | }
533 |
534 | .react-datepicker,
535 | .react-datepicker__time,
536 | .react-datepicker__header,
537 | .react-datepicker__current-month,
538 | .react-datepicker__day-name,
539 | .react-datepicker__day,
540 | .react-datepicker-time__header {
541 | background-color: #1a1d21 !important;
542 | border-color: #363a3d !important;
543 | color: #abb8c4 !important;
544 | }
545 |
546 | .react-datepicker__current-month,
547 | .react-datepicker__day-name,
548 | .react-datepicker-time__header {
549 | color: #ffffff !important;
550 | }
551 |
552 | .react-datepicker__triangle {
553 | fill: #1a1d21 !important;
554 | color: #1a1d21 !important;
555 | stroke: #1a1d21 !important;
556 | }
557 |
558 | .react-datepicker__time-list-item:hover {
559 | background-color: #363a3d !important;
560 | }
561 |
562 | .react-datepicker__input-container input {
563 | background-color: #1a1d21 !important;
564 | width: 100%;
565 | outline: none;
566 | }
567 |
568 | .react-datepicker__day--selected {
569 | background-color: #24ae7c !important;
570 | color: #ffffff !important;
571 | border-radius: 4px;
572 | }
573 |
574 | .react-datepicker__time-list-item--selected {
575 | background-color: #24ae7c !important;
576 | }
577 |
578 | .react-datepicker__time-container {
579 | border-left: 1px solid #363a3d !important;
580 | }
581 |
582 | .react-datepicker__time-list-item {
583 | display: flex !important;
584 | align-items: center !important;
585 | }
586 |
587 | /* ===== REACT PHONE NUMBER INPUT OVERRIDES */
588 | .PhoneInputInput {
589 | outline: none;
590 | margin-left: 4px;
591 | background: #1a1d21;
592 | font-size: 14px;
593 | font-weight: 500;
594 | }
595 |
596 | .PhoneInputInput::placeholder {
597 | color: #1a1d21;
598 | }
599 | ```
600 |
601 |
604 |
605 |
606 | ```typescript
607 | /* eslint-disable no-unused-vars */
608 |
609 | declare type SearchParamProps = {
610 | params: { [key: string]: string };
611 | searchParams: { [key: string]: string | string[] | undefined };
612 | };
613 |
614 | declare type Gender = "Male" | "Female" | "Other";
615 | declare type Status = "pending" | "scheduled" | "cancelled";
616 |
617 | declare interface CreateUserParams {
618 | name: string;
619 | email: string;
620 | phone: string;
621 | }
622 | declare interface User extends CreateUserParams {
623 | $id: string;
624 | }
625 |
626 | declare interface RegisterUserParams extends CreateUserParams {
627 | userId: string;
628 | birthDate: Date;
629 | gender: Gender;
630 | address: string;
631 | occupation: string;
632 | emergencyContactName: string;
633 | emergencyContactNumber: string;
634 | primaryPhysician: string;
635 | insuranceProvider: string;
636 | insurancePolicyNumber: string;
637 | allergies: string | undefined;
638 | currentMedication: string | undefined;
639 | familyMedicalHistory: string | undefined;
640 | pastMedicalHistory: string | undefined;
641 | identificationType: string | undefined;
642 | identificationNumber: string | undefined;
643 | identificationDocument: FormData | undefined;
644 | privacyConsent: boolean;
645 | }
646 |
647 | declare type CreateAppointmentParams = {
648 | userId: string;
649 | patient: string;
650 | primaryPhysician: string;
651 | reason: string;
652 | schedule: Date;
653 | status: Status;
654 | note: string | undefined;
655 | };
656 |
657 | declare type UpdateAppointmentParams = {
658 | appointmentId: string;
659 | userId: string;
660 | appointment: Appointment;
661 | type: string;
662 | };
663 | ```
664 |
665 |
666 |
667 | types/index.d.ts
605 |
606 | ```typescript
607 | /* eslint-disable no-unused-vars */
608 |
609 | declare type SearchParamProps = {
610 | params: { [key: string]: string };
611 | searchParams: { [key: string]: string | string[] | undefined };
612 | };
613 |
614 | declare type Gender = "Male" | "Female" | "Other";
615 | declare type Status = "pending" | "scheduled" | "cancelled";
616 |
617 | declare interface CreateUserParams {
618 | name: string;
619 | email: string;
620 | phone: string;
621 | }
622 | declare interface User extends CreateUserParams {
623 | $id: string;
624 | }
625 |
626 | declare interface RegisterUserParams extends CreateUserParams {
627 | userId: string;
628 | birthDate: Date;
629 | gender: Gender;
630 | address: string;
631 | occupation: string;
632 | emergencyContactName: string;
633 | emergencyContactNumber: string;
634 | primaryPhysician: string;
635 | insuranceProvider: string;
636 | insurancePolicyNumber: string;
637 | allergies: string | undefined;
638 | currentMedication: string | undefined;
639 | familyMedicalHistory: string | undefined;
640 | pastMedicalHistory: string | undefined;
641 | identificationType: string | undefined;
642 | identificationNumber: string | undefined;
643 | identificationDocument: FormData | undefined;
644 | privacyConsent: boolean;
645 | }
646 |
647 | declare type CreateAppointmentParams = {
648 | userId: string;
649 | patient: string;
650 | primaryPhysician: string;
651 | reason: string;
652 | schedule: Date;
653 | status: Status;
654 | note: string | undefined;
655 | };
656 |
657 | declare type UpdateAppointmentParams = {
658 | appointmentId: string;
659 | userId: string;
660 | appointment: Appointment;
661 | type: string;
662 | };
663 | ```
664 |
665 |
668 |
669 |
670 | ```typescript
671 | import { Models } from "node-appwrite";
672 |
673 | export interface Patient extends Models.Document {
674 | userId: string;
675 | name: string;
676 | email: string;
677 | phone: string;
678 | birthDate: Date;
679 | gender: Gender;
680 | address: string;
681 | occupation: string;
682 | emergencyContactName: string;
683 | emergencyContactNumber: string;
684 | primaryPhysician: string;
685 | insuranceProvider: string;
686 | insurancePolicyNumber: string;
687 | allergies: string | undefined;
688 | currentMedication: string | undefined;
689 | familyMedicalHistory: string | undefined;
690 | pastMedicalHistory: string | undefined;
691 | identificationType: string | undefined;
692 | identificationNumber: string | undefined;
693 | identificationDocument: FormData | undefined;
694 | privacyConsent: boolean;
695 | }
696 |
697 | export interface Appointment extends Models.Document {
698 | patient: Patient;
699 | schedule: Date;
700 | status: Status;
701 | primaryPhysician: string;
702 | reason: string;
703 | note: string;
704 | userId: string;
705 | cancellationReason: string | null;
706 | }
707 | ```
708 |
709 |
710 |
711 | types/appwrite.types.ts
669 |
670 | ```typescript
671 | import { Models } from "node-appwrite";
672 |
673 | export interface Patient extends Models.Document {
674 | userId: string;
675 | name: string;
676 | email: string;
677 | phone: string;
678 | birthDate: Date;
679 | gender: Gender;
680 | address: string;
681 | occupation: string;
682 | emergencyContactName: string;
683 | emergencyContactNumber: string;
684 | primaryPhysician: string;
685 | insuranceProvider: string;
686 | insurancePolicyNumber: string;
687 | allergies: string | undefined;
688 | currentMedication: string | undefined;
689 | familyMedicalHistory: string | undefined;
690 | pastMedicalHistory: string | undefined;
691 | identificationType: string | undefined;
692 | identificationNumber: string | undefined;
693 | identificationDocument: FormData | undefined;
694 | privacyConsent: boolean;
695 | }
696 |
697 | export interface Appointment extends Models.Document {
698 | patient: Patient;
699 | schedule: Date;
700 | status: Status;
701 | primaryPhysician: string;
702 | reason: string;
703 | note: string;
704 | userId: string;
705 | cancellationReason: string | null;
706 | }
707 | ```
708 |
709 |
712 |
713 |
714 | ```typescript
715 | import { type ClassValue, clsx } from "clsx";
716 | import { twMerge } from "tailwind-merge";
717 |
718 | export function cn(...inputs: ClassValue[]) {
719 | return twMerge(clsx(inputs));
720 | }
721 |
722 | export const parseStringify = (value: any) => JSON.parse(JSON.stringify(value));
723 |
724 | export const convertFileToUrl = (file: File) => URL.createObjectURL(file);
725 |
726 | // FORMAT DATE TIME
727 | export const formatDateTime = (dateString: Date | string) => {
728 | const dateTimeOptions: Intl.DateTimeFormatOptions = {
729 | // weekday: "short", // abbreviated weekday name (e.g., 'Mon')
730 | month: "short", // abbreviated month name (e.g., 'Oct')
731 | day: "numeric", // numeric day of the month (e.g., '25')
732 | year: "numeric", // numeric year (e.g., '2023')
733 | hour: "numeric", // numeric hour (e.g., '8')
734 | minute: "numeric", // numeric minute (e.g., '30')
735 | hour12: true, // use 12-hour clock (true) or 24-hour clock (false)
736 | };
737 |
738 | const dateDayOptions: Intl.DateTimeFormatOptions = {
739 | weekday: "short", // abbreviated weekday name (e.g., 'Mon')
740 | year: "numeric", // numeric year (e.g., '2023')
741 | month: "2-digit", // abbreviated month name (e.g., 'Oct')
742 | day: "2-digit", // numeric day of the month (e.g., '25')
743 | };
744 |
745 | const dateOptions: Intl.DateTimeFormatOptions = {
746 | month: "short", // abbreviated month name (e.g., 'Oct')
747 | year: "numeric", // numeric year (e.g., '2023')
748 | day: "numeric", // numeric day of the month (e.g., '25')
749 | };
750 |
751 | const timeOptions: Intl.DateTimeFormatOptions = {
752 | hour: "numeric", // numeric hour (e.g., '8')
753 | minute: "numeric", // numeric minute (e.g., '30')
754 | hour12: true, // use 12-hour clock (true) or 24-hour clock (false)
755 | };
756 |
757 | const formattedDateTime: string = new Date(dateString).toLocaleString(
758 | "en-US",
759 | dateTimeOptions
760 | );
761 |
762 | const formattedDateDay: string = new Date(dateString).toLocaleString(
763 | "en-US",
764 | dateDayOptions
765 | );
766 |
767 | const formattedDate: string = new Date(dateString).toLocaleString(
768 | "en-US",
769 | dateOptions
770 | );
771 |
772 | const formattedTime: string = new Date(dateString).toLocaleString(
773 | "en-US",
774 | timeOptions
775 | );
776 |
777 | return {
778 | dateTime: formattedDateTime,
779 | dateDay: formattedDateDay,
780 | dateOnly: formattedDate,
781 | timeOnly: formattedTime,
782 | };
783 | };
784 |
785 | export function encryptKey(passkey: string) {
786 | return btoa(passkey);
787 | }
788 |
789 | export function decryptKey(passkey: string) {
790 | return atob(passkey);
791 | }
792 | ```
793 |
794 |
795 |
796 | lib/utils.ts
713 |
714 | ```typescript
715 | import { type ClassValue, clsx } from "clsx";
716 | import { twMerge } from "tailwind-merge";
717 |
718 | export function cn(...inputs: ClassValue[]) {
719 | return twMerge(clsx(inputs));
720 | }
721 |
722 | export const parseStringify = (value: any) => JSON.parse(JSON.stringify(value));
723 |
724 | export const convertFileToUrl = (file: File) => URL.createObjectURL(file);
725 |
726 | // FORMAT DATE TIME
727 | export const formatDateTime = (dateString: Date | string) => {
728 | const dateTimeOptions: Intl.DateTimeFormatOptions = {
729 | // weekday: "short", // abbreviated weekday name (e.g., 'Mon')
730 | month: "short", // abbreviated month name (e.g., 'Oct')
731 | day: "numeric", // numeric day of the month (e.g., '25')
732 | year: "numeric", // numeric year (e.g., '2023')
733 | hour: "numeric", // numeric hour (e.g., '8')
734 | minute: "numeric", // numeric minute (e.g., '30')
735 | hour12: true, // use 12-hour clock (true) or 24-hour clock (false)
736 | };
737 |
738 | const dateDayOptions: Intl.DateTimeFormatOptions = {
739 | weekday: "short", // abbreviated weekday name (e.g., 'Mon')
740 | year: "numeric", // numeric year (e.g., '2023')
741 | month: "2-digit", // abbreviated month name (e.g., 'Oct')
742 | day: "2-digit", // numeric day of the month (e.g., '25')
743 | };
744 |
745 | const dateOptions: Intl.DateTimeFormatOptions = {
746 | month: "short", // abbreviated month name (e.g., 'Oct')
747 | year: "numeric", // numeric year (e.g., '2023')
748 | day: "numeric", // numeric day of the month (e.g., '25')
749 | };
750 |
751 | const timeOptions: Intl.DateTimeFormatOptions = {
752 | hour: "numeric", // numeric hour (e.g., '8')
753 | minute: "numeric", // numeric minute (e.g., '30')
754 | hour12: true, // use 12-hour clock (true) or 24-hour clock (false)
755 | };
756 |
757 | const formattedDateTime: string = new Date(dateString).toLocaleString(
758 | "en-US",
759 | dateTimeOptions
760 | );
761 |
762 | const formattedDateDay: string = new Date(dateString).toLocaleString(
763 | "en-US",
764 | dateDayOptions
765 | );
766 |
767 | const formattedDate: string = new Date(dateString).toLocaleString(
768 | "en-US",
769 | dateOptions
770 | );
771 |
772 | const formattedTime: string = new Date(dateString).toLocaleString(
773 | "en-US",
774 | timeOptions
775 | );
776 |
777 | return {
778 | dateTime: formattedDateTime,
779 | dateDay: formattedDateDay,
780 | dateOnly: formattedDate,
781 | timeOnly: formattedTime,
782 | };
783 | };
784 |
785 | export function encryptKey(passkey: string) {
786 | return btoa(passkey);
787 | }
788 |
789 | export function decryptKey(passkey: string) {
790 | return atob(passkey);
791 | }
792 | ```
793 |
794 |
797 |
798 |
799 | ```typescript
800 | import { z } from "zod";
801 |
802 | export const UserFormValidation = z.object({
803 | name: z
804 | .string()
805 | .min(2, "Name must be at least 2 characters")
806 | .max(50, "Name must be at most 50 characters"),
807 | email: z.string().email("Invalid email address"),
808 | phone: z
809 | .string()
810 | .refine((phone) => /^\+\d{10,15}$/.test(phone), "Invalid phone number"),
811 | });
812 |
813 | export const PatientFormValidation = z.object({
814 | name: z
815 | .string()
816 | .min(2, "Name must be at least 2 characters")
817 | .max(50, "Name must be at most 50 characters"),
818 | email: z.string().email("Invalid email address"),
819 | phone: z
820 | .string()
821 | .refine((phone) => /^\+\d{10,15}$/.test(phone), "Invalid phone number"),
822 | birthDate: z.coerce.date(),
823 | gender: z.enum(["Male", "Female", "Other"]),
824 | address: z
825 | .string()
826 | .min(5, "Address must be at least 5 characters")
827 | .max(500, "Address must be at most 500 characters"),
828 | occupation: z
829 | .string()
830 | .min(2, "Occupation must be at least 2 characters")
831 | .max(500, "Occupation must be at most 500 characters"),
832 | emergencyContactName: z
833 | .string()
834 | .min(2, "Contact name must be at least 2 characters")
835 | .max(50, "Contact name must be at most 50 characters"),
836 | emergencyContactNumber: z
837 | .string()
838 | .refine(
839 | (emergencyContactNumber) => /^\+\d{10,15}$/.test(emergencyContactNumber),
840 | "Invalid phone number"
841 | ),
842 | primaryPhysician: z.string().min(2, "Select at least one doctor"),
843 | insuranceProvider: z
844 | .string()
845 | .min(2, "Insurance name must be at least 2 characters")
846 | .max(50, "Insurance name must be at most 50 characters"),
847 | insurancePolicyNumber: z
848 | .string()
849 | .min(2, "Policy number must be at least 2 characters")
850 | .max(50, "Policy number must be at most 50 characters"),
851 | allergies: z.string().optional(),
852 | currentMedication: z.string().optional(),
853 | familyMedicalHistory: z.string().optional(),
854 | pastMedicalHistory: z.string().optional(),
855 | identificationType: z.string().optional(),
856 | identificationNumber: z.string().optional(),
857 | identificationDocument: z.custom().optional(),
858 | treatmentConsent: z
859 | .boolean()
860 | .default(false)
861 | .refine((value) => value === true, {
862 | message: "You must consent to treatment in order to proceed",
863 | }),
864 | disclosureConsent: z
865 | .boolean()
866 | .default(false)
867 | .refine((value) => value === true, {
868 | message: "You must consent to disclosure in order to proceed",
869 | }),
870 | privacyConsent: z
871 | .boolean()
872 | .default(false)
873 | .refine((value) => value === true, {
874 | message: "You must consent to privacy in order to proceed",
875 | }),
876 | });
877 |
878 | export const CreateAppointmentSchema = z.object({
879 | primaryPhysician: z.string().min(2, "Select at least one doctor"),
880 | schedule: z.coerce.date(),
881 | reason: z
882 | .string()
883 | .min(2, "Reason must be at least 2 characters")
884 | .max(500, "Reason must be at most 500 characters"),
885 | note: z.string().optional(),
886 | cancellationReason: z.string().optional(),
887 | });
888 |
889 | export const ScheduleAppointmentSchema = z.object({
890 | primaryPhysician: z.string().min(2, "Select at least one doctor"),
891 | schedule: z.coerce.date(),
892 | reason: z.string().optional(),
893 | note: z.string().optional(),
894 | cancellationReason: z.string().optional(),
895 | });
896 |
897 | export const CancelAppointmentSchema = z.object({
898 | primaryPhysician: z.string().min(2, "Select at least one doctor"),
899 | schedule: z.coerce.date(),
900 | reason: z.string().optional(),
901 | note: z.string().optional(),
902 | cancellationReason: z
903 | .string()
904 | .min(2, "Reason must be at least 2 characters")
905 | .max(500, "Reason must be at most 500 characters"),
906 | });
907 |
908 | export function getAppointmentSchema(type: string) {
909 | switch (type) {
910 | case "create":
911 | return CreateAppointmentSchema;
912 | case "cancel":
913 | return CancelAppointmentSchema;
914 | default:
915 | return ScheduleAppointmentSchema;
916 | }
917 | }
918 | ```
919 |
920 |
921 |
922 | lib/validation.ts
798 |
799 | ```typescript
800 | import { z } from "zod";
801 |
802 | export const UserFormValidation = z.object({
803 | name: z
804 | .string()
805 | .min(2, "Name must be at least 2 characters")
806 | .max(50, "Name must be at most 50 characters"),
807 | email: z.string().email("Invalid email address"),
808 | phone: z
809 | .string()
810 | .refine((phone) => /^\+\d{10,15}$/.test(phone), "Invalid phone number"),
811 | });
812 |
813 | export const PatientFormValidation = z.object({
814 | name: z
815 | .string()
816 | .min(2, "Name must be at least 2 characters")
817 | .max(50, "Name must be at most 50 characters"),
818 | email: z.string().email("Invalid email address"),
819 | phone: z
820 | .string()
821 | .refine((phone) => /^\+\d{10,15}$/.test(phone), "Invalid phone number"),
822 | birthDate: z.coerce.date(),
823 | gender: z.enum(["Male", "Female", "Other"]),
824 | address: z
825 | .string()
826 | .min(5, "Address must be at least 5 characters")
827 | .max(500, "Address must be at most 500 characters"),
828 | occupation: z
829 | .string()
830 | .min(2, "Occupation must be at least 2 characters")
831 | .max(500, "Occupation must be at most 500 characters"),
832 | emergencyContactName: z
833 | .string()
834 | .min(2, "Contact name must be at least 2 characters")
835 | .max(50, "Contact name must be at most 50 characters"),
836 | emergencyContactNumber: z
837 | .string()
838 | .refine(
839 | (emergencyContactNumber) => /^\+\d{10,15}$/.test(emergencyContactNumber),
840 | "Invalid phone number"
841 | ),
842 | primaryPhysician: z.string().min(2, "Select at least one doctor"),
843 | insuranceProvider: z
844 | .string()
845 | .min(2, "Insurance name must be at least 2 characters")
846 | .max(50, "Insurance name must be at most 50 characters"),
847 | insurancePolicyNumber: z
848 | .string()
849 | .min(2, "Policy number must be at least 2 characters")
850 | .max(50, "Policy number must be at most 50 characters"),
851 | allergies: z.string().optional(),
852 | currentMedication: z.string().optional(),
853 | familyMedicalHistory: z.string().optional(),
854 | pastMedicalHistory: z.string().optional(),
855 | identificationType: z.string().optional(),
856 | identificationNumber: z.string().optional(),
857 | identificationDocument: z.custom
923 |
924 |
925 | ```typescript
926 | export const GenderOptions = ["Male", "Female", "Other"];
927 |
928 | export const PatientFormDefaultValues = {
929 | firstName: "",
930 | lastName: "",
931 | email: "",
932 | phone: "",
933 | birthDate: new Date(Date.now()),
934 | gender: "Male" as Gender,
935 | address: "",
936 | occupation: "",
937 | emergencyContactName: "",
938 | emergencyContactNumber: "",
939 | primaryPhysician: "",
940 | insuranceProvider: "",
941 | insurancePolicyNumber: "",
942 | allergies: "",
943 | currentMedication: "",
944 | familyMedicalHistory: "",
945 | pastMedicalHistory: "",
946 | identificationType: "Birth Certificate",
947 | identificationNumber: "",
948 | identificationDocument: [],
949 | treatmentConsent: false,
950 | disclosureConsent: false,
951 | privacyConsent: false,
952 | };
953 |
954 | export const IdentificationTypes = [
955 | "Birth Certificate",
956 | "Driver's License",
957 | "Medical Insurance Card/Policy",
958 | "Military ID Card",
959 | "National Identity Card",
960 | "Passport",
961 | "Resident Alien Card (Green Card)",
962 | "Social Security Card",
963 | "State ID Card",
964 | "Student ID Card",
965 | "Voter ID Card",
966 | ];
967 |
968 | export const Doctors = [
969 | {
970 | image: "/assets/images/dr-green.png",
971 | name: "John Green",
972 | },
973 | {
974 | image: "/assets/images/dr-cameron.png",
975 | name: "Leila Cameron",
976 | },
977 | {
978 | image: "/assets/images/dr-livingston.png",
979 | name: "David Livingston",
980 | },
981 | {
982 | image: "/assets/images/dr-peter.png",
983 | name: "Evan Peter",
984 | },
985 | {
986 | image: "/assets/images/dr-powell.png",
987 | name: "Jane Powell",
988 | },
989 | {
990 | image: "/assets/images/dr-remirez.png",
991 | name: "Alex Ramirez",
992 | },
993 | {
994 | image: "/assets/images/dr-lee.png",
995 | name: "Jasmine Lee",
996 | },
997 | {
998 | image: "/assets/images/dr-cruz.png",
999 | name: "Alyana Cruz",
1000 | },
1001 | {
1002 | image: "/assets/images/dr-sharma.png",
1003 | name: "Hardik Sharma",
1004 | },
1005 | ];
1006 |
1007 | export const StatusIcon = {
1008 | scheduled: "/assets/icons/check.svg",
1009 | pending: "/assets/icons/pending.svg",
1010 | cancelled: "/assets/icons/cancelled.svg",
1011 | };
1012 | ```
1013 |
1014 |
1015 |
1016 | ## 🔗 Assets
1017 |
1018 | Public assets used in the project can be found [here](https://drive.google.com/file/d/1yGvWFeSaH1_-aiQ1gejT23lqz5979RKB/view?usp=sharing)
1019 |
1020 |
1021 | ## 💡 What I Learned
1022 |
1023 | I gained valuable experience in multiple areas of modern web development.
1024 |
1025 | ##### **Next.js Development**
1026 |
1027 | - Optimized Images
1028 | - API Routes
1029 | - Server-Side Rendering (SSR) and Static Site Generation (SSG)
1030 | - File-based routing system (dynamic routes)
1031 | - Data Fetching Methods
1032 | - SEO Optimization
1033 | - Deployment
1034 |
1035 |
1036 | ##### **Tailwind CSS**
1037 |
1038 | - Utility-First CSS Approach
1039 | - Responsive Design
1040 | - Customization and Theming
1041 | - Advanced Layout Techniques
1042 | - Pseudo-Classes and States
1043 |
1044 | ##### **Appwrite Backend Services**
1045 |
1046 | - User Authentication
1047 | - Database Integration
1048 | - File Storage
1049 | - Real-Time Data
1050 |
1051 | ##### **Twilio SMS Integration**
1052 |
1053 | - Sending SMS Notifications
1054 | - API Interaction
1055 | - Error Handling
1056 |
1057 |
1058 |
1059 |
1060 | ##### **Version Control with Git**
1061 |
1062 | - Committing changes and managing branches.
1063 | - Collaborating and tracking progress over time.
1064 | - Maintained clear documentation and code comments.
1065 |
1066 |
1067 | ## 🤝 Acknowledgments
1068 |
1069 | Adrian Hajdin: For the comprehensive tutorial and
1070 | guidance. [JavaScript Mastery](https://www.youtube.com/watch?v=FTH6Dn3AyIQ&t=6761s&ab_channel=JavaScriptMastery).
1071 |
1072 | ## 📄 License
1073 |
1074 | This project is licensed under the MIT License.
1075 |
1076 | Note: This project is for educational purposes and is free to use under the terms of the MIT License.
1077 |
--------------------------------------------------------------------------------