6 min read
wMammogram
7-day interactive health education platform increasing mammogram screening rates among American Indian women in South Dakota through daily video lessons, quizzes, and SMS engagement.
Technologies Used
VueTypeScriptFirebase
7-day interactive health education platform increasing mammogram screening rates among American Indian women in South Dakota through daily video lessons, quizzes, and SMS engagement.
American Indian women experience one of the highest breast cancer mortality rates across all racial/ethnic groups in the United States. Key barriers include:
My solution created an accessible, culturally-sensitive digital platform that meets users where they are—on their phones—delivering bite-sized daily education with SMS reminders to maintain engagement.
| Technology | Purpose |
|---|---|
| Vue.js 2 | Progressive framework for building the reactive UI |
| TypeScript | Static typing for improved code quality and maintainability |
| Vuetify | Material Design component library for polished, accessible UI |
| Vue Router | Client-side routing with history and hash mode support |
| Vuex | Centralized state management for user/session data |
| Vue Class Components | Decorator-based component architecture |
| Technology | Purpose |
|---|---|
| Firebase Authentication | User registration, login, and session management |
| Cloud Firestore | NoSQL database for user progress, answers, and settings |
| Firebase Cloud Functions | Serverless backend for SMS scheduling and confirmations |
| Firebase Hosting | CDN-backed hosting with automatic SSL |
| Firebase App Check | ReCaptcha v3 integration for bot protection |
| Technology | Purpose |
|---|---|
| Twilio | SMS messaging for registration confirmations and daily reminders |
| Technology | Purpose |
|---|---|
| Electron | Desktop application wrapper for offline/kiosk deployments |
| PWA (Workbox) | Offline-first capability with service worker caching |
Built a custom ContentManager class (src/services/contentManager.ts:1-88) that handles sequential content navigation with:
Developed a fully custom video player (src/components/WVideo.vue:1-327) featuring:
Implemented Firestore real-time listeners (src/views/Course.vue:99-103) for:
Created Cloud Functions (functions/src/index.ts:1-121) for:
Built an achievement system (src/services/ribbonService.ts) that:
Implemented gated content (src/views/DayDashboard.vue:135-141) where:
Problem: Electron requires hash-based routing while web deployments work best with history mode.
Solution: Created environment-based router configuration that detects VUE_APP_MODE and switches between hash (#/route) and history (/route) modes, enabling a single codebase for both platforms.
Problem: Video sources needed fallback options and the ended event wasn't reliably firing on all devices.
Solution: Implemented multiple video source options (local + Google Drive) and added a workaround (src/components/WVideo.vue:158-160) that triggers the "ended" event at 90% progress to ensure content advancement.
Problem: Firebase listeners can cause memory leaks if not properly unsubscribed.
Solution: Stored unsubscribe functions and consistently called them in beforeDestroy lifecycle hooks and before re-establishing listeners on user changes.
Problem: Users in rural areas needed access with intermittent connectivity.
Solution: Configured Workbox with IndexedDB persistence and unlimited cache size, enabling full offline functionality after initial load.
Using TypeScript with Vue Class Components caught numerous bugs at compile time and made refactoring significantly safer. The type definitions for Firebase and Twilio improved development velocity by enabling IDE autocompletion.
Firebase's onSnapshot creates persistent connections that must be managed carefully. I learned to always:
By defining course content as TypeScript modules with a consistent interface, adding new days or modifying content became a data change rather than a code change—making the system maintainable by non-developers.
The daily reminder system significantly improved course completion rates. Users responded well to personalized messages with their ribbon counts, demonstrating the value of multi-channel engagement.
Cloud Functions cold starts and execution time limits required careful optimization. Batch operations and efficient Firestore queries were essential for the scheduled reminder function to complete within limits.
The architecture emphasizes:
This project represents a meaningful application of technical skills to address a real public health challenge, demonstrating ability to deliver production-ready software that serves client needs while maintaining code quality and scalability.