Drug Interaction Checker

⚠️ Educational/Demo Project Only — This is not a clinical decision tool and should not be used for actual medical purposes.

A lightweight drug interaction checker built with vanilla HTML, CSS, and JavaScript. Users can search for medications and view potential interaction risks extracted from FDA drug label data.

📺 Demo

• Video Walkthrough: Loom | GitHub Assets

---

✨ Features

Authentication & User Management

• Sign Up / Login: Client-side authentication with local storage
• Settings Panel: Change username and manage account
• Session Management: Persistent login state across browser sessions
• Secure UI Flow: Authentication required before accessing drug search

Drug Interaction Search

• Multi-Drug Selection: Add multiple medications to check for interactions
• Real-time FDA Data: Fetches drug labels from openFDA Drug Label API
• Flexible Search: Searches across generic names, brand names, and substance names
• Smart Name Display: Shows brand name when available, falls back to generic name

Interaction Analysis

• Severity Classification: Automatically categorizes interactions as HIGH, MODERATE, or LOW risk
• Multiple Data Sources: Extracts from drug_interactions, warnings, and contraindications
• Keyword-Based Detection:
  • High Risk: contraindicated, severe, serious, fatal, death, life-threatening
  • Moderate Risk: caution, monitor, moderate, risk
  • Low Risk: all other interactions

Results & Filtering

• Filter by Severity: View all interactions or filter by risk level
• Sort Options: Order results by severity or drug name
• Detailed Cards: Each result shows drug name, severity badge, and label excerpt

User Interface

• Single-Page Application: Smooth transitions between login, search, and settings
• Modal Settings: Overlay settings panel with backdrop
• Responsive Design: Works on desktop and mobile devices
• Clean, Modern UI: Intuitive interface with clear visual hierarchy

---

📁 Project Structure

drug-interaction-checker/
├── public/
│   ├── index.html          # Main HTML structure
│   ├── style.css           # Styling and responsive design
│   └── script.js           # Application logic and API integration
├── users.json              # Optional test data (not used at runtime)
└── README.md               # This file

File Descriptions

• index.html: Contains the complete UI structure including login, signup, settings modal, drug search panel, and results display
• style.css: Defines all styling, including responsive layouts, modal overlays, card designs, and severity badges
• script.js: Implements authentication, state management, FDA API calls, interaction extraction, and dynamic rendering

---

🚀 Quick Start

Local Development

Option 1: Using Node.js

cd public
npx serve .
# Opens at http://localhost:3000

Option 2: Using Python

cd public
python -m http.server 8080
# Opens at http://localhost:8080

