Clinic Appointment Scheduling System (CASS)

CASS is a clinic appointment scheduling web application built as an academic team project. It is designed to help patients, doctors, and administrators manage appointment booking, schedules, patient records, and clinic communication more clearly.

This repository forms part of my GitHub student portfolio for bursaries, internships, graduate programmes, and future Honours opportunities.

Project Overview

The system supports role-based workflows for:

• Patients booking and managing appointments.
• Doctors managing schedules, availability, and patient records.
• Administrators managing users and clinic-level information.
• Notifications and appointment communication through Supabase functions.

Team Project Note

This was completed as an academic team project. The repository represents combined team work across frontend pages, UI components, Supabase integration, authentication, database migrations, appointment workflows, notifications, and documentation.

I include this project in my portfolio as evidence of collaborative software development, exposure to full-stack project integration, and experience working with a database-backed healthcare scheduling system.

It should not be read as a claim that I personally built every feature in the system.

Purpose

Clinic appointment systems need to reduce booking confusion, improve schedule visibility, and help different users access the right information. This project explores those ideas through a student-level web application with patient, doctor, and admin roles.

Features

• User authentication.
• Patient, doctor, and admin roles.
• Appointment booking.
• Doctor schedule and availability views.
• Patient records and medical record views.
• User profile management.
• Notification settings.
• Supabase database migrations.
• Supabase Edge Functions for notification workflows.
• Responsive React interface using reusable UI components.

Technologies Used

Area	Technologies
Frontend	React, TypeScript, Vite
UI	Tailwind CSS, shadcn/ui, Radix UI
Routing	React Router
Backend / Database	Supabase, PostgreSQL, Row Level Security
Forms / Validation	React Hook Form, Zod
State / Data	TanStack Query
Tooling	npm, ESLint, Git, GitHub

Architecture / Folder Structure

Clinic-Appointment-System/
├── public/                 Static assets
├── src/
│   ├── components/         Reusable UI, auth, dashboard, records, layout components
│   ├── hooks/              Authentication and shared React hooks
│   ├── integrations/       Supabase client and generated database types
│   ├── lib/                Utility functions
│   ├── pages/              Main route pages
│   ├── App.tsx             Application routes
│   └── main.tsx            React entry point
├── supabase/
│   ├── functions/          Notification-related Edge Functions
│   └── migrations/         Database schema and policy migrations
├── .env.example            Placeholder environment variable template
├── package.json
└── README.md

Environment Variables

This project uses a local .env file for Supabase configuration. A placeholder .env.example file is included so the required variable names are visible without committing real values.

VITE_SUPABASE_PROJECT_ID=your_supabase_project_id
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_PUBLISHABLE_KEY=your_supabase_publishable_key

Real .env values should never be committed to GitHub. The local .env file is ignored by .gitignore.

Setup Instructions

Prerequisites

• Node.js 18+
• npm
• Supabase project access, if running against a real backend

Install Dependencies

npm install

Configure Environment Variables

Create a local .env file from .env.example:

copy .env.example .env

Then fill in your own Supabase project values.

Run The App

npm run dev

The Vite dev server is configured in vite.config.ts.

Screenshots

Screenshots will be added after the interface is reviewed and cleaned.

Screen	Status
Landing / home page	To be added
Authentication page	To be added
Patient dashboard	To be added
Doctor dashboard	To be added
Admin dashboard	To be added
Appointment booking	To be added
Patient records	To be added

What I Learned

• How role-based applications are structured.
• How React routes and reusable components support a larger application.
• How Supabase can provide authentication, database storage, migrations, and serverless functions.
• How database policies and relationships matter in healthcare-style systems.
• How important it is to separate real environment values from public source code.
• How to improve an academic project for a more professional portfolio.

Challenges

• Keeping role-based access understandable across patients, doctors, and admins.
• Managing Supabase configuration safely.
• Working with generated database types and migrations.
• Keeping the repository clean after template-generated setup.
• Presenting team project work honestly without overstating individual authorship.

Future Improvements

• Remove or replace remaining template metadata.
• Rename the package from the starter template name.
• Add screenshots and a short demo walkthrough.
• Add clearer test/demo accounts if appropriate.
• Add basic tests for important workflows.
• Improve README accuracy as cleanup continues.
• Review UI and responsiveness before publishing/pinning.

Academic / Team Project Note

This project was built for learning purposes as part of an academic team project. It is presented as a student portfolio project to show collaborative software development, database-backed application design, and full-stack learning.

It should not be read as a claim that I personally built every feature in the system.