Building for Scale: super.money’s Journey to a Top 5 UPI Super App in Just 8 Months

From Concept to Top 5: Architecting a Super App for Speed, Scale, and Native-Like Performance

Screenshot of App homepage and inline scanner

1. The Mission: Speed to Market, Without Compromise

Objective: Build and iterate on a full-scale consumer payments Super App — serving UPI, Co-branded credit cards, FDs and Lending — with a lean team, without sacrificing UX, stability, or performance.

Challenges:

• Breaking Through a Crowded Fintech/UPI Market
• Delivering Native-Like Performance, Seamlessly
• Navigating UPI and Regulatory and security Complexity
• Moving Fast with Experiments and Feature Flags
• Building Big with a Lean Engineering Team

2. Strategic Platform Choice: Balancing Speed, Scale, and Performance

In a highly dynamic and competitive UPI/fintech space, our platform needed to meet three core demands:

• Rapid iteration cycles to support frequent A/B tests, feature flags, and continuous product experimentation
• Near-native performance, especially for critical journeys like onboarding, UPI payments, and identity verification etc
• Scalability and maintainability, without duplicating engineering effort across platforms

To meet these evolving needs, we chose a hybrid architecture — investing in native development where hardware-level performance was essential, and using a cross-platform layer to maximize speed, reusability and dynamic configuration from the backend.

What This Approach Offered Us:

• A shared codebase across Android and iOS for faster delivery and reduced maintenance
• Fast feedback loops through option of OTA updates
• Server-driven UI and routing, allowing product and layout changes without full redeployment
• Modularization and component reuse as a first-class principle
• Modern developer tooling to support quick iteration and a high-quality development experience

This wasn’t a compromise — it was a strategic engineering decision. It allowed us to combine the performance of native with the velocity of a cross platform layer, helping us move fast, scale reliably, and ship a feature-rich app that users love.

3. Foundational Architecture Principles

We laid down a well-defined architectural foundation that ensures predictability, reuse, and performance, while enabling server-driven configuration for dynamic UI, routing, and features without requiring app updates.

UI — Server-Driven along with design system

• Entire app UI — pages, components, styles, actions, routing — driven by server
• Enabled zero-code feature rollout and on-the-fly experiments
• Design system for color tokens, typography, spacing and adaptive dimensions along with common components.

Strongly Typed Contracts with Backend

• Contracts between FE/BE generated through a common spec.
• Ensured type safety and reduced integration bugs.
• Eliminated guesswork during integration.
• Improved onboarding and team velocity.

OTA Updates with CodePush

• Enabled fast feature delivery and bug fixes without store delays.
• Supported versioned sync with server config.
• Seamless rollbacks and phased rollouts.

4. Systems for Performance & Reliability

We treated performance as a core feature. React Native doesn’t have to be slow — if you engineer for it.

App Load Time Optimization

We took deliberate steps to optimize Time to Interactive (TTI) and ensure users land on the first screen as fast as possible — even with dynamic, server-driven UI.

What We Did:

• Hermes Runtime Enabled by Default Leveraged Hermes for faster startup, reduced memory usage, and ahead-of-time bytecode compilation.
• Lean JavaScript Bundle Avoided unnecessary imports, large utility libraries, and monolithic feature code. Every kilobyte was earned.
• Deferred Initialization of Heavy Routines Expensive startup routines (like analytics initialization, remote config, and data prefetching, hygiene checks) were deferred asynchronously to run after the initial screen was rendered — ensuring a fast and responsive app launch experience.
• Lazy Screen & Component Loading Used dynamic import() and React.lazy for non-critical routes and heavy components
• Split Navigation & Feature Entry Points Dynamically resolve and inject routes from backend configuration. Screens that aren’t needed immediately are loaded only when the user lands on them.
• Startup Benchmarking in with every release Tracked startup metrics per release (e.g., JS load time, first screen render time) to prevent regressions.

Offline-First UX with Persistent Caching

• Cached server-driven screens locally
• Enabled near-instant loads and offline flows
• Reduced dependency on network availability.

FastImage for Optimized Image Loading

• We leveraged FastImage for performant image loading and caching along with CDN.
• Handled low-bandwidth scenarios gracefully.

App Size Under 21MB

• Used reusable modules, and efficient bundling to keep bundle size low
• No Heavy Embedded Assets
• Ensure fast installs and low friction

Paginated Lists for Large Data Sets

• Seamlessly rendered large scrollable datasets using efficient paging abstractions

5. Reusability & Developer Velocity at the Core

With multiple products (UPI, CBCs, FD, Loans), we built generic, reusable constructs to reduce dev effort while improving consistency.

Generic Form Engine

• Server-driven metadata-based form engine
• Reused across all onboarding and transactional flows

Dynamic Widgets + BE-Driven Styling

• Widget library rendered via backend instruction
• Reduced frontend churn and enabled theme-level A/B tests

Design System Integration

• Component-first UI design tied to centralized tokens and variants
• Consistent UX across modules with less QA load

Design system

6. Native Where It Counts

For performance-critical use cases like Scan & Pay, we didn’t hesitate to go native.

Camera via Native Code

• QR scanning, torch, zoom — all handled natively
• Exposed clean RN bridges for orchestration
• Best UX for critical flows, zero compromises

Inline Scanner

7. Quality as a Culture: Code, Assets & Runtime

