CryoNex is a state-of-the-art cold-chain logistics platform designed for the critical pharmaceutical sector. It provides real-time telemetry, predictive risk management, and a seamless procurement workflow for life-saving materials like Stem Cells, Gene Therapies, and Monoclonal Antibodies.
The platform is designed with a premium, high-fidelity user interface featuring dynamic visualizations, a robust design system, and a focus on operational efficiency and security.
- Interactive Global Map Visualization: Powered by Leaflet.js, featuring real-time tracking of active shipments across strategic global hubs (SIN, FRA, LHR, GVA, HND, BOM).
- Live Telemetry Monitoring: Detailed asset tracking with dynamic charts visualizing temperature, battery voltage, and pressure metrics for individual shipments.
- Procurement Wizard (PharmaCo Portal): A guided, multi-step flow for initiating new shipment requests, featuring dynamic route calculation and seamless data persistence across the session.
- Cross-Console Visibility: New shipment requests instantly sync and populate both the Admin (MedChain Ops) Control Tower and the Supply Chain Manager Console.
- Intelligent Risk Management: Automated alerts for excursions (e.g., pressure drops, temperature variances) and transit delays, enabling rapid triage and response.
- Compliance & Audit Vault: Secure access to immutable compliance records, certifications, and security seals with integrated export capabilities.
- Dynamic Theme System: Native support for both high-contrast Dark Mode (tactical operations) and pristine Light Mode (executive reporting), seamlessly applied across all components.
- HTML5 & CSS3: Semantic HTML structure with custom CSS properties for granular design control.
- JavaScript (ES6 Modules): Modular architecture for maintainable and scalable frontend logic.
- Tailwind CSS (via CDN): Utility-first styling with an extended, custom configuration (
tailwind-config.js) for a unified design system. - Leaflet.js: High-performance, interactive map rendering engine.
- Anime.js (Local): Fluid, hardware-accelerated micro-animations and stagger effects for UI elements and map markers.
- Lenis (Local): Advanced smooth scrolling logic for enhanced user experience.
- Chart.js: Dynamic, responsive data visualizations for telemetry dashboards.
Cryonex/
├── css/ # Global stylesheets and custom utilities
├── img/ # Brand assets and imagery
├── js/ # Core JavaScript modules (animations, map, securing, wizard, etc.)
├── compliance.html # Compliance Dossier view
├── dashboard.html # Admin (MedChain Ops) Control Tower
├── login.html # Authentication portal
├── pharmaco-dashboard.html # Client overview portal
├── shipments.html # Supply Chain Manager Console
├── telemetry.html # Individual shipment detail and chart view
├── vault.html # Compliance Vault grid view
├── wizard-step1.html # Procurement Wizard: Origin & Material
├── wizard-step2.html # Procurement Wizard: Destination & Conditions
└── wizard-step3.html # Procurement Wizard: Route Calculation & Broadcast
- Component Modularity: UI functionality strictly separated into purpose-built modules (e.g.,
theme.js,animations.js,map-engine.js). - Data Persistence: Utilizes combination of
localStorage(for global shipment ledgers) andsessionStorage(for temporary wizard states) to manage cross-page data without a backend. - Content Security Policy (CSP): Configured CSP headers to restrict unauthorized script execution and enhance application security against XSS vulnerabilities.
- Input Validation: Strict type-checking and sanitization applied to session data (enforced by
org-guard.js) to ensure authorization integrity.
To run this project locally, you must serve it over an HTTP server (due to ES6 module imports).
-
Clone the repository:
git clone https://github.com/WisdomKingAR/Cryonex.git cd Cryonex -
Start a local server. For example, using Python's built-in
http.serveror Node'shttp-server:# Using Python 3 python -m http.server 8080 # Using Node.js (if http-server is installed globally) http-server -p 8080
-
Open your browser and navigate to the local URL (e.g.,
http://127.0.0.1:8080/login.html). Use the credentials provided in the application specification to access the different portals.
When evaluating this project, specifically note:
- The smooth scroll integration (
Lenis) across all scrollable views. - The complex DOM manipulation and animation sequences (
Anime.js) on the map and telemetry views. - The state management linking the
wizardselection process to thedashboard.htmlledger generation.