Monthlify

Yearly savings, monthly payments — zero-fee subscription financing.

Comment

Inspiration

Subscription fatigue is real — the average person spends $200+/month across streaming, productivity, and delivery services. Most of these offer significant yearly discounts (often 15-40% off), but paying $200-$600 upfront for an annual plan isn't realistic for students and budget-conscious consumers. We asked: what if someone fronted the yearly price and let you pay it back monthly, keeping the savings in your pocket? That's the gap Monthlify fills — turning a lump-sum commitment into a zero-fee installment plan.

What it does

Monthlify is a subscription financing platform that pays the yearly price of your subscriptions upfront so you get the annual discount, then splits the cost into 12 equal monthly payments with no fees. Users browse a catalog of popular services (ChatGPT Plus, Netflix, Adobe Creative, Amazon Prime, etc.), select a yearly plan, and Monthlify finances it against a small credit limit ($100-$500). The app tracks active subscriptions, upcoming payments, and remaining balances. Beyond financing, it includes a financial literacy section with daily tips, lessons, and streak-based engagement on topics like credit building and budgeting — plus a student deals hub with exclusive discounts verified through .edu email addresses.

How we built it

  • Dual-surface architecture: A mobile-first PWA (app/) with full tab navigation (Home, Subs, Learn, Deals, Profile) and a responsive marketing site + web dashboard (web/), both built with React and Vite.
  • Backend: Supabase for auth (email/password), Postgres database for financed subscriptions, payments, and user state — all accessed via the Supabase JS client with real-time row-level queries.
  • Design system: A custom token-based theme (monthlifyTheme) with full light/dark mode support, hand-drawn SVG icons (MIcon), and reusable components (MCard, MButton, MPill, CreditMonthWheel, SubGlyph).
  • Simulation engine: A time-travel feature (SimGear) that lets demo users advance the simulated date forward to trigger due dates, overdue states, and interest calculations — making the full payment lifecycle demonstrable without waiting months.
  • State management: React Context (AppContext) with a dispatch/action pattern for navigation, financing, payments, and student verification — no external state libraries needed.

Challenges we ran into

  • Realistic financial modeling: Getting the installment math, overdue detection, and late-payment interest (29.79% APR) to behave correctly across edge cases — partial payoffs, month boundaries, and simulated time jumps — required careful date arithmetic and state synchronization.
  • Dual-app consistency: Maintaining feature parity between the mobile PWA and the web dashboard while they share a data layer but have completely different UI structures and navigation models.
  • Simulation without confusion: Building a time-travel tool that's useful for demos but doesn't corrupt real user state was tricky — it needed to persist per-user, reset cleanly, and cascade correctly through overdue calculations and payment flows.

Accomplishments that we're proud of

  • Zero-fee model: The entire financing flow charges $0 to the user when they pay on time — the business model relies on partner referrals, not user fees. That's a genuinely consumer-first approach.
  • Full lifecycle in one demo: A user can sign up, finance a subscription, advance time, see an overdue state with interest, make a payment, and pay off the full 12-month term — all in a single session using the simulation gear.
  • Financial literacy built in: The Learn tab with daily tips, swipe-through lessons, streak tracking, and a curated student deals section makes this more than a payments app — it's a financial wellness tool.
  • Polished design system: Custom theme tokens, dark mode, hand-crafted SVG icons, and a cohesive purple-ink visual identity across both surfaces — no UI library dependencies.

What we learned

  • Small credit limits ($100-$300) make subscription financing accessible without the risk profile of traditional BNPL — the amounts are low enough to be manageable but high enough to cover most subscription stacks.
  • Building a simulation/time-travel layer early pays off enormously for fintech demos — you can't wait 12 months to show a product working.
  • Supabase's auth + Postgres combo is extremely productive for a hackathon — we went from zero to authenticated, persistent, multi-user state in hours, not days.

What's next for Monthlify

  • Real payment integration: Connect Stripe or Plaid for actual payment processing and bank-linked autopay.
  • Expanded catalog: Grow beyond the initial 6 subscriptions to 60+ services with live pricing pulled from provider APIs.
  • Credit score impact: Partner with credit bureaus so on-time Monthlify payments help users build real credit history.
  • Smart recommendations: Use spending patterns to suggest which subscriptions would save the most by switching to yearly.
  • Group plans: Let roommates or families split a financed yearly subscription across multiple people.
  • Native mobile app: Ship to the App Store and Google Play with push notifications for upcoming payment reminders.

Built With

Share this project:

Updates