We treated code quality, performance, and asset hygiene as non-negotiable from Day 1. With a small team, automation and discipline were our force multipliers.

PR-Driven Quality Gates

We enforced strict quality checks in every pull request via CI:

• ESLint + Prettier rules aligned with our internal guidelines
• Rules setup for PR size warnings, checklist enforcement, and missing test cases
• Husky pre-commit hooks to prevent bad commits

Asset & Image Size Checks

To keep the app size consistently under 22MB:

• Automated image size validator in CI to block large or uncompressed assets
• Predefined guidelines for asset formats, fallback resolutions, and CDN usage
• Avoided embedding static assets by driving UI from backend instructions

Competitive QA Benchmarking for Real-World Performance

To ensure we weren’t just fast — we were market-leading — we regularly benchmarked ourselves against top UPI and fintech apps on:

• Cold start time and app launch responsiveness
• Scan & Pay camera readiness and QR detection time
• UPI transaction time from intent to confirmation
• Page load consistency and render smoothness

This gave us an external baseline to measure not just regressions — but competitive gaps we could close with engineering.

Production Performance Monitoring: Cold Start, Page Load & Frame Drops

To ensure native-like performance at scale, we instrumented our app with Performance Monitoring with custom metrics to track real-world usage patterns. Here’s how we broke it down:

Cold Start Time (App Launch to First Frame)

• Tracked app cold start time (from launch tap to first render) separately from warm starts.
• Instrumented both native launch time and JS engine init + first bridge response, especially important with Hermes.
• Used this data to tune:

- Hermes startup time
- Deferral of non-critical initialization
- Splash screen display logic

First Screen Load Performance

• Measured time from app start to first interactive screen fully ready.
• Tracked API completion + render commit using custom traces around key journeys (e.g., home page, QR scanner).
• Helped us identify:

- Slow-loading server-driven layouts
- Initial cache hits/misses
- Backend bottlenecks in first-load APIs

Frame Rendering & UI Smoothness

To ensure a fluid and responsive UI, we focused on tracking and eliminating frozen frames (UI blocked for >700ms) and slow frames (>16ms render time) in production.

What We Did:

• Instrumented the app to detect rendering stalls and long-running tasks on the JS thread.
• Used React DevTools Profiler to surface common UI Jank issues.
• Identified common offenders such as:

- Large server-driven lists rendered without virtualization
- Unoptimized conditional rendering in dynamic forms
- Inefficient animation logic in high-interaction components

• Solved them through:

- Memoization, React.memo, and useCallback optimizations
- Moving expensive tasks off the render path using asynchronous strategies.
- Optimising animations for right experience

This deep focus helped us maintain consistently smooth transitions and interactions, especially on mid- to low-end Android devices.

Background Performance signals

• Captured API latencies, retry patterns, and dropped traces in low-network conditions.
• Benchmarked offline-first strategies and prefetch effectiveness.

This breakdown gave us full visibility into what the user actually experiences in production — not just dev builds — and allowed us to proactively detect regressions, optimize key flows, and build performance into every release.

Why This Matters

In a fast-moving team working on a super app, slowing down to enforce quality gates actually made us faster over time. It:

• Prevented bloated PRs
• Kept app size stable across releases
• Ensured no critical slowdown ever reached production
• Enabled reliable OTA updates with small, scoped diffs

8. The Impact

+----------------+---------+
|      KPI       | Outcome |
+----------------+---------+
| App Size       | < 22MB  |
| Page Load Time | < 500ms |
| Install        | 10M +   |
| App Rating     | 4.6 +   |
+----------------+---------+

9. Takeaways & What’s Next

Core Lessons:

• React Native can scale when built with the right architectural principles
• Server-driven design + typed contracts + OTA updates = high agility
• Native components can be selectively used without bloating the app
• Small teams can ship fast and scale smart with reusable foundations

10. Up Next: Deep dive into:

• List Rendering with Huge Datasets (https://medium.com/super-tech/building-a-performant-contact-list-view-recycling-in-react-native-ed5864c25860)
• Server-driven form engine
• Load Time Performance Tuning
• Code Quality via Lint + PR Hooks
• How we do dynamic experiments without app update
• WatermelonDB strategies for partial sync and page caching
• Optimizing QR scan flows for sub-100ms camera load time and QR resolution time.

Behind the code

The successful navigation of this complex architectural journey, from initial concept to a robust, scalable application, speaks volumes about the collective genius and relentless effort of our entire super.money Engineering team. Every line of code, every architectural decision, and every performance gain is a testament to their collaboration, innovation, and unwavering commitment to excellence. It’s their hands-on dedication that truly brought this vision to life.

Let’s Talk (Why Join Supermoney?)

Building a top-tier consumer app with complex flows, demanding performance, and constant iteration is tough. As the journey of a leading UPI app proves, a hybrid architecture isn’t just a compromise — it’s a competitive advantage. This strategic blend lets you ship features fast, optimize critical paths natively, and iterate at lightning speed, all without the dreaded “rewrite.” It’s about maximizing impact with smart tech choices.

At Supermoney, we don’t just talk this talk; we live it. We’re building the next generation of financial products, tackling high-scale, high-security challenges head-on. If you’re an engineer who thrives on solving hard problems, values pragmatic architecture over dogma, and wants to see your code impact millions, then you belong with us.

Ready to build something truly exceptional? We’re hiring