A cutting-edge mobile application that revolutionizes menstrual health management through real-time usage tracking and intelligent safety monitoring.
Supports tampon and menstrual cup tracking with personalized alerts and comprehensive usage analytics.
One-click FREE deployment for immediate health safety monitoring.
Try Demo · Features · Download · Documentation · Issues
Share FemTracker
🌟 Pioneering the future of menstrual health technology. Built for women's safety and empowerment.
[!TIP] Experience the clean, intuitive interface designed specifically for menstrual health tracking.
Main Interface - Product Selection, Active Monitoring, and Usage History
📱 More Screenshots
Interactive Demo Showcasing Core Features
[!NOTE] Watch FemTracker in action - from initial setup to real-time tracking and safety alerts.
Click the image above to see the full demo experience
Tech Stack Badges:
Important
FemTracker demonstrates modern mobile health app development with React Native and Expo. It combines real-time tracking with intelligent safety alerts to provide comprehensive menstrual product monitoring. Features include usage timers, smart notifications, offline data storage, and detailed usage analytics.
📑 Table of Contents
- 🩸 FemTracker - TOC
We are passionate developers creating next-generation menstrual health solutions. By adopting modern mobile development practices and evidence-based health guidelines, we aim to provide users with powerful, safe, and user-friendly tracking tools.
Whether you're looking to monitor your menstrual product usage for safety or track patterns for health insights, FemTracker will be your trusted health companion. Please note that this app is designed to complement, not replace, professional medical advice.
Note
- Node.js >= 18.0 required for development
- Expo CLI required for mobile development
- iOS 13+ or Android 9+ for optimal performance
- No account required - all data stored locally for privacy
 |
No installation required! Try our web demo to experience it firsthand. |
|---|---|
 |
