A full-stack calendar-based appointment management system built as a prototype.
This solution allows healthcare staff to view, create, edit, and filter appointments across monthly, weekly, and list views.

🔗 Deployed on Vercel

• Next.js (App Router)
• TypeScript (Fully typed)
• TailwindCSS
• shadcn/ui (UI components like buttons, cards, modal)
• Supabase (Database and API)

• ✅ Monthly Calendar View
• ✅ Weekly Calendar View (6:00–22:00)
• ✅ Appointment List View
• ✅ Create / Edit / Delete appointments
• ✅ Supabase integration for all CRUD operations
• ✅ Filtering appointments by category, patient, and date range
• ✅ Responsive design for mobile, tablet, and desktop

• 🔄 Hover Cards using shadcn/ui to preview appointment info
• 🧩 Modal validation for creating/editing appointments
• 🔁 Week and month navigation (prev/next buttons)
• 📡 Real-time Supabase sync via supabase.channel()
• 🧪 Unit testing with Vitest or Jest

This app connects to Supabase for:

• 📥 Fetching appointments from appointments table
• ➕ Creating new appointments via form/modal
• 🗑️ Deleting appointments via deleteAppointment.ts
• 🎯 Filtering by category or patient
• 🔐 Using lib/supabaseClient.ts for client setup

💡 The schema matches the official challenge schema and is respected throughout.

src/
├── app/                   # Next.js layout & entry page
├── modules/
│   ├── calendar/          # Weekly and monthly views
│   └── appointment/       # Appointment logic and components
├── shared/
│   ├── lib/               # Supabase & utility functions
│   ├── types/             # Fully defined TypeScript interfaces
│   └── ui/                # Shared UI components

git clone https://github.com/rafeyshah/vocare-webapp.git
cd vocare-webapp

npm install
# or
yarn install

By default, it uses the shared Supabase DB.
For custom setup, edit lib/supabaseClient.ts.

export const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)

npm run dev

• Project now uses strict types (no any or unknown)
• All appointments are typed with:

  Appointment {
    id: string;
    title: string;
    start: string;
    end: string;
    ...
  }

• Found in shared/types/appointment.ts, patient.ts, and category.ts

• shadcn/ui
• Supabase
• TailwindCSS
• Vocare Fullstack Challenge Team

Developed by Rafey Shah
📧 dev.abdulrafey@gmail.com
🌐 github.com/rafeyshah