Web Development Applications in Fintech: Real-World Examples

// npm i express express-session express-rate-limit
const express = require('express');
const session = require('express-session');
const rateLimit = require('express-rate-limit');

const app = express();
app.use(express.json());
app.use(session({
  secret: process.env.SESSION_SECRET || 'dev-only-secret',
  resave: false,
  saveUninitialized: false,
  cookie: { httpOnly: true, secure: true, sameSite: 'strict', maxAge: 15 * 60 * 1000 },
}));

const loginLimiter = rateLimit({ windowMs: 15 * 60 * 1000, max: 5 });
app.post('/login', loginLimiter, (req, res) => {
  // verify password, then send OTP (omitted)
  res.json({ step: 'otp_required' });
});

app.listen(3000);

import hmac
import secrets
import time

OTP_TTL = 300  # seconds
store = {}

def issue_otp(user: str) -> str:
    code = f"{secrets.randbelow(10**6):06d}"
    store[user] = (code, time.time() + OTP_TTL)
    return code   # in real apps: send by SMS or app, never return to client

def verify_otp(user: str, code: str) -> bool:
    saved = store.pop(user, None)          # one-time use
    if not saved or time.time() > saved[1]:
        return False
    return hmac.compare_digest(saved[0], code)

c = issue_otp("asha")
print(verify_otp("asha", c), verify_otp("asha", c))   # True False

<form id="pay">
  <label for="amount">Amount (Rs)</label>
  <input id="amount" type="number" min="1" max="100000" step="1" required>
  <button id="payBtn" type="submit">Pay</button>
  <p id="msg" role="status"></p>
</form>
<script>
  const form = document.getElementById('pay');
  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const btn = document.getElementById('payBtn');
    btn.disabled = true;                          // single submit
    const key = crypto.randomUUID();              // idempotency key
    const res = await fetch('/api/pay', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Idempotency-Key': key },
      body: JSON.stringify({ amount: Number(form.amount.value) }),
    });
    document.getElementById('msg').textContent = res.ok ? 'Payment submitted' : 'Payment failed';
  });
</script>

# pip install flask
from flask import Flask, request, jsonify

app = Flask(__name__)
seen = {}   # use a database with a unique key in real apps

@app.post("/api/pay")
def pay():
    key = request.headers.get("Idempotency-Key")
    if not key:
        return jsonify(error="missing Idempotency-Key"), 400
    if key in seen:
        return jsonify(seen[key])          # same result, no second charge
    amount = request.get_json().get("amount")
    if not isinstance(amount, (int, float)) or not 1 <= amount <= 100000:
        return jsonify(error="invalid amount"), 422
    result = {"status": "submitted", "amount": amount}
    seen[key] = result
    return jsonify(result), 201

// Group transactions by category for a dashboard
const txns = [
  { cat: 'Food', amt: 450 }, { cat: 'Travel', amt: 1200 },
  { cat: 'Food', amt: 300 }, { cat: 'Bills', amt: 2100 },
];

const byCat = txns.reduce((acc, t) => {
  acc[t.cat] = (acc[t.cat] || 0) + t.amt;
  return acc;
}, {});

const fmt = new Intl.NumberFormat('en-IN', { style: 'currency', currency: 'INR' });
for (const [cat, total] of Object.entries(byCat)) {
  console.log(cat.padEnd(8), fmt.format(total));
}

from pathlib import Path

ALLOWED = {".pdf", ".jpg", ".jpeg", ".png"}
MAX_BYTES = 5 * 1024 * 1024
MAGIC = {b"%PDF": ".pdf", b"\xff\xd8\xff": ".jpg", b"\x89PNG": ".png"}

def validate_upload(filename: str, data: bytes) -> str:
    ext = Path(filename).suffix.lower()
    if ext not in ALLOWED:
        return "File type not allowed"
    if len(data) > MAX_BYTES:
        return "File larger than 5 MB"
    if not any(data.startswith(m) for m in MAGIC):
        return "File content does not match an allowed type"
    return "OK"

print(validate_upload("pan.pdf", b"%PDF-1.7 ..."))
print(validate_upload("pan.exe", b"MZ..."))

Project: Mini wallet web app (dummy data)

Pages:
- Login with password + OTP (codes printed to server log)
- Dashboard: balance, recent transactions, spending chart
- Pay: form with validation, confirmation, idempotency key
- Statements: CSV download for a date range
- KYC: form with document upload checks

[ ] Session cookies: HttpOnly, Secure, SameSite
[ ] Rate limit on login and OTP endpoints
[ ] Server-side validation on every form
[ ] Idempotency key on payments
[ ] Users can only access their own data
[ ] Amounts formatted for en-IN
[ ] Works on mobile screens
[ ] Keyboard and screen-reader friendly

# Mini Wallet Web App

## Features
Login + OTP, dashboard, payments, statements, KYC.

## Security decisions
Cookies, rate limits, idempotency, access checks.

## Accessibility
Labels, focus states, contrast, chart text alternatives.

## Run locally
npm install && npm start (or pip install -r requirements.txt)