Umer Sheraz.
GH
All projects

Banking UI demo · passkeys · transfers · statements · PWA

UmerPay

Open-source banking UI demo — passkeys, transfers, statements, admin tools. Full-stack Next.js you can clone and run.

UmerPay is an open-source digital banking UI demo — not a licensed bank — built to show how a modern retail banking experience can look and behave end to end. It is MIT licensed so teams can fork patterns for onboarding, accounts, transfers, and statements without starting from a blank page.

The app is full-stack Next.js with PostgreSQL and Prisma, JWT-backed sessions, WebAuthn passkeys, OTP-style verification flows, beneficiaries, transaction history, statement views, a progressive web app shell, and an admin area for operational tasks.

Next.js 14App RouterTypeScriptReactTailwind CSSPostgreSQLPrismaJWTWebAuthnPWA

Overview

UmerPay at a glance

What it is

Open-source digital banking UI demo (not a licensed bank)

License

MIT — fork and adapt freely

Live demo

Hosted on Vercel; link above

Source

Public GitHub repository

Data store

PostgreSQL with Prisma migrations

Overview

Layer → technology

LayerPrimary technology
Customer & admin UINext.js 14 (App Router), React, TypeScript
Styling & layoutTailwind CSS
PersistencePrisma ORM → PostgreSQL
HTTP / server logicRoute handlers & server actions
SessionsJWT for authenticated browsing
Passwordless sign-inWebAuthn passkeys where supported

Where engineering effort went (illustrative split)

Rough share of build time — useful for scoping interviews, not a time log.

Customer UI & flows35 %
API, schema & database30 %
Auth, OTP & security patterns22 %
Admin, PWA & polish13 %
Live demoSource code

Case study

Delivery & product depth

What you can try in the product

  • Sign-in flows with passwordless WebAuthn passkeys where the browser supports them
  • OTP-style steps for sensitive actions and session recovery patterns
  • Account overview, balances, and navigation that mirror a credible retail banking UI
  • Internal transfers, external-style transfers, beneficiaries, and transaction lists with filters
  • Statement-style exports and read-only history suitable for demos and interviews
  • Installable PWA behaviour for a closer-to-native feel on supported devices

Architecture & stack

  • Next.js 14 (App Router) with React and TypeScript for the customer and admin surfaces
  • Tailwind CSS for layout and theming; component patterns kept readable for contributors
  • PostgreSQL as the system of record; Prisma for schema, migrations, and type-safe queries
  • REST-style route handlers and server actions where appropriate — clear separation between UI and persistence
  • JWT sessions for authenticated browsing; WebAuthn for passkey registration and assertion

Security & data posture (demo scope)

  • Designed to showcase realistic auth and step-up patterns without claiming production banking certification
  • Passwords and secrets belong in environment configuration — the repo documents what to set locally and in deploy targets
  • Prisma migrations keep schema changes reviewable; sample seed paths help you get data on screen quickly

Admin & operations

  • Admin tools for user/account oversight, configuration, and demo housekeeping
  • Flows that mirror how a small team might support customers during a pilot or hackathon build
  • Enough structure to extend toward KYC placeholders, limits, or audit trails if you fork the project

Backend and platform architecture

Architecture

Backend & platform

Why I published it

  • A single public codebase is easier to discuss in interviews and reviews than screenshots alone
  • Shows opinionated UI polish alongside boring-but-correct persistence and auth
  • Invites contributors: issues, PRs, and forks are welcome under the MIT license

Running and extending it

  • Clone from GitHub, install dependencies, configure `.env` from the documented example, run Prisma migrate/generate, then start Next.js
  • Deploy-friendly: works on Vercel-style hosts with a managed PostgreSQL instance
  • Natural extensions: more account types, richer statements, fraud hooks, or design-system tokens — the schema is meant to grow

Interested in similar delivery?

Get in touch

Keep exploring

Related projects

More work with a similar stack and delivery focus.

Food delivery · React · NestJS · admin

Ghazi Restaurant

Online food ordering & restaurant management — React customer app, NestJS APIs, MongoDB, admin dashboards, chat, and maps. Technical Lead (40% coding, 60% leadership).

ReactNestJSTypeScript
View project →

Gulf lottery · draws, commerce, compliance-aware flows

BIG lottery project in the Gulf

Full-stack lottery platform for the Gulf — tickets, wallets, draws, and compliance-aware journeys. Co-founder & CTO; I lead engineering and delivery end to end.

Next.jsTypeScriptReact
View project →

Morocco · AI matchmaking · 100K users

Cuddloo - AI Match Making App

AI matchmaking and dating app for Morocco — Tinder/Bumble-style product with 100K users. I led Android (Kotlin), Node.js backend, PostgreSQL, web, iOS supervision, and AWS delivery.

KotlinAndroidSwift
View project →
View all projects

© 2026 Umer Sheraz