🫁 PneumoDetect Mobile Client

AI-Powered Pneumonia Screening & Clinical Workflows
A premium, consumer-grade React Native & Expo application designed for clinicians to process X-rays and patients to track their health reports.

---

✨ Features

🔍 Core AI Diagnostics (Clinicians Only)

• Grad-CAM AI Heatmap Visualization: High-fidelity 2D localization overlays highlighting computed areas of suspected infection.
• Ensemble ML Predictions: Combined inference outputs using fine-tuned ResNet50 and DenseNet121 model pipelines.
• Double Validation Gates: Input format verification (AP/PA projections) and confidence rating gauges.
• Interactive Reports: Generate, download, and email patient-friendly diagnostic sheets as formatted PDFs.

👥 Dual Role-Based Portals

• Clinician Hub: Manage active case queues, upload and trigger AI scans, override predictions, and maintain patient registries.
• Patient Dashboard (Apple Health Style): Streamlined consumer-facing experience featuring "Health Updates", a scan history grid with patient-safe wording ("Review Recommended" vs. "Normal"), clinician notes, and personal updates.
• Administrator Panel: Inline grid controls to approve/block users, assign clinicians, link patient files, and audit logs.

⚙️ Systems & Onboarding

• Onboarding Walkthroughs: Custom interactive slider paths tailored to explain role workflows upon first sign-in.
• Secure Storage Keys: Local user token storage utilizing AES-256 encryption via expo-secure-store.
• Offline Cache: Access previously synced scans, notifications, and profiles without active internet connectivity.
• Live Notifications: Real-time push updates for critical scan completions, system announcements, and message receipts.

---

🏗️ Architecture & Endpoint Toggling

The mobile app communicates with a modular NestJS API backend which coordinates uploads, database operations, and queries a Flask ML server.

To configure where the mobile app directs its HTTP/HTTPS traffic, modify the API_URL variable inside services/api.ts:

// services/api.ts

// Option A: Live Production Server (Default for compiled standalone releases)
const API_URL = "https://pneumodetect-backend.onrender.com";

// Option B: Local Host Development (For Simulator/Emulator Testing)
// const API_URL = Platform.OS === "android" ? "http://10.0.2.2:3000" : "http://localhost:3000";

---

🚀 Getting Started

Prerequisites

• Node.js: v20+ recommended
• EAS CLI: installed globally (npm install -g eas-cli)
• iOS Simulator (macOS/Xcode) or Android Emulator (Android Studio)

Development Setup

1. Install Packages

   npm install

2. Launch Metro Bundler

   npx expo start

3. Open App on Device/Emulator

   • Press i to open the iOS Simulator.
   • Press a to open the Android Emulator.
   • Scan the terminal's QR code using the Expo Go app on your physical device.

---

🛠️ CLI Script Mappings

All shortcuts are configured in package.json:

Command	Action
npm run start	Boots the Expo Metro bundler server
npm run ios	Starts Metro and automatically boots the iOS simulator
npm run android	Starts Metro and automatically boots the Android emulator
npm run lint	Runs ESLint rules checking code styling
npx tsc --noEmit	Runs the TypeScript compiler checking type safety

---

📦 Standalone Builds (EAS Build)

The mobile client utilizes Expo Application Services (EAS) to compile native binaries.

Compile Android Preview APK

To compile an .apk file that can be distributed directly to devices or emulators:

npx eas-cli build --platform android --profile preview-apk

Compile iOS Simulator Build

To compile a simulator-ready build that can be dragged and dropped into Xcode simulators:

npx eas-cli build --platform ios --profile preview

---

📁 File Structure

PneumoDetect/
├── app/
│   ├── (auth)/              # Login, Registration, OTP, Forgot Password
│   ├── (onboarding)/        # Swipeable workflow slides
│   ├── (tabs)/              # Clinician main portal (Workspace, Scan, Cases, Profile)
│   │   └── (admin)/         # Admin dashboard overlay grids
│   ├── (patient)/           # Patient main portal (Health Updates, Scans, Settings)
│   ├── analysis/            # Diagnostic flow (Upload, Patient details, Loading metrics)
│   │   └── results/         # Heatmaps, confidence sliders, PDF exports
│   ├── profile/             # Shared profile options (Help Center, Docs, Contact)
│   ├── notifications/       # Notifications center
│   └── _layout.tsx          # Root controller, route guards, and theme provider
├── components/              # Shared elements, Premium loaders, Cards, Form elements
├── constants/               # Brand definitions, colors, shadows, border radii
├── hooks/                   # Custom React context hooks (useAuth, useToast)
├── services/                # Axios API request clients
├── utils/                   # Secure Storage wrapper, errors formatter
└── package.json             # Dependencies manifest

---

👨‍⚕️ Medical Disclaimer

IMPORTANT: PneumoDetect is an explainable decision-support tool designed to assist licensed clinicians. It is NOT intended to replace professional diagnostic judgment, clinical assessment, or physical examinations. All AI outputs, including Grad-CAM visual heatmaps, must be reviewed and validated by a qualified medical professional before diagnostic confirmation.

---

© 2024-2026 PneumoScan AI. All rights reserved.