Medly | Medication and Mood Tracker - React

Medly – Medication and Mood Tracker iOS App Template

Medly is a complete, production-ready medication tracking app for iOS. It helps users track daily and as-needed (PRN) medications, run timed mood check-ins, and see how their medication truly affects them through weekly trend charts, adherence streaks and a PRN effectiveness summary. The app ships as a React web app wrapped in a native iOS shell with Capacitor, including in-app subscriptions, local notifications and a Firebase backend.

Demo Instructions

Demo login: email demo@medly.app – password demo123. Alternatively, tap the “Explore the demo account” button on the login screen. The demo account works fully offline (no Firebase setup needed) and comes pre-loaded with three weeks of realistic sample data: medications, dose logs, mood check-ins and populated trend charts. All demo data is fictional and is stored only on your device; sign out from Settings to leave demo mode.

To build the app from source with real user accounts, a free Firebase project is required – setup takes about 10 minutes:

• Create a free Firebase project at firebase.google.com
• Enable Email/Password authentication and Cloud Firestore
• Paste your Firebase config into one file: src/lib/firebase.js
• Run npm install, npm run build, then npx cap sync ios – full steps are in documentation.html

External service cost warning: this app relies on Firebase (a third-party Google service). Firebase’s free Spark plan is sufficient for development and small-scale use, but if your usage grows or you enable paid features, Firebase may incur additional charges. These potential external costs are not covered by the purchase price of this item and are the buyer’s responsibility.

Apple Developer Program: publishing the app and managing its in-app subscriptions requires a paid Apple Developer Program membership (US$99/year). This annual fee is not covered by the purchase price and is the buyer’s responsibility.

Everything the App Does

• 14-step onboarding flow with demographic questions, medication categories, goals, educational screens, sign up / sign in, paywall and notification permission step
• Daily medication tracking with checkbox-style dose logging, undo and multiple scheduled times per day
• PRN (as-needed) medication quick logging with custom dose and time
• Automatic post-PRN check-in reminder, due 30/45/60 minutes after a PRN dose (configurable)
• 5-step daily mood check-in: mood, anxiety, focus, mental clarity and stress sliders plus notes
• 3-step post-PRN check-in: emotion picker, PRN effect comparison (better / same / worse) and notes
• Medication wizard: guided multi-step add flow with dose, unit, schedule times, reminder offset and start date
• Medication management: edit, deactivate and delete medications with full dose history
• Home dashboard: 15-day streak counter, weekly adherence (7/7 days), week calendar strip with logged-day dots and week navigation
• Trends screen: weekly area charts with metric selector (Mood, Anxiety, Focus, Mental Clarity, Stress), improving / declining indicators and PRN check-in summary (Better / Same / Worse counts)
• Insights screen: week-over-week navigation with mood charts and medication dose overlay bars
• Effect Curve screen: visual onset / peak / wear-off timeline for fast-acting medications
• Timeline screen: combined chronological feed of medication logs and mood check-ins with type filtering
• Local notifications: daily medication reminders with configurable offset, scheduled check-in times (up to 5 per day) and lazy permission request
• In-app subscriptions: 3-day free trial paywall, weekly and annual plans, StoreKit 2 via native purchases, restore purchases, subscription status in settings
• Settings: notification toggle, check-in times editor, subscription management, JSON data export, sign out, account deletion and crisis resources
• Streaks, empty states with blurred chart previews, loading states, toasts and Framer Motion animations throughout
• Warm dark theme with terracotta accent, custom app icon included

Technology

• React 18 + Vite (web app)
• Capacitor 8 (native iOS shell, App Store ready)
• Firebase Auth + Cloud Firestore (free tier friendly backend)
• TanStack Query v5 (data fetching and caching)
• React Router v6
• Tailwind CSS + shadcn/ui components
• Recharts (trend charts)
• Framer Motion (animations)
• @capacitor/local-notifications (reminders)
• @capgo/native-purchases (StoreKit 2 subscriptions)
• Deployment target: iOS 17.0

What the Buyer Gets

• Complete React + Capacitor source code for the iOS app
• Xcode project ready to build and submit to the App Store
• Full documentation.html with setup, configuration, re-theming and App Store submission guide
• All preview screenshots
• Free updates to this template

AI Disclosure

In accordance with Envato’s AI disclosure policy: portions of this template’s source code, documentation and preview images were generated with AI-assisted tools. All code has been human-reviewed, tested and is provided as a fully working template.

Please note: this is a source code template, not a compiled app. Basic Xcode and command line knowledge is required to build, customize and submit the app. This app is a tracking tool and does not provide medical advice.