CareSync is a healthcare appointment management app built with Next.js, TypeScript, Tailwind CSS, shadcn/ui, and Appwrite. It lets patients create an account, complete medical registration, upload identification documents, request appointments, and receive appointment status updates. Admins can review, schedule, and cancel appointments from a dashboard.
- Patient account creation through Appwrite Users
- Patient profile and medical information registration
- Identification document upload through Appwrite Storage
- Appointment request flow with success confirmation
- Admin dashboard with total, scheduled, pending, and cancelled appointment counts
- Appointment scheduling and cancellation workflows
- SMS notifications through Appwrite Messaging
- Form validation with React Hook Form and Zod
- Responsive UI built with Tailwind CSS and shadcn/ui components
- Next.js 14 App Router
- React 18
- TypeScript
- Tailwind CSS
- shadcn/ui and Radix UI
- Appwrite
- React Hook Form
- Zod
- TanStack Table
| Route | Description |
|---|---|
/ |
Patient onboarding and account creation |
/?admin=true |
Opens the admin passkey modal |
/patients/[userId]/register |
Patient registration form |
/patients/[userId]/new-appointment |
Appointment request form |
/patients/[userId]/new-appointment/success |
Appointment submission confirmation |
/admin |
Appointment management dashboard |
- Node.js 18 or newer
- npm
- An Appwrite project with Users, Databases, Storage, and Messaging configured
Install dependencies:
npm installCreate a .env.local file in the project root:
NEXT_PUBLIC_ENDPOINT=https://cloud.appwrite.io/v1
PROJECT_ID=
API_KEY=
DATABASE_ID=
PATIENT_COLLECTION_ID=
DOCTOR_COLLECTION_ID=
APPOINTMENT_COLLECTION_ID=
NEXT_PUBLIC_BUCKET_ID=
NEXT_PUBLIC_ADMIN_PASSKEY=111111Start the development server:
npm run devOpen http://localhost:3000 in your browser.
| Command | Description |
|---|---|
npm run dev |
Start the local development server |
npm run build |
Create a production build |
npm run start |
Start the production server |
npm run lint |
Run the Next.js lint command |
The server Appwrite client is configured in lib/appwrite.config.ts. To run the app, your Appwrite project should include:
- A database for patient and appointment data
- A patient collection matching the registration fields
- An appointment collection matching the appointment fields
- A storage bucket for uploaded identification documents
- Messaging/SMS configuration for appointment notifications
- A server API key with permission to access Users, Databases, Storage, and Messaging
The doctor list is currently defined locally in constants/index.ts. DOCTOR_COLLECTION_ID is still read from the environment because it is part of the Appwrite config.
app/
admin/
patients/[userId]/
components/
forms/
table/
ui/
constants/
lib/
actions/
appwrite.config.ts
validation.ts
public/
assets/
types/
app/page.tsx- patient onboarding and admin entry pointapp/admin/page.tsx- admin dashboardcomponents/forms/PatientForm.tsx- initial patient account formcomponents/forms/RegisterForm.tsx- patient registration formcomponents/forms/AppointmentForm.tsx- appointment creation, scheduling, and cancellation formlib/actions/patient.actions.ts- Appwrite user and patient actionslib/actions/appointment.actions.ts- appointment actions and SMS notification logiclib/validation.ts- Zod form validation schemasconstants/index.ts- static options for doctors, genders, IDs, and statuses
Before deploying, add the same environment variables from .env.local to your hosting provider. The app is designed for platforms that support Next.js server actions, such as Vercel.
Build locally to verify the production bundle:
npm run build- Admin access is controlled by
NEXT_PUBLIC_ADMIN_PASSKEY. - Because the admin passkey is public client-side configuration, use it only as a lightweight demo gate unless you add stronger authentication.
- Uploaded identification files are stored in Appwrite Storage.
- Appointment status values are expected to be
scheduled,pending, orcancelled.