Background
International grant programmes — from government scholarships to university-funded exchanges — require careful tracking across multiple stages: awareness, application, selection, placement, and completion. At the International Office, managing these journeys across multiple grant types and dozens of applicants per cycle created a coordination overhead that was hard to manage without a dedicated tool. This dashboard was built to centralise that information: one place to see every active grant, every applicant's stage, every upcoming deadline, and every outcome — without chasing status updates across emails and spreadsheets.
Purpose
International grant programmes span multiple stages — from awareness and application through to placement and completion — and require precise deadline tracking across concurrent cycles. The dashboard exists to give international office staff and prospective applicants a single place to discover relevant grants, track application stages, and never miss a submission deadline.
Problems It Solves
Scattered Grant Information
Grant details, applicant lists, deadlines, and outcomes were distributed across emails, shared drives, and spreadsheets — creating a fragmented and unreliable record.
Deadline Management
Grant cycles have hard deadlines at multiple stages. Missing a submission window meant losing funding for the entire cohort — yet there was no centralised deadline view.
No Outcome Visibility
Leadership needed to report on grant performance — acceptance rates, funding secured, placement outcomes — but producing those figures required manual data aggregation.
Applicant Stage Tracking
With multiple applicants per grant and multiple stages per applicant, tracking who was at which stage across several concurrent grant cycles was error-prone.
Features Available
Realtime Updates
Supabase Realtime subscriptions push INSERT/UPDATE/DELETE events from the grants table to every connected client instantly — no polling, no page refresh required.
Deadline Calendar
A dedicated calendar view surfaces every grant deadline across active programmes, sorted by urgency so no submission window is missed.
Local & Remote Bookmarks
Public users can bookmark grants locally; authenticated users get their bookmarks synced across devices via Supabase, persisting across sessions.
Grant Matching Engine
A matching view cross-references a user's faculty and programme against grant eligibility criteria, surfacing the most relevant opportunities automatically.
Row Level Security Throughout
Every table is protected by Supabase RLS — public read, admin write. The anon key is safely exposed in the client bundle; the service_role key is never used in frontend code.
Admin File Attachments
Admins can upload supporting documents (PDFs, forms) directly to Supabase Storage from the grant form — drag-and-drop or file picker, with a full audit trail in the activity log.
How It Was Handled
Centralised Grant Overview
All active and completed grants in one dashboard — each with type, funding body, cycle dates, applicant count, and current status visible at a glance.
Deadline Timeline View
A timeline panel surfaces upcoming deadlines across all active grants, sorted by urgency — ensuring no submission window is missed.
Outcome Analytics
Acceptance rates, funding totals, and placement outcomes are calculated automatically from the data and presented in charts ready for leadership reporting.
Stage-Based Pipeline View
A Kanban-style pipeline shows every applicant's current stage across active grants — making it easy to see where the bottlenecks are and who needs follow-up.
UI / UX Design
The design prioritises time-critical information: deadline proximity, application stage, and grant relevance are the three data points that determine what a user needs to see first. Urgency indicators and a persistent deadline calendar ensure that no grant window closes unnoticed.
Deadline-First Priority
Grants are sorted by deadline urgency by default. Colour-coded countdown badges (green / amber / red) communicate time pressure at a glance.
Persistent Deadline Calendar
A monthly calendar view marks every active grant deadline — users can switch between list and calendar views depending on their planning horizon.
Matching Engine UI
A faculty/programme selector surfaces the most relevant grants for the user's profile — reducing the time spent reading eligibility criteria manually.
Bookmark System
Public users get local bookmarks; authenticated users get cross-device sync via Supabase — building a personal grant shortlist without requiring sign-up.
Frontend
Vanilla JavaScript with Chart.js for analytics and Tailwind CSS for layout. Supabase's JavaScript client handles Realtime subscriptions, auth, and storage — all without a frontend framework. The matching engine is a pure client-side algorithm that cross-references user input against grant eligibility rules stored in the database.
Supabase Realtime Client
The JS SDK subscribes to INSERT/UPDATE/DELETE events on the grants table — live updates propagate to all connected clients without a page refresh.
Chart.js Analytics
Acceptance rate trends, grant type distribution, and funding body breakdowns are rendered with Chart.js — updating automatically as data changes.
Client-Side Matching Algorithm
The grant matching engine runs entirely in the browser: it filters grants by faculty, programme, nationality, and GPA threshold in milliseconds with no server round-trip.
Tailwind CSS
Utility-first styling with a custom dark-mode palette. All components — cards, modals, calendar, table — share a consistent design token system defined in the Tailwind config.
Backend & Database
Supabase provides the complete backend stack: Postgres for grant and applicant data, Realtime for live updates, Auth for authenticated admin and student roles, and Storage for grant document attachments — all protected by Row Level Security.
Supabase Postgres
Tables for grants, applications, stages, bookmarks, and activity logs — all with RLS policies. Public users can read published grants; admins can write across all tables.
Supabase Realtime
Postgres Changes subscriptions push live INSERT/UPDATE/DELETE events to the frontend — no polling, no websocket management, no extra infrastructure.
Row Level Security
Every table has RLS enabled. The anon key is safely used in the frontend bundle; no service_role key is ever exposed to the client.
Storage & File Uploads
Admins can upload grant-related documents (application forms, guidelines, results) directly from the dashboard — drag-and-drop with a full audit trail.
Live Preview