Case study
EMI Planner Pro
Consumer Loan Planning PWA
- Plan loans with confidence — EMI modeling, prepayment scenarios, and side-by-side bank comparisons.
- Free public calculator on the homepage; save forecasts and compete on the interest-savings leaderboard.
- Mobile-first PWA with push reminders that bring borrowers back to their saved scenarios.
- Built for Indian borrowers who need clarity beyond opaque bank calculators and spreadsheets.
- Industry
- Consumer Fintech
- Duration
- 1.5 Months
- Platform
- PWA
- Users
- Consumers
- Stack
- Next.js · React · PWA · Workbox
What was built and why it matters
Executive Summary
Indian borrowers struggle to model loan amortization, simulate extra payments, compare scenarios side-by-side, and understand interest saved and tenure reduction — without building complex spreadsheets or trusting opaque bank calculators.
EMI Planner Pro delivers a mobile-first Progressive Web App that works anonymously on the public homepage, converts visitors through enquiry CTAs, and retains logged-in users with saved forecasts, bank recommendations, leaderboard gamification, and push reminders.
All amortization math runs on a versioned REST API so results stay consistent, can be persisted for the leaderboard, and remain authoritative regardless of client device — while encrypted local storage preserves multi-tab calculator work across sessions.
What problem existed before this project
The Business Challenge
Borrowers needed a trustworthy planning tool that goes beyond a single EMI number — one that shows the impact of prepayments and helps compare banks with real eligibility logic.
Status quo
Before the platform
- Bank calculators show one scenario with no prepayment modeling
- Spreadsheet amortization is error-prone and hard to share with advisors
- No side-by-side comparison across loan amounts, tenures, and bank rates
- Prepayment strategies unclear — reduce tenure vs reduce EMI trade-offs hidden
- Lead capture for loan assistance relies on opaque web forms with high spam rates
- Mobile users lose calculator work on refresh without persistent storage
What it cost
Business consequences
- Borrowers overpay interest by not modeling prepayment impact early
- Wrong bank choice when eligibility and EMI capacity are not factored in
- Advisory leads lost when enquiry forms fail or feel untrustworthy
- Low return visits because there is no saved state or reminder mechanism
- Spreadsheet errors create false confidence in repayment plans
- Conversion funnel breaks when public and logged-in experiences diverge
Previous workflow
How work happened before
A disconnected chain of manual steps — each handoff added delay, errors, and lost visibility.
- 01Step
Single bank calculator
Borrower enters loan amount and tenure; gets one EMI number only
- 02Step
Manual spreadsheet
Prepayment scenarios built by hand with formula risk
- 03Step
No comparison view
Different bank offers evaluated in separate tabs or notes
- 04Step
Advisor enquiry by phone
Lead capture happens offline with no structured data
- 05Step
Lost work on refresh
Calculator inputs disappear when the browser session ends
What the client needed to achieve
Project Objectives
Engagement scope
8 objectives
Deliver a free public EMI calculator usable without login on the homepage
Support multi-tab scenario planning with up to four side-by-side comparisons
Run all amortization math server-side for consistent, authoritative results
Model prepayment types — one-time, recurring, annual, EMI increase, and manual overrides
Provide bank recommendations based on income, EMI capacity, and eligibility rules
Gamify prepayment planning with an interest-savings leaderboard
Convert visitors through verified enquiry CTAs with WhatsApp fallback
Retain users with push reminders deep-linking back to saved forecasts
How the platform addresses the challenge
The Solution
EMI Planner Pro is a Next.js Progressive Web App with three surfaces — a public homepage calculator, auth pages, and a protected dashboard — unified by a shared API client with request interceptors and React context for auth, dialogs, and comparison state.
Calculator scenarios persist locally with encrypted storage so users do not lose work on refresh. Up to twenty tabs each store a full forecast snapshot; up to four can be selected for side-by-side comparison with combined charts and PDF export.
Logged-in users unlock saved forecasts, bank recommendations, leaderboard rankings, and push notification reminders — while the public calculator drives top-of-funnel discovery and enquiry conversion.
Platform architecture
6 components
Public homepage calculator
Anonymous EMI and prepayment modeling with export — no account required
Phone-based authentication
Secure login unlocking dashboard, saved forecasts, and recommendations
Forecast API engine
Server-side amortization for standard and revised schedules
Recommendation engine
Top-three bank matches from income, EMI obligations, and ROI rules
Encrypted local persistence
Multi-tab calculator state survives refresh with versioned migration
PWA + push reminders
Installable app shell with FCM deep links back to saved scenarios
How users move through the system
Product Workflow
User journey
8 steps
- 01Step
Discover on homepage
Visitor opens the public calculator and models a loan scenario anonymously
- 02Step
Add prepayment scenarios
One-time, recurring, or manual overrides show interest saved and tenure reduced
- 03Step
Open comparison tabs
Up to four scenarios selected for side-by-side charts and KPI cards
- 04Step
Export or enquire
Branded PDF/CSV export for advisors, or enquiry CTA with bot challenge verification
- 05Step
Sign in with phone
Registered user saves forecasts and accesses the dashboard
- 06Step
Get bank recommendations
Profile engine ranks top-three matches based on eligibility and EMI capacity
- 07Step
Save to leaderboard
Interest-savings ranking gamifies prepayment planning among users
- 08Step
Receive push reminders
FCM notifications deep-link back to the forecast calculator for EMI due dates
What the platform delivers
Core Features
Platform capabilities
14 features
Public EMI Calculator
Multi-tab calculator with compare, PDF, and Excel export — fully usable without an account on the homepage.
Prepayment Modeling
One-time, recurring, annual, EMI increase, and manual month-by-month overrides with reduce-tenure or reduce-EMI behavior.
Side-by-Side Comparison
Up to four scenarios compared with sticky compare bar, combined charts, and export-to-PDF for the full comparison.
Server-Side Forecast Engine
Amortization math runs on the API so schedules stay consistent and can be saved for leaderboard ranking.
Visual Output & KPIs
Area charts for principal vs interest, KPI cards for EMI, total interest, interest saved, and tenure reduced.
Bank Recommendations
Top-three bank matches from a profile engine using income, existing EMI obligations, and eligibility rules.
Interest-Savings Leaderboard
Gamified prepayment rankings with chart visualizations to motivate smarter loan planning.
Encrypted Tab Persistence
Versioned encrypted local storage preserves up to twenty calculator tabs across browser sessions.
PDF & CSV Export
Branded export with amortization tables and yearly summaries for sharing with financial advisors.
Enquiry Lead Capture
Homepage CTA with math challenge verification and WhatsApp fallback when the API is unavailable.
Phone Authentication
Secure login with automatic session refresh for long calculator sessions without interruption.
Push Notification Reminders
FCM payloads deep-link to the forecast calculator so users return to saved scenarios on EMI due dates.
Installable PWA
Workbox precaching, offline fallback page, and add-to-home-screen prompt for mobile-first access.
Indian Locale Formatting
Rupee display and Indian number formatting throughout the calculator and dashboard experience.
Dashboard, workflows, and portals
Product Screenshots
Product UI
2 screenshots
How the system is structured
Technical Architecture
The customer app is a Next.js Progressive Web App with a public homepage calculator, auth pages, and a protected dashboard. A shared API client layer with request interceptors and React context manages auth, dialogs, and comparison state. A service worker handles app-shell caching and coordinates with Firebase for background push delivery.
All amortization math runs on a versioned REST API with a forecast engine, recommendation engine, and enquiry service. Secure authentication with automatic session refresh, encrypted local scenario storage, and bot challenge verification on lead forms protect user data and conversion quality.
System layers
5 layers
Next.js PWA frontend
Public calculator, auth, and dashboard surfaces
Versioned REST API
Forecast, recommendation, and enquiry endpoints
Encrypted client storage
Multi-tab scenario persistence with versioned migration
Firebase Cloud Messaging
Push delivery via dedicated messaging service worker
Docker + Nginx deployment
Standalone Next.js output behind automated TLS
Infrastructure components
10 services
Next.js with React, TypeScript, Tailwind CSS, and Radix UI
Recharts for amortization and comparison visualizations
Versioned REST API with forecast and recommendation engines
Encrypted local scenario storage with backward-compatible migration
Workbox service worker for PWA app-shell precaching
Firebase Cloud Messaging with dual service worker coordination
PDF and CSV export utilities with branded templates
Bot challenge verification on enquiry lead forms
API client interceptor with automatic session refresh
Standalone Next.js Docker build with Nginx reverse proxy
Hard problems and how they were solved
Engineering Challenges
Challenge 1
Public vs logged-in calculator divergence
Solution
Single calculator component with a public mode flag switching API endpoints and bank data sources without duplicating UI.
Challenge 2
Losing multi-scenario work on refresh
Solution
Versioned encrypted tab persistence with backward-compatible migration from older plain-text snapshots.
Challenge 3
Token expiry during long calculator sessions
Solution
API client interceptor with automatic session refresh and transparent retry on the original request.
Challenge 4
FCM coexistence in a PWA context
Solution
Dual service worker coordination — Workbox for app shell and a dedicated messaging worker with runtime config injection.
Challenge 5
Spam enquiries
Solution
Server-side math challenge verification plus client validation, with WhatsApp fallback to preserve conversion.
Challenge 6
Export for sharing with advisors
Solution
Branded PDF and CSV export utilities with full amortization and yearly summary tables.
Production technologies
Technology Stack
Frontend
- Next.js
- React.js
- TypeScript
- Tailwind CSS
- Radix UI
- Recharts
Backend & API
- Versioned REST API
- Forecast engine
- Recommendation engine
- Enquiry service
Data & client
- Encrypted local scenario storage
- Firebase Cloud Messaging
- Workbox PWA
Infrastructure
- Docker
- Nginx
- Standalone Next.js output
Built for production load
Performance & Scalability
Production readiness
8 optimizations
Standalone Next.js output for minimal Docker runtime footprint
PWA precaching for faster repeat visits and installable shell
Encrypted local scenario storage avoids server round-trips for draft tabs
Parallel dashboard fetches for profile and recommendations on load
Amortization compute offloaded to API — not in browser main thread
Stateless frontend scales horizontally behind Nginx
Indian locale formatting for rupee display throughout the UI
Health checks on app root ensuring reliable uptime at emiplannerpro.com
Operational and commercial outcomes
Business Impact
EMI Planner Pro gave Indian borrowers a trustworthy planning tool — turning opaque bank calculators into transparent, comparable, and shareable loan forecasts with a clear path to advisory conversion.
Outcomes delivered
8 outcomes
Free public calculator driving top-of-funnel discovery without login friction
Prepayment scenarios showing real interest saved and tenure reduced
Side-by-side bank comparison replacing scattered spreadsheet tabs
Leaderboard gamification motivating smarter prepayment decisions
Verified enquiry capture with WhatsApp fallback preserving lead conversion
Push reminders bringing users back to saved forecasts on schedule
Branded PDF and CSV export enabling advisor conversations
Production PWA live at emiplannerpro.com with installable mobile experience
Technology choices explained
Why This Architecture Works
Design rationale
6 decisions
Why this choice
Server-side amortization API
Loan math must be authoritative and consistent — client-side calculation risks device-specific rounding errors.
Why this choice
Encrypted local tab persistence
Multi-scenario planning generates heavy input state that should survive refresh without server round-trips.
Why this choice
Single calculator with public mode flag
Duplicating UI for anonymous and logged-in users creates maintenance drift and inconsistent UX.
Why this choice
Workbox + dedicated FCM worker
PWA app-shell caching and push delivery require separate service worker scopes without conflict.
Why this choice
Bot challenge on enquiry forms
Lead-gen monetization depends on enquiry quality — spam submissions waste advisory follow-up time.
Why this choice
Next.js standalone Docker output
Minimal runtime footprint keeps hosting costs low for a consumer-facing free calculator product.
What this project reinforced
Lessons Learned
Key takeaways
5 lessons
Borrowers engage deeply when they can compare four scenarios side-by-side — not just see one EMI number.
WhatsApp fallback on enquiry forms preserves conversion when API submission fails on slow mobile networks.
Encrypted local persistence is worth the complexity — users abandon calculators that lose work on refresh.
Leaderboard gamification works for prepayment planning because interest saved is a tangible, competitive metric.
Public and logged-in modes must share one calculator component to prevent feature drift over time.
Explore related work
Similar Projects & Services
Common questions about the EMI Planner Pro project
Case Study FAQ
It is a consumer loan planning PWA with EMI calculators, prepayment forecasting, bank recommendations, and offline-friendly access.
The consumer PWA launched in about 1.5 months with Next.js, Workbox, and production deployment on emiplannerpro.com.
Users get trustworthy prepayment scenarios, encrypted local storage, push notifications, and exportable reports in a mobile-first PWA.
About the author
Next step
Next step
Looking to Build Something Similar?
Whether you're building a multi-tenant SaaS, marketplace, CRM, ERP, or AI platform — let's discuss your project and how a dedicated development partnership can deliver it.