An interactive web application that illustrates various surgical approaches with visual diagrams, anatomical landmarks, and detailed procedural information.

• Interactive surgical approach diagrams
• Detailed anatomical information
• Step-by-step procedural guidance
• Multiple surgical specialties covered
• Responsive design for desktop and mobile

├── backend/
│   ├── index.ts             # Main Hono server
│   ├── database/
│   │   ├── migrations.ts    # Database schema
│   │   └── queries.ts       # Database queries
│   └── routes/
│       └── api.ts           # API endpoints
├── frontend/
│   ├── index.html           # Main HTML template
│   ├── index.tsx            # React app entry point
│   ├── components/
│   │   ├── App.tsx          # Main app component
│   │   ├── ApproachViewer.tsx
│   │   ├── AnatomyDiagram.tsx
│   │   └── ApproachList.tsx
│   └── style.css            # Custom styles
└── shared/
    └── types.ts             # Shared TypeScript types

The app provides an intuitive interface to explore surgical approaches:

1. Browse Approaches: Filter by specialty (Orthopedic, Neurosurgery, etc.) or body region (Shoulder, Knee, etc.)
2. Search Functionality: Search for specific approaches, procedures, or anatomical terms
3. Detailed Views: Click on any approach to see comprehensive information including:
   • Indications and contraindications
   • Step-by-step procedural guidance
   • Interactive anatomical diagrams
   • Key anatomical landmarks
   • Potential complications
4. Interactive Diagrams: Hover over landmarks and incision lines for detailed information

The app comes pre-loaded with sample surgical approaches:

• Anterior Approach to Shoulder: Comprehensive orthopedic approach with interactive diagram
• Medial Parapatellar Approach to Knee: Standard knee replacement approach

• Real-time Search: Instant search across all approach data
• Interactive SVG Diagrams: Clickable landmarks with tooltips
• Responsive Design: Works on desktop and mobile devices
• Fast Loading: Server-side data injection for optimal performance
• RESTful API: Clean API endpoints for data access

• GET /api/approaches - Get all surgical approaches
• GET /api/approaches/:id - Get specific approach
• GET /api/specialties - Get all specialties
• GET /api/body-regions - Get all body regions
• GET /api/search?q=query - Search approaches
• GET /api/specialties/:specialty/approaches - Filter by specialty
• GET /api/body-regions/:region/approaches - Filter by body region

• Backend: Hono framework with SQLite database
• Frontend: React 18 with TypeScript
• Styling: TailwindCSS with custom CSS animations
• Database: SQLite for persistent data storage
• Deployment: Val Town serverless platform