Note: Serve via HTTP/HTTPS (not file://) to avoid CORS and mixed-content issues with the FDA API.

First Time Usage

1. Open the application in your browser
2. Click "Sign up" to create an account
3. Enter a username and password
4. Log in with your credentials
5. Start adding drugs to check for interactions

---

📦 Deployment

Prerequisites

• Web server capable of serving static files (nginx, Apache, etc.)
• HTTPS recommended for production

General Deployment Steps

1. Upload Files

   # Copy the public directory contents to your web root
   scp -r public/* user@server:/var/www/drug-interaction-checker/

2. Configure Web Server (nginx example)

   server {
       listen 80;
       server_name your-domain.com;
       
       root /var/www/drug-interaction-checker;
       index index.html;
       
       location / {
           try_files $uri $uri/ /index.html;
       }
   }

3. Enable HTTPS (recommended)

   # Using Let's Encrypt
   sudo certbot --nginx -d your-domain.com

4. Access Your App

   • Navigate to https://your-domain.com
   • The browser will call the FDA API directly (client-side)

Load-Balanced Deployment

For high-availability setups with multiple backend servers and a load balancer:

Architecture:

Client → Load Balancer (LB01) → Web Server 1 (WEB01)
                              → Web Server 2 (WEB02)

Configuration Steps:

1. Deploy to Backend Servers

   # On WEB01 and WEB02
   sudo cp -r public/* /var/www/drug-interaction-checker/

2. Configure Backend Servers (nginx example)

   # On WEB01 (IP: 3.86.214.155)
   server {
       listen 80;
       server_name web01;
       root /var/www/drug-interaction-checker;
       index index.html;
       location / {
           try_files $uri $uri/ /index.html;
       }
   }
   
   # Similar config on WEB02 (IP: 44.203.55.51)

3. Configure Load Balancer (nginx example on LB01: 54.208.234.99)

   upstream backend {
       server 3.86.214.155:80;
       server 44.203.55.51:80;
   }
   
   server {
       listen 80;
       server_name lb01;
       
       location / {
           proxy_pass http://backend;
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
       }
   }

4. Access: http://54.208.234.99/ or configure with your domain

Note: The FDA API is called directly from the browser, not proxied through your infrastructure.

---

🔧 Technical Details

Data Storage

localStorage Keys:

• users: Array of user objects {username, password}
• loggedInUser: Current session user object

API Integration

openFDA Drug Label API

• Endpoint: https://api.fda.gov/drug/label.json
• No API Key Required
• Search Query: Flexible search across multiple fields
• Rate Limits: Adheres to openFDA rate limiting

Sample API Call:

const query = `(openfda.generic_name:"${drug}" OR openfda.brand_name:"${drug}" OR openfda.substance_name:"${drug}")`;
const url = `https://api.fda.gov/drug/label.json?search=${encodeURIComponent(query)}&limit=1`;

Interaction Detection Algorithm

1. Fetch drug label from FDA API
2. Extract relevant sections: drug_interactions, warnings, contraindications
3. Filter warnings for interaction-related content
4. Classify severity using keyword matching
5. Aggregate all interaction snippets
6. Display with filtering and sorting options

---

⚠️ Limitations & Disclaimers

Security

• Client-side only: All authentication uses localStorage (not secure for production)
• No encryption: Passwords stored in plain text in browser
• No server validation: All logic runs in the browser

Data Accuracy

• Not comprehensive: FDA label coverage varies by drug
• Naive classification: Severity based on simple keyword heuristics
• Not pairwise: Does not compute specific drug-drug interaction pairs
• Label-based only: May miss interactions not documented in labels

Medical Disclaimer

This application is NOT:

• A medical device
• FDA approved
• Suitable for clinical decision-making
• A replacement for professional medical advice

Do not use this tool for actual healthcare decisions.

---

🧪 Testing

Manual Testing Checklist

• Sign up with new username
• Log in with existing credentials
• Add single drug (e.g., "aspirin")
• Add multiple drugs (e.g., "warfarin", "ibuprofen")
• Check interactions (requires 2+ drugs)
• Filter by severity
• Sort results
• Remove individual drugs
• Clear all drugs
• Change username in settings
• Sign out
• Verify session persistence (refresh page)

Known Issues

• Some drug names may not return results from FDA API
• Rate limiting may occur with excessive API calls
• Browser localStorage limits (~5-10MB depending on browser)

---

🎓 Development Notes

Challenges Solved

API Selection

• Initially attempted RxNav API but encountered mixed-content issues
• Switched to openFDA with HTTPS to ensure browser compatibility
• Implemented flexible search across multiple drug name fields

State Management

• No framework: implemented custom state management in vanilla JS
• Used localStorage for persistence
• Created appState object for runtime state (selected drugs, results)

UI/UX Design

• Evolved from multi-panel clutter to clean single-page app
• Implemented modal pattern for settings
• Created distinct "auth" vs "app" screen modes
• Added loading states and error handling

Technologies Used

• Frontend: Vanilla HTML5, CSS3, JavaScript (ES6+)
• API: openFDA Drug Label REST API
• Storage: localStorage (Web Storage API)
• No dependencies: Zero external libraries or frameworks

---

🔮 Future Enhancements

• Server-side authentication with secure password hashing
• Database storage for user data
• True pairwise drug-drug interaction analysis
• Integration with additional medical APIs
• Export results as PDF
• Drug dosage information
• Alternative drug suggestions
• Internationalization (i18n)
• Accessibility improvements (WCAG compliance)
• Unit and integration tests

---

📚 Resources & Credits

APIs & Data Sources

• openFDA: Drug Label REST API and underlying FDA data
• RxNav: Referenced for future structured drug-drug interaction features

Documentation

• openFDA API Documentation
• FDA Drug Labels

---

📄 License

This project is for educational purposes. Please refer to your organization's policies regarding code licensing and distribution.

---

🤝 Contributing

This is an educational project. If you'd like to enhance it:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

---

💬 Support

For questions or issues, please open a GitHub issue or contact the development team.

---

Built with vanilla web technologies — no frameworks required.