arrow_back Back to Laboratory
Case File // PharmaLexicon

PharmaLexicon Architecture Docs.

A technical overview of the engineering, state management, and native-web routing that powers PharmaLexicon Pro.

shield_lock

Commitment to Code Integrity

We take immense pride in our engineering. However, to comply with strict Google Play Store safety guidelines, protect our intellectual property from malicious cloning, and maintain the integrity of our clinical data platform, the raw source code of PharmaLexicon remains closed-source.

We are, however, thrilled to share the architectural blueprint and advanced engineering techniques that power the application below.

terminal Under the Hood

smartphone

Native-Web Hybrid Shell

The application is built as a highly optimized Single Page Application (SPA) utilizing HTML5, CSS3, and Vanilla JavaScript. It is wrapped and compiled into a native Android APK/AAB using Capacitor, allowing the web codebase to access native device APIs and hardware acceleration.

Capacitor Vanilla JS Service Workers
memory

Advanced DOM Virtualization

To prevent memory leaks and UI lag when loading hundreds of drug monographs, the app utilizes an IntersectionObserver for infinite scrolling. It extracts all clinical cards into a Global Registry (JavaScript array) on boot, instantly clearing the DOM to free RAM. It then smoothly injects exactly 30 items at a time as the user scrolls.

IntersectionObserver Batch Rendering Debounced Search
route

Seamless Native Routing

To mimic the feel of a native Android application, the app hijacks the browser's History API (pushState/popState). Instead of loading new HTML pages which causes screen flashing, custom JavaScript translates URL hashes (e.g., #drugs) into fluid CSS transform animations, perfectly integrating with the physical Android back button.

History API pushState Android.exitApp()
database

State & Data Persistence

User preferences and saved clinical items (Favorites) are managed entirely on the client side using the localStorage API. Data is serialized into JSON arrays, ensuring that saved drug monographs are instantly retrievable without requiring an active internet connection or backend database calls.

localStorage JSON Serialization Offline-First
design_services

Hardware-Accelerated UI/UX

The interface relies heavily on CSS Custom Properties (Variables) for instant theme management. Complex visual elements like "Glassmorphism" (backdrop-filter) and modal overlays are optimized using GPU-accelerated CSS properties (like transform and opacity) to ensure smooth 60fps animations even on lower-end devices.

CSS Variables Glassmorphism Cubic-Bezier