AlexFatch/mascot-health-pwa
Domain:
healthcaredigital infrastructureRecord type:
software
Creator:
Ale
Host:
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 …