Medical Dosage Calculator

A mobile-optimized web application for iPhone that helps healthcare professionals calculate medication dosages safely and accurately.

Features

• Mobile-First Design: Optimized for iPhone screens with touch-friendly interfaces
• PWA Ready: Can be embedded in iDevice view with offline functionality
• Safe Area Support: Handles iPhone notch and home indicator properly
• Touch Optimized: Minimum 44px touch targets for accessibility
• Responsive: Works in both portrait and landscape orientations

Technology Stack

• Next.js 14 with App Router
• Tailwind CSS for mobile-first styling
• Static export for offline embedding
• TypeScript support

Getting Started

Prerequisites

• Node.js 18+ and npm

Installation

1. Install dependencies:

npm install

2. Run the development server:

npm run dev

3. Open http://localhost:3000 in your browser

Building for Production

To create a static export for embedding in iDevice view:

npm run build

The static files will be generated in the out/ directory.

Mobile Optimization Features

• Viewport Configuration: Proper meta tags for iPhone display
• Touch Targets: All interactive elements meet 44px minimum size
• Safe Areas: Support for iPhone notch and home indicator
• Orientation Handling: Responsive design for portrait/landscape
• Performance: Optimized for mobile Safari
• PWA Features: App-like experience when embedded

Project Structure

src/
├── app/
│   ├── layout.js          # Root layout with mobile viewport
│   ├── page.js            # Main calculator interface
│   └── globals.css        # Global styles with mobile optimizations
├── components/
│   └── MobileLayout.js    # iPhone-optimized container

Development

The project uses:

• Mobile-first Tailwind CSS configuration
• Custom touch-friendly component classes
• Responsive design utilities
• Safe area inset handling for modern iPhones