Period Tracker
React Native template.
A full React Native template for shipping a period & cycle tracker. Includes a horizontally scrollable 7-day strip with logged-period highlighting, a calendar view with period + fertile-window markers, daily logs (mood, energy, flow, basal temp, cervical mucus), a symptoms library grouped by category, cycle predictions, a saved-articles library, partner-share, reminders, settings, and a paywall. Built with Expo Router, NativeWind 4, TanStack Query 5, and Vibecode DB. The Insights tab ships with a full statistics dashboard — cycle length trend bars, period length trend, flow intensity distribution, top symptoms frequency, and mood distribution — all computed from real cycle and daily-log data.
Production screens.
Light and dark.
Each flow vetted by senior designers. Each interaction motion-tuned with Reanimated. No AI-looking gradients.
Three production layers.
One repository.
React Native + Expo
- →Screens designed light & dark
- →NativeWind + Reanimated motion
- →Expo Router file-based nav
- →Push notifications wired
- →EAS build ready
Vibecode DB
- →Supabase default · Drizzle/Neon adapters
- →Auth + storage + realtime + edge
- →RLS on every table
- →Schema + migrations + seed
- →Typed contracts at every boundary
BYOK AI + provider plug-ins
- →Provider-agnostic AI layer
- →Streaming + tool use + retries
- →Stripe SDK ready (where relevant)
- →Token accounting helpers
- →No keys in client bundle
Hand the repo to
your agent.
Ship features in hours.
The architecture is mapped in CLAUDE.md, AGENTS.md, and .cursorrules so any agent — Claude Code, Codex, OpenCode, Cursor — knows where things live.
- ✓Slash commands shipped: /add-screen, /swap-backend, /audit-security
- ✓Payment + map + auth + AI providers behind abstractions
- ✓Domain logic documented as state machines and diagrams
- ✓Every API call has a typed contract and a test
Period Tracker,
fully wired.
Cycle ring + phase calculator
Horizontally scrollable 7-day strip with logged-period and predicted-period highlighting; dynamic 'days until next period' and pregnancy-chance computation that updates with the selected date.
Calendar with period & fertile dots
Month grid with filled circles for logged period days, dashed circles for predicted period, accent rings for fertile window, and a distinct marker for ovulation day.
Daily logs (mood, energy, flow, temperature)
Bottom-sheet log flows with pill-chip multi-select for moods, symptoms, and discharge, plus stacked Water / Weight / Basal Temperature cards with +/− and edit controls.
Symptoms library with categories
Searchable, category-filtered library (pain, body, energy, skin, emotional) with friendly descriptions for every symptom.
Cycle predictions (next, fertile, PMS)
Predicted next period, fertile window range, ovulation day, and PMS window — all derived from past cycles.
Saved articles library
Doctor-reviewed articles with bookmark toggles per article and a top-right Saved filter on the Articles screen.
Partner share with toggles
Email invite plus granular toggles for which data (cycle, mood, symptoms, PMS alerts) the partner can see.
Statistics dashboard
Insights tab with cycle length trend bars, period length trend, flow intensity distribution, top symptom frequency, and mood distribution — all computed from real data.
The audit we ship
with every release.
We don’t say “secure” and hope. Every release goes through a written checklist, and we ship the checklist with the code. Here’s what gets verified before a build leaves our hands.
- No API keys in client bundlescanned
- RLS policy on every tableall tables
- Provider secrets in edge functions only
- Webhook signatures verified
- Rate limiting on auth + critical endpoints
- PII fields encrypted at rest
- File uploads in private buckets
- Chat moderation on incoming messages
- OWASP mobile top-10 reviewed
- Dependencies pinned + npm audit clean
~310 engineering
hours, already paid for.
A senior React Native engineer at $120/hr writing this from scratch — and getting security right — costs ~$37,000.
From repo to App Store in four steps.
- 01
Download & Install
Clone the repository and install dependencies with a single command.
- 02
Customize
Update colors, fonts, and assets to match your brand.
- 03
Connect Backend
Add your backend credentials in the environment config.
- 04
Deploy
Build and submit to the App Store and Google Play.
Had a working MVP in front of beta users within a week. The entire backend was already wired up, so I just focused on customizing the UI and plugging in my API keys. Weeks of work, done.
One purchase. Yours forever.
Pick the license that matches how you ship.
Questions about the Period Tracker template
What is included?
Is this compatible with Expo?
Can I customize the branding?
Do you provide support?
Ship your period tracker app
in days.
Production screens. Real backend. Security-audited. Your agent will thank you.