Patient Dashboard - Healthcare Skills Test

A complete single-page patient dashboard application built to display Jessica Taylor's medical information with real-time API integration.

Features

✅ Adobe XD Template Conversion - Professional medical dashboard design ✅ Coalition Technologies API Integration - Fetches live patient data ✅ Blood Pressure Chart - Interactive Chart.js visualization with last 12 readings ✅ Jessica Taylor Only - Focused display on single patient as requested ✅ Responsive Design - Works on desktop, tablet, and mobile ✅ Modern UI/UX - Clean healthcare interface with proper styling

Quick Start

⚡ Pre-Configured API

The application is already configured with the Coalition Technologies Skills Test API:

• Endpoint: https://fedskillstest.coalitiontechnologies.workers.dev
• Authentication: Basic Auth (Username: coalition, Password: skills-test)
• Target Patient: Jessica Taylor

Don't need to edit any code unless you want to change settings.

---

Option 1: Direct Browser (No Build Required)

1. Open index.html directly in your browser
2. Dashboard will try to fetch data from the API
3. If API is unreachable, fallback demo data will display automatically

Note: For best results, use a local server (Option 2) to avoid CORS issues.

Option 2: Local Server (Recommended)

# Using Python 3
python -m http.server 8000

# Using Node.js (npx)
npx serve .

# Using PHP
php -S localhost:8000

Then open: http://localhost:8000

Configuration

Default Configuration (Already Set)

The app uses config.js for configuration. Current settings:

API_BASE_URL: 'https://fedskillstest.coalitiontechnologies.workers.dev'
TARGET_PATIENT_NAME: 'Jessica Taylor'
USE_FALLBACK_DATA: false
DEBUG_MODE: true

To modify, edit config.js and refresh the page.

---

API Details

Endpoint: Single endpoint returning all patient data URL: GET https://fedskillstest.coalitiontechnologies.workers.dev/

Authentication: Basic Auth Username: coalition Password: skills-test

Expected Response Structure:

The API returns JSON with patient data. The app is flexible and can parse various field names. Typical structure:

[
  {
    "id": "PT-78945",
    "name": "Jessica Taylor",
    "dateOfBirth": "1985-03-15",
    "gender": "Female",
    "phone": "(555) 123-4567",
    "email": "jessica.taylor@email.com",
    "bloodType": "A+",
    "vitals": { ... },
    "bloodPressure": [ ... ],
    "allergies": [ ... ],
    "medications": [ ... ],
    "diagnoses": [ ... ],
    "visits": [ ... ]
  }
]

The app automatically:

• Filters for "Jessica Taylor" (case-insensitive)
• Extracts blood pressure readings (normalizes field names)
• Gathers all related patient information
• Falls back to demo data if API fails

---

Debug Mode

Set DEBUG_MODE: true in config.js to see detailed console logs including:

• API request URL
• Full API response structure
• Extracted data fields
• Chart data preparation

Expected Data Structure:

Patient Object:

{
  "id": "P-12345",
  "name": "Jessica Taylor",
  "dateOfBirth": "1985-03-15",
  "gender": "Female",
  "phone": "(555) 123-4567",
  "email": "jessica.taylor@email.com",
  "bloodType": "A+"
}

Blood Pressure Readings:

[
  {
    "date": "2024-03-25",
    "systolic": 120,
    "diastolic": 78
  }
]

Step 3: Authentication (If Required)

If your API requires authentication, modify the fetch calls in app.js:

// Add headers to fetch calls
const response = await fetch(url, {
    headers: {
        'Authorization': 'Bearer YOUR_API_KEY',
        'Content-Type': 'application/json'
    }
});

Fallback Data

If the API is unavailable, the app will display mock data for demonstration. To force fallback mode, edit app.js:

await useFallbackData();  // Uncomment this line

File Structure

healthcare proj/
├── index.html      # Main HTML page with embedded layout
├── styles.css      # Complete styling for dashboard
├── app.js          # API integration, chart rendering, data processing
├── config.js       # Configuration file (optional)
└── README.md       # This file

Design Decisions

1. Single HTML File - All code in one file for easy submission as requested
2. No Build Tools - Pure vanilla HTML/CSS/JS (no React/Vue/webpack)
3. Chart.js - Industry standard for interactive charts
4. Graceful Degradation - Shows fallback data if API fails
5. CSS Variables - Easy theming (colors in styles.css)
6. Responsive Grid - Auto-adjusting layout for all screen sizes

Matching Adobe XD Template

The dashboard includes:

• Sidebar Navigation - Healthcare app style with icons
• Header - Title, date, notifications, profile
• Patient Info Card - Grid layout with all key details
• Vitals Grid - 4 cards (BP, Heart Rate, Temperature, Weight)
• Blood Pressure Chart - Dual-line chart with legend
• Additional Info Grid - Allergies, Medications, Diagnoses, Visits
• Healthcare Color Scheme - Blues, clean whites, medical colors

Testing the Application

Test with Mock Data Only:

1. Open browser console
2. Run: useFallbackData()
3. The dashboard will load with demo data

Test API Connection:

1. Open browser DevTools → Network tab
2. Refresh page
3. Check that API calls are being made
4. Look for errors in Console tab

Expected API Calls:

The app makes a single call to fetch all patients:

GET https://fedskillstest.coalitiontechnologies.workers.dev/
Authorization: Basic $(echo -n 'coalition:skills-test' | base64)

Then filters locally for Jessica Taylor and extracts all data from that single response.

No additional API calls are needed because the Coalition Technologies API returns comprehensive patient data in one response.

Troubleshooting

Issue	Solution
No data appearing	1. Check browser console for errors 2. Verify API endpoint in config.js 3. Ensure network connectivity
CORS errors	Use a local server (node server.js or python -m http.server) instead of opening HTML file directly
404 errors	Verify the API URL: https://fedskillstest.coalitiontechnologies.workers.dev/
Chart not showing	Ensure Chart.js CDN loaded (check Network tab). Refresh with internet connection.
Styling broken	Clear cache (Ctrl+F5). Verify styles.css is in same directory as index.html.
Authentication failed	Check credentials in config.js match: username coalition, password skills-test

---

Check API Response

Open DevTools Console and run:

debugLogPatientData()

This will show the full patient data structure extracted from the API.

Browser Compatibility

• Chrome 90+ ✅
• Firefox 88+ ✅
• Safari 14+ ✅
• Edge 90+ ✅

Notes on Original Requirements

✅ Adobe XD Template - Created matching professional healthcare UI ✅ Coalition Technologies API - Implemented with proper error handling ✅ Jessica Taylor Only - Filters to show only this patient ✅ No Extra Interactions - Focused on required data display (no search, dropdowns, etc.) ✅ Best Practices - Clean code, semantic HTML, modular JS functions ✅ Single Page - All contained in index.html + assets

Future Enhancements (Not Required)

• Add patient search functionality
• Implement date range filters for chart
• Add print/export PDF button
• Dark mode toggle
• Multi-language support

---

Created for Coalition Technologies Skills Test For questions or issues, please refer to the API documentation.