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.
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.
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.
This was a team project with multiple contributors. Within the team, my areas of work were:
- Authentication and Supabase integration — the Supabase client, auth flows, and role-based routing that gate patient, doctor, and admin views.
- Appointment booking and records — the booking workflow, schedule views, and patient record handling.
- Notification pipeline — the Supabase functions and notification settings that manage appointment communication.
- Dashboards and UI — the patient, doctor, and admin dashboard layouts and reusable UI components.
The system was built collaboratively by all team members (contributors included SammyKM-25, xolanisiphe, itu1111, and Lathitha27, alongside myself). This section records the areas I personally worked on; it should not be read as a claim that I built every feature alone.
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.
- 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.
| 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 |
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
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_keyReal .env values should never be committed to GitHub. The local .env file is ignored by .gitignore.
- Node.js 18+
- npm
- Supabase project access, if running against a real backend
npm installCreate a local .env file from .env.example:
copy .env.example .envThen fill in your own Supabase project values.
npm run devThe Vite dev server is configured in vite.config.ts.
| Screen | Preview |
|---|---|
| Landing / home page |  |
| Contact sales |  |
| Create account |  |
| Patient dashboard (light) |  |
| Book appointment |  |
| Medical record detail |  |
| Profile settings |  |
| Patient dashboard (dark) |  |
| Admin dashboard |  |
| User management |  |
| Analytics — appointment trends |  |
| Analytics — status distribution |  |
- 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.
- 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.
- 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.
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.