Medly | Medication and Mood Tracker - React

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.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.htmlMedly 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.Medly Everything the App DoesMedly  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 timeAutomatic 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 historyHome 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 filteringLocal 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 includedTechnologyReact 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