AlexFatch/mascot-health-pwa

Anonymous, offline-capable PWA for student sexual health in Zimbabwe - Complete system with Django backend, PWA frontend, and comprehensive documentation # MASCOT Health PWA — Complete System Summary ## 🎯 What is MASCOT Health? **MASCOT Health** is a Progressive Web App (PWA) that provides confidential, offline-capable access to sexual health information and commodity requests for university students in Zimbabwe. **In plain English:** Students can: - Learn about contraception, STI/HIV prevention (anonymously) - Get personalized recommendations based on their situation - Request condoms, pills, and other health commodities discreetly - Track their requests using anonymous reference codes - Do all of this even without internet --- ## 📁 What Files Are Included? ### Documentation Files 1. **SYSTEM_OVERVIEW.md** ← Start here! - Comprehensive architecture explanation - Why each component exists - Technology stack justification - Complete system diagrams 2. **DEPLOYMENT_GUIDE.md** - Step-by-step deployment instructions - Production security configuration - Database setup and backups - Troubleshooting guide 3. **django_backend.py** - Complete Django implementation - Database models (with explanations) - REST API views and endpoints - Settings configuration snippets - Admin interface setup ### Code Files 4. **index.html** - Production-ready frontend - Fully functional UI with 5 main panels: - Home (navigation hub) - Learn (prevention methods library) - Decide (decision hub with 3-question flow) - Request (commodity submission form) - Track (request status checker) - Tailwind CSS for responsive design - Vanilla JavaScript (no dependencies) 5. **sw.js (Service Worker)** - Offline-first caching strategy - Background sync for queued requests - IndexedDB support - Comprehensive logging 6. **manifest.json** - PWA registration - App icons and metadata - Install shortcuts --- ## 🏗️ System Architecture ### The Three-Layer Model ``` ┌─────────────────────────────────────────┐ │ FRONTEND LAYER │ (index.html + sw.js) │ - Responsive PWA UI │ │ - Offline-first caching …