Key Takeaways
- MedPro centralizes clinical protocols, contacts, and resources for trauma center teams in a single mobile app – eliminating the friction of binders, shared drives, and disjointed communication
- Group-based access control ensures that clinicians only see the protocols relevant to their unit – reducing cognitive load in high-stakes environments
- A searchable protocol library with category filtering and bookmarking lets surgeons, nurses, and residents locate critical information in seconds
- Built-in PDF resource attachment means procedure guidelines, ventilation setup docs, and wound care standards travel with the protocol – not stored separately
- A Contacts tab filtered by group provides instant access to on-call staff and unit-specific phone numbers, removing the need for a separate directory
Why do trauma centers still rely on paper binders, shared network drives, and WhatsApp threads to manage clinical protocols?
Because no one built them a better tool – until now.
In a Level I Trauma Center, a resident rotating through the Trauma Surgical Unit at 2 a.m. should not be flipping through a laminated binder to find the hospital’s triage system. A charge nurse covering General Medical Protocols should not be emailing the charge pharmacist to get the current list of anesthetic techniques. An attending surgeon covering Respiration should not be searching a shared network folder to find the latest mechanical ventilation setup PDF.
These are not edge cases. These are everyday friction points that compound into slower response times, inconsistent protocol adherence, and – in the worst cases – preventable errors.
MedPro is a mobile application built specifically for UC Health’s Trauma Center that addresses all of this. It delivers a unified, group-aware protocol library, a searchable resource directory, built-in PDF document access, and a contacts directory – all organized around the clinical units (groups) a provider belongs to.
This guide walks through exactly how MedPro was conceptualized, designed, and built – and what healthcare engineering teams need to know to replicate or extend this approach for their own institutions.
Why Trauma Centers Struggle With Protocol Management
Before getting into the how, it is worth understanding the why. Clinical protocol management sounds bureaucratic, but the operational reality inside a trauma center is genuinely complex:
- A trauma center typically runs distinct protocol sets across General Medical, Respiration, Trauma Surgical Unit (TSU), and critical care – each with sub-categories specific to that unit.Multiple units, multiple sets of protocols.
- Residents, attendings, and nurses rotate through units on short cycles. Knowing which protocols apply to your current rotation requires navigating an institutional knowledge system that is rarely onboarded well. Rotating staff.
- Most institutions store protocols as PDFs on shared drives or intranet portals – systems that are not mobile-friendly, not searchable at the protocol level, and not organized around the individual clinician’s context. Static document repositories.
- Finding who is on call in a specific unit – and what their current role is – requires calls to the operator, text threads, or printed on-call schedules taped to nursing stations. No unified contacts directory by unit.
- When a protocol changes, ensuring every provider has the updated version is an operations problem most institutions have not solved at scale. Protocol versioning.
The core problem: clinical protocol information is critical, time-sensitive, and highly contextual – but is almost universally stored in systems designed for administrative convenience, not clinical access.
What Is MedPro and What Does It Do?
MedPro is a cross-platform mobile application built for UC Health’s Trauma Center that solves the above problems through four core capabilities:
| Feature | Description |
| Protocol Library | A fully categorized, searchable directory of clinical protocols organized by medical domain – Anatomy, Anesthetic Techniques, Brain and Spinal Cord, Critical Care, Diagnostic Imaging, and more – accessible from the home screen. |
| Group-Based Access | Providers join clinical groups (General Medical Protocols, Respiration, TSU) which surface only the protocols relevant to their unit. Groups also manage a dedicated Contacts list and Transfer protocols. |
| PDF Resource Attachments | Each protocol can hold attached PDF resources – clinical procedure guides, ventilation setup documents, wound care standards – viewable directly from within the app via OneDrive or Google Drive integration. |
| Contacts Directory | A Contacts tab filtered by group membership gives every provider instant access to on-call staff, unit coordinators, and department phone numbers – no operator needed. |
Architecture Overview: How MedPro Is Built
MedPro is built on a modern, unified web-to-native stack – a deliberate choice that maximises code reuse across the web PWA and the native iOS/Android binaries while keeping the team in a single TypeScript codebase. Here is the full breakdown:
1. Frontend & Mobile Bridge
| Layer | Technology | Why It Was Chosen |
| UI Library | React 19 | Latest stable release – concurrent rendering, improved transitions, and the new Actions API reduce boilerplate for async form handling, critical for login and profile update flows |
| Meta-Framework | Next.js 15 (App Router) | File-based routing, server components, and built-in image optimisation accelerate development; the App Router enables per-route layouts that map cleanly to MedPro’s tab-based navigation |
| Language | TypeScript | End-to-end type safety across the frontend, API calls, and Supabase schema – reduces runtime errors in a clinical context where correctness is non-negotiable |
| Mobile Bridge | Capacitor 8 | Wraps the Next.js web app as a native Android and iOS binary with zero separate codebase; provides access to native device APIs (filesystem, network status, preferences, splash screen) through a consistent plugin interface |
| PWA | next-pwa | Makes the web version installable as a Progressive Web App – users on devices not running the native app still get an app-like experience with offline support and home screen installation |
2. Backend & Services
| Layer | Technology | Why It Was Chosen |
| Database | Supabase (PostgreSQL) | Managed PostgreSQL with row-level security maps directly to MedPro’s group-based access model – protocol rows are readable only by members of the associated group, enforced at the database layer |
| Authentication | Supabase Auth | Built-in email/password auth with JWT session management; supports future institutional SSO via OAuth2 providers without infrastructure changes |
| Realtime | Supabase Realtime | Protocol updates and new resource attachments are pushed to connected clients instantly – when a clinical educator updates a protocol PDF, every logged-in provider sees the change without a manual refresh |
3. State Management & Offline Storage
| Layer | Technology | Why It Was Chosen |
| Global State | Redux Toolkit & React-Redux | Centralised store manages authenticated user context, active group selections, recently viewed protocols, and search state – all shared across the Protocols, Contacts, and Settings tabs |
| Offline Storage | Local Browser Storage + Capacitor Preferences | Recently viewed protocols and user preferences are persisted in local storage so they survive app restarts; Capacitor Preferences provides a native key-value store on iOS/Android that behaves identically to localStorage on web |
4. Styling & UI
| Layer | Technology | Why It Was Chosen |
| CSS Framework | Tailwind CSS 4 | Utility-first styling keeps the component bundle lean and enforces design consistency across the protocol cards, group chips, and tab navigation |
| Pre-processor | Sass | Used for complex, nested component styles (e.g., the multi-tab group detail view) where Tailwind utilities alone would become unwieldy |
| Icons | Lucide-React | Consistent SVG icon set used for the search, bookmark, filter, phone, settings, and navigation icons visible throughout the app |
| Notifications | React-Toastify | Non-blocking toast notifications for login errors, successful profile saves, and group join/leave confirmations – keeps the UI clean without modal interruptions |
| Progress Indicators | Nextjs-Toploader | Thin progress bar at the top of the screen during route transitions – gives immediate feedback when navigating between protocol categories |
5. Native Device Features (Capacitor Plugins)
| Plugin | What It Enables in MedPro |
| Filesystem | Downloading and locally caching PDF protocol resources so they are accessible without a network connection inside OR suites and basement imaging units |
| Network Status | Detecting connectivity loss and switching the app into offline mode – surfacing only cached protocols and suppressing Supabase sync calls when no network is available |
| Preferences | Persisting user session tokens, last-active group selection, and UI preferences natively on the device across app restarts |
| App / Splash Screen | Custom MedPro branded splash screen on launch; handling deep links and foreground/background app lifecycle events |
6. Utilities & Tooling
| Tool | Role |
| PDF.js | In-app PDF rendering for protocol resource documents – providers can read attached procedure guides inline without being redirected to an external viewer (complementing the native OneDrive/Drive open-with flow) |
How to Build a Medical Protocol App: Step-by-Step
Here is a complete walkthrough of the development process, from defining the data model to shipping the contacts directory.
1. Define the Protocol Taxonomy
Work with clinical leadership to establish the full set of protocol categories – Anatomy, Anesthetic Techniques, Brain and Spinal Cord, Critical Care, Diagnostic Imaging, Ear Nose Throat and Dental, Examination Protocols, and so on. This taxonomy drives the navigation architecture and search index. Every category maps to a top-level database record; protocols are children of categories; resources are children of protocols.
|
1 |
Define the Protocol Taxonomy Work with clinical leadership to establish the full set of protocol categories – Anatomy, Anesthetic Techniques, Brain and Spinal Cord, Critical Care, Diagnostic Imaging, Ear Nose Throat and Dental, Examination Protocols, and so on. This taxonomy drives the navigation architecture and search index. Every category maps to a top-level database record; protocols are children of categories; resources are children of protocols. |
| 2 |
Model Groups and Memberships Each clinical unit (General Medical Protocols, Respiration, TSU) is a Group entity. Groups have Members, a Location, a cover image, and four tabs: Protocols, Numbers, Transfer, and TSU-specific guidelines. A provider’s group memberships determine which protocol sets surface on their home dashboard and which contacts appear in their directory. Design this as a many-to-many relationship – providers belong to multiple groups; groups contain multiple providers. |
| 3 |
Build the Protocol Library Screen The home screen surfaces two key components: a Recently Viewed carousel filtered by the user’s active groups, and an All Protocols list showing all top-level categories. Each category row navigates to a sub-list of protocols. Apply a filter icon to allow providers to narrow by group membership. This is the most-used screen in the app – every tap decision matters for speed. |
Figure 3: Anatomy Sub-category View – Mechanical Ventilation Setup and Oxygen Therapy Methods
| 4 |
Implement Full-Text Search Across Groups and Protocols Search is a primary workflow – a provider typing “Re” should immediately surface the Respiration group card AND all protocols matching that string. Implement a unified search that runs two queries in parallel: a group name match and a protocol title/content match. Display results in separate sections (“Matching Groups” and “Protocols matching ‘Re'”) with a filter toggle. Speed is non-negotiable – debounce at 200ms and cache frequent queries. |
Figure 4: Saved Groups View – Test Trauma (Fort Thomas) and Respiration (Cincinnati, Ohio)
| 5 |
Build the Group Detail View With Tabbed Navigation When a provider taps into a group (e.g., General Medical Protocols), they land on a detail screen with: a group cover image, member avatars, location tag, and four tabs – Protocols, Numbers, Transfer, and TSU. The TSU tab surfaces Unit Guidelines with sub-items (In-patient Protocols, Wound Care Standards, Triage System). The “Leave Group” action should require confirmation – providers need groups for context continuity. |
Figure 5: WC Trauma Group Detail View – Protocols tab with All Protocols and Critical Care
| 6 |
Attach PDF Resources to Protocols Each protocol record has an associated Resources list. Resources are named PDFs stored on OneDrive or Google Drive. When a provider taps a resource, the app triggers a native file-open intent or renders inline via PDF.js. Implement as a deep link to the document’s cloud storage URL – do not store PDFs in the app binary. This keeps document versioning managed at the institutional cloud level. |
Figure 6: Mechanical Ventilation Setup – PDF Resource View showing Test1.pdf attachment
| 7 |
Build the Contacts Tab The Contacts tab mirrors the group chip navigation from the Protocols tab – providers toggle between their groups to filter the contacts list to that unit’s staff. Contacts load asynchronously; show a “Loading contacts…” state with skeleton cards. Each contact record surfaces name, role, phone number, and group. Integrate with the device’s native phone dialer for one-tap calling. |
Figure 7: Contacts Tab – Trauma ENS Staff Directory filtered by group with one-tap calling
| 8 |
Build the Settings and Profile Module The Settings screen provides profile editing (full name, email, phone number, address, profile photo), app versioning display, and a logout action. Always display the app version with a “development” / “production” indicator – essential for QA workflows in clinical environments where beta builds circulate across test devices. |
Key Engineering Decisions in MedPro
Why Next.js + Capacitor Instead of React Native?
The most consequential architectural decision in MedPro was choosing a web-to-native bridge (Capacitor 8) over a dedicated mobile framework like React Native or Flutter. MedPro needed to be three things simultaneously – a web app, a PWA, and a native iOS/Android binary. With Next.js 15 as the core and Capacitor wrapping it for native deployment, the team writes one TypeScript codebase and ships to all three targets. The trade-off is that deeply custom native animations require more effort – acceptable for a clinical reference app where speed of information access matters more than motion design.
The most important UX decision is organizing the entire experience around clinical groups rather than a flat protocol list. A trauma center clinician does not think about protocols in the abstract – they think about the protocols relevant to their current unit and role. Redux Toolkit holds the user’s active group selection in global state, ensuring that every screen – Protocols, Contacts, and Search – responds to the same group context without prop-drilling.
Why Supabase for Auth and Database?
Supabase’s row-level security (RLS) maps directly to MedPro’s access model: a provider can only read protocol rows that belong to a group they are a member of, enforced at the database layer without application-level filtering logic. Supabase Auth handles the email/password flow and supports future institutional SSO without infrastructure changes. Supabase Realtime means protocol updates appear on connected devices instantly – no polling, no manual refresh.
Offline-First With Capacitor Filesystem + Network Plugin
Hospitals have notoriously poor in-building cellular coverage. MedPro uses the Capacitor Network plugin to detect connectivity loss and the Filesystem plugin to cache recently viewed protocol PDFs locally. When a provider loses signal in a basement OR suite, the last-accessed protocols remain readable. The Capacitor Preferences plugin persists the user’s session token and last-active group so the app resumes the correct context after a device restart.
PDF.js for In-App Document Rendering
MedPro integrates PDF.js for inline rendering within the app viewport. This matters because not all clinical devices have OneDrive or Drive installed, and forcing an external app context switch in the middle of a procedure reference creates unnecessary friction. PDF.js renders the document in a sandboxed viewer within the app, keeping the provider in context.
Secure Architecture for Clinical Workflows
MedPro does not store patient data – it manages institutional protocols and contacts. Controls implemented: all Supabase traffic over TLS 1.2+, JWT session expiry aligned to shift length, Supabase RLS enforcing group-scoped data access, audit logging via Supabase’s built-in logging, and device-level storage encryption through Capacitor Preferences on the native binary.
What Makes MedPro Different From Generic Document Apps
Why not use SharePoint, Notion, or a custom intranet portal? Three reasons:
- Generic document apps have no concept of clinical groups, unit membership, or protocol categories. MedPro’s information architecture is designed around how clinicians actually search for and use protocols – not how IT departments organize files. Clinical context awareness.
- A surgeon in scrubs, gloves off, between procedures, cannot navigate a SharePoint folder tree on a 6-inch screen. MedPro’s navigation is designed for single-thumb use in high-pressure moments. Mobile-first, one-handed use.
- MedPro integrates with OneDrive and Google Drive for PDFs, hooks into institutional SSO for authentication, and surfaces institutional contacts – designed to fit into an existing healthcare IT ecosystem, not replace it. Institutional integration.
Common Mistakes When Building Healthcare Protocol Apps
- Build with real protocol data from real units before finalizing the taxonomy. Clinical staff will surface naming inconsistencies and missing categories that no product manager can anticipate upfront. Over-engineering the data model before clinical validation.
- Network coverage in clinical facilities is worse than in any other enterprise environment. Treat offline-firstas a Day 1 requirement, not a v2 feature.Ignoring the offline problem.
- In a high-stress clinical setting, a search box that returns empty or slow results will cause providers to abandon the app for a binder within a week. Invest heavily in search quality and speed from day one. Building search as an afterthought.
- Providers who accidentally leave a group lose access to that group’s protocols and contacts instantly. Require a two-step confirmation and provide a self-service re-join flow.Making “Leave Group” too easy.
- Who updates protocols? Who approves changes? Who is notified when a protocol version changes? Build the content governance process alongside the app – an outdated protocol is worse than no protocol. Launching without a protocol governance workflow.
How Bitcot Builds Healthcare Mobile Applications
Bitcot has worked with healthcare organizations across the continuum of care – from Level I Trauma Centers to outpatient specialty practices – to build healthcare mobile and web applications that meet the clinical, operational, and compliance requirements of modern healthcare delivery.
For MedPro specifically, Bitcot’s team handled the full development lifecycle: clinical workflow discovery sessions with trauma center staff, information architecture design, Next.js + Capacitor development across iOS and Android, Supabase integration, OneDrive and Google Drive document linking, UAT with clinical end-users, and HIPAA-aligned deployment.
If your institution is managing clinical protocols, care pathways, or clinical reference content through shared drives, paper binders, or generic document management tools – there is a better way.
Conclusion
MedPro demonstrates what a purpose-built clinical protocol management application looks like when it is designed around how clinicians actually work – not how IT departments organize files.
The core thesis is simple: in a high-stakes clinical environment, information access speed matters. A protocol library that is organized by clinical group membership, fully searchable, connected to up-to-date PDF resources, and available with a contacts directory on the same screen, is materially better than anything a shared drive can provide.
Building it right requires careful attention to the data model (groups, protocols, resources), search quality, offline behavior, PDF versioning strategy, and clinical governance. Get those right, and you have an application that providers will actually use – even at 2 a.m. in the middle of a trauma bay.
MedPro demonstrates what a purpose-built clinical protocol management application looks like when it is designed around how clinicians actually work – not how IT departments organize files.
The core thesis is simple: in a high-stakes clinical environment, information access speed matters. A protocol library that is organized by clinical group membership, fully searchable, connected to up-to-date PDF resources, and paired with a contacts directory on the same screen, is materially better than anything a shared drive can provide.
Building it right requires careful attention to the data model (groups, protocols, resources), search quality, offline behavior, PDF versioning strategy, and clinical governance. Get those right, and you have an application that providers will actually use – even at 2 a.m. in the middle of a trauma bay.
If your organization is still relying on fragmented systems to manage clinical protocols, now is the time to rethink your approach. With the right healthcare mobile app development strategy, you can streamline access, improve clinical efficiency, and support better patient outcomes.
Looking to build a solution like MedPro? Connect with our team to explore how we can help you design and develop scalable, secure, and user-centric healthcare applications tailored to your institution’s needs.
Frequently Asked Questions (FAQs)
What technology stack is MedPro built on?
MedPro is built on React 19 and Next.js 15 (App Router) as the core web framework, with Capacitor 8 wrapping it as a native iOS and Android binary. The backend is Supabase (PostgreSQL + Auth + Realtime). State is managed with Redux Toolkit, styling with Tailwind CSS 4 and Sass, and PDF viewing uses PDF.js. The entire codebase is TypeScript.
Is MedPro HIPAA compliant?
No – MedPro is not HIPAA compliant, as it does not handle or store protected health information (PHI).
How does MedPro handle protocol updates?
Protocol PDFs are stored in institutional cloud drives (OneDrive or Google Drive) rather than natively in the app. When a document is updated at the source, the updated version is immediately available in MedPro without requiring an app release. This keeps document versioning under institutional control.
Can MedPro work offline?
MedPro uses the Capacitor Network plugin to detect connectivity loss and the Capacitor Filesystem plugin to cache recently accessed protocol PDFs locally. The Recently Viewed protocols remain readable without a network connection. Capacitor Preferences persists the user session and last-active group so the app resumes the correct context after a device restart.
How long does it take to build an app like MedPro?
A full-featured protocol management app with group-based access, search, PDF resource integration, and a contacts directory typically takes 14–20 weeks from discovery to production deployment. Timeline depends heavily on the complexity of the institution’s existing protocol taxonomy and the SSO/cloud storage integrations required.
How much does it cost to build a healthcare mobile app like MedPro?
The development of a healthcare mobile app like MedPro depends on several factors, including the scope and complexity of the solution.
Typically, applications can range from:
A basic MVP with core features
A mid-level app with advanced functionality and integrations
A full-scale enterprise solution with high performance, security, and scalability
The final requirements depend on features, security needs, integrations, and long-term scalability goals.
Can Bitcot build a similar app for our healthcare organization?
Yes. Bitcot has extensive experience building custom healthcare mobile applications for hospitals, clinics, and healthcare organizations.
From discovery and UX design to development, integrations, and deployment, Bitcot delivers secure, scalable, and user-friendly solutions tailored to your clinical workflows and operational needs.
