An interactive, educational quiz application focused on Gestational Diabetes Mellitus (GDM) for healthcare professionals, medical students, and expectant mothers.
Created by: Chukwuma I. Onyeije, MD, FACOG
Institution: Atlanta Perinatal Associates
The GDM Quiz App provides a chatbot-style quiz interface with:
- 25 comprehensive questions covering GDM screening, management, and complications
- Random question selection (10 questions per session)
- Firebase Authentication (Google, GitHub, Email/Password)
- Educational tips after each question
- Real-time score tracking
- Mobile-responsive design
- Framework: React 19.1.0 with Vite 7.0.0
- Styling: Tailwind CSS 4.1.11
- Authentication: Firebase Authentication 11.9.1
- Deployment: GitHub Pages
- Build Tool: Vite with Hot Module Replacement (HMR)
- Node.js 18+ and npm
- Firebase project with Authentication enabled
# Clone the repository
git clone https://github.com/chukwumaonyeije/gdm-quiz-app.git
cd gdm-quiz-app
# Install dependencies
npm install
# Start development server
npm run devnpm run dev # Start development server
npm run build # Build for production
npm run preview # Preview production build
npm run lint # Run ESLint
npm run deploy # Deploy to GitHub Pages- ✅ Multi-method authentication (Google, GitHub, Email/Password)
- ✅ 25-question knowledge bank on GDM topics
- ✅ Randomized question selection
- ✅ Interactive chatbot UI
- ✅ Instant feedback with educational tips
- ✅ Score tracking and quiz restart
- ✅ Responsive gradient design
We're transforming the GDM Quiz App into a Progressive Web Application (PWA) with enhanced features:
- Shadcn/UI Components: Professional, accessible component library
- Framer Motion Animations: Smooth transitions between questions
- Mobile-First Design: Touch-optimized with 44px minimum tap targets
- Clinical Pearls: Modal-based educational content after each answer
- Offline Support: Complete quiz without internet connection
- Installable: "Add to Home Screen" on iOS and Android
- Service Workers: Fast loading with intelligent caching
- App-Like Experience: Native feel on mobile devices
- Environment Variables: Firebase config moved to
.env - Code Organization: Modular component structure
- Zero Technical Debt: Eliminate component duplication
- Lighthouse Score Target: 90+ across all metrics
- Code Splitting: Lazy loading for optimal bundle size
- < 1s Time to Interactive: Lightning-fast on mobile
- WCAG 2.1 AA Compliance: Full screen reader support
- Keyboard Navigation: Complete keyboard accessibility
- High Contrast: Accessible color ratios throughout
Phase 1: Foundation (In Planning)
- Environment variable setup
- Tailwind CSS + Shadcn/UI configuration
- PWA foundation with
vite-plugin-pwa - Component cleanup and reorganization
Phase 2: UI Overhaul (Upcoming)
- Shadcn component integration
- Mobile-first responsive layouts
- Framer Motion animations
Phase 3: Enhanced Features (Upcoming)
- State persistence with localStorage
- Clinical Pearls modal system
- Comprehensive results screen
Phase 4: PWA & Deployment (Upcoming)
- Service worker configuration
- Performance optimization
- Accessibility audit
- Production deployment
| User | Use Case |
|---|---|
| Expectant Mothers | Learn about GDM diagnosis and management on mobile devices |
| Medical Students | Study MFM protocols and GDM screening on the go |
| Clinical Educators | Share evidence-based educational content with patients |
- Live App: GitHub Pages Deployment
- Repository: GitHub
This is a private educational project created by Dr. Chukwuma I. Onyeije, MD, FACOG.
Dr. Chukwuma I. Onyeije, MD, FACOG
Atlanta Perinatal Associates
Specializing in Maternal-Fetal Medicine with a focus on high-risk pregnancy care and patient education.
This project is primarily maintained by Dr. Onyeije. For suggestions or clinical content updates, please open an issue.
Last Updated: February 2026