Checktrade Medrep Monitoring System

2025Frontend & Systems Architect

Project

The system enables medical representatives to log client interactions, capture digital signatures, and schedule hospital visits through a responsive, offline-aware dashboard. Simultaneously, managers gain access to rich data tables, analytics, dynamic maps, and automated Excel/PDF reporting tools to monitor field performance transparently.

Next.js ReactTypeScriptSupabaseTanStack React QueryLeaflet & React LeafletVitest & React Testing Library

Challenge

Pharmaceutical companies often suffer from high operational opacity and manual reporting overhead, resulting in untrustworthy activity logs and uncoordinated doctor visits. The core engineering challenge was building a highly responsive web application that manages real-time updates and strict multi-role authentication under fluctuating network environments.

Solution

To solve this, I engineered a role-based Next.js 15 application utilizing Supabase real-time subscriptions, Postgres row-level security (RLS), and TanStack Query state sync. This stack provides medical representatives with fluid visit logging, dynamic offline-resilient forms, and instant interactive mapping, while automating executive reporting.

DB Sync Latency

<200ms

Unit Test Coverage

90%+

CI/CD Build pipeline

100% Green

Highlights

Key Project Highlights

Optimistic UI & Real-Time Syncing: Leverages Supabase Postgres subscriptions and custom TanStack Query mutations to update dashboards and sidebar notification counts instantly, providing a zero-latency UX.

Geospatial & Sign-off Verification: Integrated client-side HTML5 canvas signatures and Leaflet maps to log authenticated coordinates and secure physical doctor validations.

Granular Role-Based Access Control: Built enterprise-grade protection for managers and medical representatives via custom middleware, secure invitation gates, and distinct layout directories.

Automated Document Exports: Created high-fidelity report download actions producing clean PDF tables and multi-sheet Excel files directly from raw filtered metrics using ExcelJS and jsPDF.

CI/CD Quality Control Precommit Hooks: Implemented an automated pipeline using Husky and lint-staged to enforce rigid TypeScript compilation, ESLint styling standards, and test suites prior to commits.

Next project

LuckyBingo

LuckyBingo is a real-time, concurrent multiplayer game utilizing a client-server distributed architecture to keep players synchronized instantly across networks. Developed as a showcase for Parallel and Distributed Computing (PDC), it enforces consistent game rules and cheating prevention through a server-authoritative backend.

Open next project