Join our community dedicated to menstrual health awareness and technology. |
Tip
⭐ Star us to receive all health app updates and new feature notifications from GitHub!
⭐ Star History
Experience next-generation menstrual product monitoring with live duration tracking and visual status indicators. Our innovative timer system provides unprecedented safety awareness through advanced real-time calculations and intuitive visual feedback.
Live usage tracking with color-coded safety status
Key capabilities include:
- 🚀 Live Timers: Real-time countdown and elapsed time tracking
- 🔧 Product Support: Tampons (6-8 hours) and Menstrual Cups (10-12 hours)
- 📱 Visual Indicators: Color-coded status (green/yellow/red) for safety awareness
- 🛡️ Privacy First: All tracking data stored locally on your device
Tip
The app features beautiful Lottie animations and smooth transitions to make health tracking engaging and stress-free.
Revolutionary alert system that transforms menstrual product safety through intelligent monitoring and evidence-based recommendations. With our advanced notification algorithms and health-focused design, users can maintain optimal safety while receiving timely guidance.
Intelligent alerts for recommended and maximum usage times
Alert Types:
- Recommended Change: Gentle reminders at optimal replacement times
- Maximum Limit: Critical warnings to prevent health risks
Beyond core tracking, FemTracker includes:
- 📊 Usage History: Comprehensive log of all tracked sessions with detailed analytics
- 🔒 Privacy First: No accounts, no cloud storage - everything stays on your device
- 💎 Material Design: Beautiful UI following Google's Material Design 3 guidelines
- 🌐 Offline Support: Full functionality without internet connection
- 📱 Cross-Platform: Works seamlessly on iOS and Android
- ⏰ Flexible Timing: Support for different product types with appropriate time limits
- 🎨 Custom Theming: Brand-aware design system with accessibility in mind
- 🔔 Smart Notifications: Background alerts even when app is closed
✨ More health tracking features are continuously being added based on user feedback and medical research.
React Native 0.76 |
Expo 52 |
TypeScript 5.3 |
React Native Paper |
Lottie React Native |
Frontend Stack:
- Framework: React Native 0.76 with Expo Router
- Language: TypeScript for complete type safety
- UI Library: React Native Paper (Material Design 3)
- Navigation: Expo Router with TypeScript support
- Animations: Lottie React Native + React Native Reanimated
- Storage: AsyncStorage for local data persistence
Development Stack:
- Platform: Expo SDK 52 with EAS Build
- State Management: Custom hooks with React hooks
- Architecture: Clean architecture with service layer
- Testing: Jest with Expo testing utilities
- Code Quality: ESLint + TypeScript strict mode
Health & Safety Features:
- Timer System: Precise millisecond tracking
- Notification System: Expo Notifications for alerts
- Data Privacy: Local-only storage with no external dependencies
- Accessibility: Full screen reader and accessibility support
Tip
Each technology was carefully selected for mobile health app requirements, focusing on reliability, privacy, and user safety.
Tip
This architecture prioritizes user privacy and data security while maintaining high performance for real-time health tracking.
graph TB
subgraph "Presentation Layer"
A[React Native Screens] --> B[React Native Paper Components]
B --> C[Custom Hooks]
C --> D[Local State Management]
end
subgraph "Business Logic Layer"
E[useUsageRecords Hook] --> F[Storage Service]
F --> G[Notification Service]
G --> H[AsyncStorage]
end
subgraph "Data Layer"
I[Local Device Storage]
J[Usage Records]
K[Active Product State]
L[App Preferences]
end
D --> E
F --> I
J --> I
K --> I
L --> I
subgraph "External Services"
M[iOS/Android Notifications]
N[Device Timers]
O[Background Processing]
end
G --> M
E --> N
N --> O
sequenceDiagram
participant U as User
participant UI as React Native UI
participant H as useUsageRecords Hook
participant S as Storage Service
participant N as Notification Service
participant D as AsyncStorage
U->>UI: Start Tracking Product
UI->>H: addRecord(productType)
H->>S: addUsageRecord()
S->>D: Store Usage Record
H->>N: scheduleReminder()
N->>U: Background Notifications
U->>UI: Check Current Status
UI->>H: Get Active Product
H->>S: getUsageRecords()
S->>D: Retrieve Records
D->>S: Return Data
S->>H: Filter Active Record
H->>UI: Update Real-time Display
UI->>U: Show Live Timer
Clean, privacy-focused mobile health architecture
femtracker/
├── app/ # Expo Router pages
│ ├── (tabs)/ # Tab navigation
│ │ ├── index.tsx # Main tracking screen
│ │ └── explore.tsx # Usage history
│ └── _layout.tsx # Root layout with theming
├── components/ # Reusable UI components
│ └── BrandButton.tsx # Custom branded button
├── hooks/ # Custom React hooks
│ └── useUsageRecords.ts # Main tracking logic
├── services/ # Business logic services
│ ├── storage.ts # AsyncStorage wrapper
│ └── notification.ts # Alert management
├── constants/ # App constants
│ ├── index.ts # Product types & limits
│ └── Colors.ts # Color definitions
├── types/ # TypeScript definitions
│ └── index.ts # Usage record types
├── src/theme/ # Design system
│ └── index.ts # Complete theme config
└── assets/ # Static resources
├── images/ # App icons & images
└── Lottie/ # Animation files
Note
FemTracker is optimized for battery efficiency and real-time accuracy, crucial for health tracking applications.
Key Performance Indicators:
- ⚡ < 2s App startup time on modern devices
- 🔋 Minimal Battery Impact with efficient background processing
- 💾 < 5MB Total app size for quick downloads
- 📊 Real-time Updates with < 100ms timer accuracy
- 🔄 Instant Sync between app states and notifications
Performance Optimizations:
- 🎯 Efficient Timers: Optimized JavaScript timers for battery life
- 📦 Small Bundle Size: Tree-shaking and code splitting
- 🖼️ Optimized Assets: Compressed images and efficient Lottie animations
- 🔄 Background Processing: Smart notification scheduling
Note
Performance metrics are continuously monitored to ensure optimal health tracking experience.
Important
Ensure you have the following installed for development:
- Node.js 18.0+ (Download)
- npm/yarn/pnpm package manager
- Expo CLI (Installation Guide)
- iOS Simulator (macOS) or Android Studio (all platforms)
1. Clone Repository
git clone https://github.com/ChanMeng666/femtracker.git
cd femtracker2. Install Dependencies
# Using npm
npm install
# Using yarn
yarn install
# Using pnpm (recommended)
pnpm install3. Start Development
npx expo start4. Run on Device
# iOS Simulator
npx expo start --ios
# Android Emulator
npx expo start --android
# Physical Device (scan QR code with Expo Go)
npx expo start🎉 Success! The app will load on your chosen platform with hot reloading enabled.
# Start with different options
npx expo start # Default development server
npx expo start --clear # Clear Metro bundler cache
npx expo start --offline # Offline mode
npx expo start --lan # LAN mode for device testing
# Run tests
npm test # Jest unit tests
npm run lint # ESLint code quality check
npm run type-check # TypeScript validationImportant
FemTracker uses EAS (Expo Application Services) for professional app building and distribution.
# Install EAS CLI
npm install -g @expo/eas-cli
# Login to Expo
eas login
# Create development build
eas build --profile development --platform ios
eas build --profile development --platform android# Create production builds
eas build --profile production --platform all
# Submit to app stores
eas submit --platform ios
eas submit --platform androidApp Store Connect (iOS):
- Automatic submission via EAS Submit
- Review guidelines compliance for health apps
- Privacy policy and data usage declaration
Google Play Console (Android):
- APK/AAB upload via EAS Submit
- Health app category selection
- Medical device disclaimer (if required)
Warning
Health tracking apps may require additional review processes and medical disclaimers depending on your target markets.
Getting Started with Tracking:
- Select Product Type - Choose between tampon or menstrual cup
- Start Tracking - Tap "Insert" when you begin using the product
- Monitor Status - Watch real-time timer and color-coded safety indicators
- Receive Alerts - Get notifications at recommended and maximum usage times
- Record Removal - Tap "Record Removal" when changing products
Step-by-step: Product Selection → Active Tracking → History Review
Understanding Usage Limits:
| Product Type | Recommended Time | Maximum Time | Health Risk |
|---|---|---|---|
| Tampons | 6 hours | 8 hours | TSS (Toxic Shock Syndrome) |
| Menstrual Cups | 10 hours | 12 hours | Bacterial growth, discomfort |
Warning
These limits are based on medical guidelines. Always consult healthcare providers for personalized advice.
Color-Coded Status System:
- 🟢 Green (Safe): Within recommended usage time
- 🟡 Yellow (Caution): Approaching recommended limit
- 🔴 Red (Warning): At or exceeding maximum safe usage time
Alert Types:
// Recommended Change Alert
"Tampon has been used for 6 hours. Consider changing for optimal hygiene."
// Maximum Limit Warning
"WARNING! Tampon has reached 8-hour maximum limit.
Please change immediately to avoid health risks!"Future integrations planned for comprehensive menstrual health tracking:
| Category | Service | Status | Description |
|---|---|---|---|
| Health Data | Apple HealthKit | 🔄 Planned | Sync cycle data with iOS Health |
| Health Data | Google Fit | 🔄 Planned | Android health data integration |
| Analytics | Period Prediction | 🔄 Planned | AI-powered cycle predictions |
| Emergency | Emergency Contacts | 🔄 Planned | Critical alert emergency features |
| Education | Health Resources | 🔄 Planned | Educational content integration |
📊 Future integrations will maintain our privacy-first approach with user consent.
Setup Development Environment:
# Clone and setup
git clone https://github.com/ChanMeng666/femtracker.git
cd femtracker
npm install
# Start development
npx expo start
# Additional development commands
npm run ios # iOS simulator
npm run android # Android emulator
npm run web # Web development (limited features)Development Scripts:
# Development
npm start # Start Expo dev server
npm run ios # iOS simulator
npm run android # Android emulator
npm run web # Web browser (testing only)
# Code Quality
npm run lint # ESLint checks
npm run lint:fix # Fix ESLint issues
npm test # Jest unit tests
npm run type-check # TypeScript validation
# Build & Deploy
npx eas build # Production build
npx eas submit # App store submissionTip
Follow our health-focused development workflow to ensure medical accuracy and user safety.
flowchart TD
A[Health Research] --> B[Create Feature Branch]
B --> C[Implement Feature]
C --> D[Medical Review]
D --> E[Write Tests]
E --> F[Update Documentation]
F --> G[Privacy Review]
G --> H{Safety Approved?}
H -->|No| C
H -->|Yes| I[Create Pull Request]
I --> J[Code Review]
J --> K{Review Approved?}
K -->|No| C
K -->|Yes| L[Merge to Main]
L --> M[Deploy Update]
Unit Testing:
// __tests__/hooks/useUsageRecords.test.ts
import { renderHook, act } from '@testing-library/react-hooks';
import { useUsageRecords } from '@/hooks/useUsageRecords';
describe('useUsageRecords', () => {
it('tracks tampon usage correctly', async () => {
const { result } = renderHook(() => useUsageRecords());
await act(async () => {
await result.current.addRecord('tampon');
});
expect(result.current.activeProduct).toBeTruthy();
expect(result.current.activeProduct?.productType).toBe('tampon');
});
});We welcome contributions to improve menstrual health technology! Here's how you can help:
1. Fork & Clone:
git clone https://github.com/ChanMeng666/femtracker.git
cd femtracker2. Create Health-Focused Branch:
git checkout -b feature/health-improvement-name3. Make Changes:
- Follow medical accuracy guidelines
- Add comprehensive tests for health features
- Update safety documentation
- Ensure privacy compliance
4. Submit PR:
- Include medical research citations
- Provide safety testing results
- Reference health guidelines followed
- Ensure accessibility compliance
Health App Standards:
- Research-backed health recommendations
- Privacy-first data handling
- Accessibility for all users
- Clear medical disclaimers
Code Quality:
- TypeScript for type safety
- Unit tests for critical health features
- Documentation updates
- Performance optimization
|
|
|---|
Support menstrual health technology development and help us continue building life-changing tools for women worldwide!
Sponsor Benefits:
- 🎯 Early Access: Try new health features first
- 🚀 Priority Support: Get help with health app development
- 📊 Research Access: Participate in menstrual health studies
- 🏷️ Recognition: Logo placement in health app ecosystem
- 💬 Direct Input: Influence health feature development
This project is licensed under the Apache License 2.0 - see the LICENSE file for details.
Open Source Health Benefits:
- ✅ Transparent health algorithms
- ✅ Community-driven safety improvements
- ✅ Educational use permitted
- ✅ Medical research applications allowed
Chan Meng Creator & Lead Developer Menstrual Health Technology Advocate |
Chan Meng
LinkedIn: chanmeng666
GitHub: ChanMeng666
Email: [email protected]
Website: chanmeng.live
Contact Information:
- 📧 Health Inquiries: For medical questions, consult healthcare providers
- 💼 Partnership: Open to menstrual health organizations
- 🐦 Updates: Follow for menstrual health tech news
- 💬 Community: Join our health-focused developer community
Important
Medical Disclaimer: FemTracker is designed as a tracking tool and educational resource. It is not intended to diagnose, treat, cure, or prevent any medical condition. Always consult with qualified healthcare providers for medical advice, diagnosis, and treatment decisions.
Health Guidelines:
- Tampon safety limits based on CDC and WHO guidelines
- Menstrual cup recommendations from manufacturer guidelines
- TSS (Toxic Shock Syndrome) awareness and prevention
- Individual health needs may vary - consult your doctor
📖 Menstrual Health Education
Important Health Information:
Toxic Shock Syndrome (TSS):
- Rare but serious bacterial infection
- Associated with tampon use, especially super-absorbent tampons
- Symptoms: sudden fever, vomiting, diarrhea, rash
- Prevention: Use lowest absorbency needed, change regularly
Menstrual Cup Safety:
- Generally safe when used properly
- Clean hands before insertion/removal
- Sterilize between cycles
- Replace according to manufacturer guidelines
When to Seek Medical Attention:
- Unusual discharge or odor
- Persistent pelvic pain
- Signs of infection
- Any concerning symptoms
Empowering women through safe, smart tracking
⭐ Star us on GitHub • 📖 Read Health Guidelines • 🐛 Report Issues • 💡 Suggest Features • 🤝 Contribute to Women's Health
Made with ❤️ for women's health and safety
