Public vs logged-in calculator divergence
Single calculator component with a public mode flag switching API endpoints and bank data sources without duplicating UI.
Case study
EMI Planner Pro
Consumer Loan Planning PWA
emiplannerpro.com
Product preview
Screenshots
Overview
Built EMI Planner Pro customer PWA — Next.js and React with a multi-tab EMI calculator, encrypted local scenario storage, public and authenticated forecast APIs, bank recommendations, interest-savings leaderboard, FCM push, Workbox PWA, PDF and CSV export, secure session management, and Docker/nginx deployment on emiplannerpro.com.
Problem & goal
The Challenge
Indian borrowers need to model loan amortization, simulate extra payments, compare scenarios side-by-side, and understand interest saved and tenure reduction — without spreadsheets or opaque bank calculators.
EMI Planner Pro delivers a mobile-first Progressive Web App that works anonymously on the public homepage, converts visitors via enquiry CTAs, and retains logged-in users with saved forecasts, bank recommendations, leaderboard gamification, and push reminders.
Target users
Who It's For
Anonymous visitors — free EMI and prepayment calculator on the homepage with no login required
Registered customers — phone-based accounts with profile, income and EMI data, saved forecasts, and recommendations
Loan seekers — enquiry flow for property and loan assistance with verification and WhatsApp fallback
Core capabilities
Platform Modules
Public EMI calculator
Multi-tab calculator with compare up to four scenarios, PDF and Excel export — fully usable without an account.
Auth & sessions
Phone login with secure session management and automatic token refresh for long calculator sessions.
Dashboard
Profile summary, credit score display, lead status, and recommendation highlights at a glance.
Forecast
Authenticated calculator with bank ROI rules and optional save-to-leaderboard for interest-savings rankings.
Recommendations
Top-three bank matches from a profile engine based on income, existing EMI obligations, and eligibility rules.
Leaderboard
Interest-savings rankings with chart visualizations to gamify prepayment planning.
Profile
Personal info, income entries, and existing EMI obligations that feed the recommendation engine.
Notifications
Push notification history with deep links back to the forecast calculator for EMI reminders.
Enquiry CTA
Lead capture on the homepage with bot challenge verification and WhatsApp fallback for conversion.
PWA shell
Offline fallback page, add-to-home-screen install prompt, and service worker for repeat visits.
High-level design
System Architecture
The customer app 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 layer with request interceptors and React context for auth, dialogs, and comparison state. Calculator scenarios and multi-tab inputs persist locally with encrypted storage so users do not lose work on refresh. A service worker handles app-shell caching and coordinates with Firebase for background push delivery.
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. Secure authentication with automatic session refresh, encrypted local scenario storage, and bot challenge verification on lead forms protect user data and conversion quality.
Production stack
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
Calculator inputs & outputs
EMI Forecast Engine
Loan parameters
Loan amount, tenure, interest rate, and start date with calendar picker for accurate schedule generation.
Extra payment types
One-time, recurring, annual, EMI increase, and manual month-by-month overrides with reduce-tenure or reduce-EMI behavior.
Server-side calculation
Amortization math runs on the API so standard and revised schedules stay consistent and can be saved for leaderboard ranking.
Visual output
Area charts for principal vs interest over time, KPI cards for EMI, total interest, interest saved, and tenure reduced.
Export
Branded PDF and Excel-compatible CSV export with amortization tables and yearly summaries for sharing with advisors.
Scenario planning
Multi-Tab Comparison
Users open up to twenty calculator tabs, each storing a full forecast result and input snapshot with a bank label. Up to four scenarios can be selected for side-by-side comparison with a sticky compare bar, combined chart with color-coded series, and export-to-PDF for the full comparison. Tab state persists with debounced writes and versioned encrypted storage that migrates older plain-text snapshots automatically.
Engagement & conversion
Recommendations & Lead Funnel
Bank recommendations
Profile engine ranks top-three bank matches using credit score validation, eligible income, EMI capacity, and bank ROI rules.
Recalculation
Logged-in users can trigger fresh recommendations with an optional loan amount override.
Enquiry capture
Homepage CTA collects name, mobile, property interest, and message with math challenge verification before API submit.
WhatsApp fallback
Pre-filled WhatsApp deep link preserves conversion when the enquiry API is unavailable.
Lead status
Dashboard shows enquiry status from the profile API — monetization is lead-gen and advisory, not in-app billing.
Mobile-first engagement
PWA & Notifications
Installable PWA
Workbox precaching for app shell and static assets, dedicated offline page, and before-install-prompt capture for add-to-home-screen.
Firebase push
Device token registration after login, foreground toasts, and background delivery via a dedicated messaging service worker.
EMI reminders
Push payloads deep-link to the forecast calculator so users return to their saved scenarios.
Offline behavior
Static shell cached for repeat visits; calculator requires network with a clear offline explanation page.
Challenges solved
Engineering Highlights
Losing multi-scenario work on refresh
Versioned encrypted tab persistence with backward-compatible migration from older plain-text snapshots.
Token expiry during long calculator sessions
API client interceptor with automatic session refresh and transparent retry on the original request.
FCM coexistence in a PWA context
Dual service worker coordination — Workbox for app shell and a dedicated messaging worker with runtime config injection.
Spam enquiries
Server-side math challenge verification plus client validation, with WhatsApp fallback to preserve conversion.
Mobile navigation across dashboard sections
Horizontal scroll nav with sticky header so all dashboard areas remain reachable on small screens.
Export for sharing with advisors
Branded PDF and CSV export utilities with full amortization and yearly summary tables.
Built for production load
Performance & Scale
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
Operations
Deployment
The customer app ships as a multi-stage Docker build with standalone Next.js output, deployed behind nginx with automated TLS at emiplannerpro.com. PWA assets are generated at build time and the service worker registers only in production. Health checks on the app root ensure reliable uptime for the loan planning platform.
Roadmap
What's Next
Complete profile CRUD UI for income and EMI obligation management
EMI reminder project screens wired to existing API endpoints
Offline cached forecast preview for read-only viewing without network
Social share for comparison PDFs and scenario links
Biometric login via WebAuthn for returning PWA users
Hindi and regional language localization for calculator labels
TanStack Query for dashboard data caching and refetch