DieuTrang
FinTech Case Study Library

FinTech Case Study Library

A collection of interactive demos that run in your browser β€” blockchain, DeFi, trading, risk, payments, data, business models.

38 case studies

Trading & Investment
beginner

Compound Interest Calculator

Simulate how compounding shapes long-horizon wealth, with deposits and frequency.

ReactTypeScriptRecharts
Trading & Investment
beginner

Time Value of Money

Visualize PV, FV and NPV β€” why a dollar today beats a dollar tomorrow.

ReactD3
Trading & Investment
advanced

Portfolio Optimizer

Modern Portfolio Theory β€” plot the efficient frontier and pick optimal weights.

ReactD3Math
Trading & Investment
advanced

Trading Strategy Backtest

Backtest SMA crossover / RSI strategies on historical data β€” Sharpe, drawdown, win-rate.

ReactRecharts
Trading & Investment
intermediate

Interactive Financial Chart

Candlestick + volume + indicators β€” a playground for technical analysis.

ReactD3
Blockchain & DeFi
beginner

Blockchain Visualizer

Each block is a brick β€” watch hashes, nonces, mining and immutability live.

ReactD3Crypto
Blockchain & DeFi
intermediate

Consensus Simulator

PoW vs PoS vs PBFT β€” simulate a network and watch forks, finality, and 51% attacks.

ReactSimulation
Blockchain & DeFi
intermediate

Cryptography & Signatures

Hash, ECDSA, Merkle trees β€” run them live in your browser, step by step.

ReactWebCrypto
Blockchain & DeFi
advanced

DeFi AMM Pool Simulator

Uniswap-style xΒ·y=k pool β€” swap, add liquidity, watch IL and slippage in real time.

ReactTypeScript
Blockchain & DeFi
advanced

Smart Contract State Machine

Model escrow / auction contracts as state machines and explore safe transitions.

ReactSolidity
Blockchain & DeFi
advanced

Tokenomics Simulator

Vesting, inflation, burns, staking β€” watch supply and price evolve with structure.

ReactRecharts
Risk & Credit
intermediate

Credit Risk Score Gauge

Inputs (income, debt, history) β†’ PD / LGD / EAD β†’ credit score β€” credit scoring made visual.

ReactD3
Risk & Credit
intermediate

Confusion Matrix (Fraud Detection)

Precision / recall / F1 for fraud detection β€” drag thresholds, see the trade-offs.

ReactML
Risk & Credit
advanced

Decision Tree for Credit

Train a decision tree on a loan dataset β€” see which feature splits where, with Gini impurity.

ReactD3ML
AI in Finance
advanced

Neural Network for Pricing

A 3-layer MLP predicting option prices β€” watch forward pass and backprop layer by layer.

ReactD3
AI in Finance
intermediate

Market Sentiment Analysis

News + Twitter stream β†’ sentiment score β†’ plotted against the stock price.

ReactNLP
Payments & Banking
intermediate

Shopee 5 Payment Methods Compare

Mai picks 1 of 5 methods on Shopee: VietQR, MoMo, Visa, COD, BNPL. Each has different MDR/speed/cost.

ReactXYFlowFramer Motion
Payments & Banking
intermediate

Banking API & Open Banking

OAuth + PSD2: bank β†’ fintech consent, token, and transaction-fetch flow.

ReactXYFlow
Data & SQL
intermediate

SQL Query Visualizer

Write SQL and watch how JOIN, GROUP BY, and WHERE run on sample data β€” all in-browser.

ReactSQL.js
Data & SQL
intermediate

ER Diagram Builder

Drag entities, draw relationships β€” auto-generate SQL DDL for a fintech schema.

ReactXYFlow
Payments & Banking
beginner

eKYC via VNeID

Mai opens MoMo and authenticates via VNeID β€” 5 selected fields shared, not everything.

ReactFramer MotionXYFlow
Payments & Banking
beginner

Link Bank (Tokenization)

Mai links MoMo ↔ Vietcombank. Understand why no OTP next time β€” EMVCo token issued.

ReactFramer MotionXYFlow
Payments & Banking
intermediate

Top-up Wallet β€” Double-Entry

Mai tops up 100k from VCB to MoMo. Explore DOUBLE-ENTRY BOOKKEEPING (Pacioli 1494).

ReactFramer Motion
Payments & Banking
beginner

P2P Transfer via NAPAS 247

Mai sends 50k coffee money to Nam. Compare in-network (3 nodes) vs NAPAS 247 (5 nodes).

ReactXYFlowFramer Motion
Payments & Banking
beginner

VietQR Payment

Mai pays 45k at Highlands Coffee via VietQR. 5-node routing: VCB β†’ NAPAS β†’ TCB β†’ Highlands.

ReactXYFlowFramer Motion
Payments & Banking
intermediate

VietQRGlobal β€” Travel CN

Mai pays Β₯30 in Beijing via VietQRGlobal β€” 7-node cross-border.

ReactXYFlowFramer Motion
Payments & Banking
beginner

Dynamic vs Static QR

Phở BΓ  Hoa static QR vs Highlands dynamic QR β€” compare payloads.

ReactFramer Motion
Payments & Banking
intermediate

Add Card to Apple Pay

Add VCB card to Wallet β€” DAN in Secure Enclave.

ReactXYFlowFramer Motion
Payments & Banking
intermediate

NFC Tap to Pay

Mai taps iPhone at Circle K β€” NFC + FaceID + unique cryptogram.

ReactXYFlowFramer Motion
Payments & Banking
intermediate

EMV Chip vs Magnetic Card

POS at Shopee Mall + VCB chip card β€” fraud rate 0.6% β†’ 0.15%.

ReactFramer Motion
Payments & Banking
intermediate

3-D Secure Online Shopee

Mai buys iPhone 12M on Shopee with VCB card β€” 3DS popup + SMS OTP.

ReactXYFlowFramer Motion
Payments & Banking
beginner

NAPAS 247 Mobile Banking

Mai sends 50k via VCB app to TCB β€” NAPAS 247 24/7, <5s.

ReactXYFlowFramer Motion
Payments & Banking
advanced

Biometric per QĐ 2345

Mai transfers 15M β€” Face ID match VNeID required.

ReactFramer Motion
Payments & Banking
beginner

QĐ 2345 Quiz

3-question quiz on QĐ 2345 biometric thresholds.

ReactFramer Motion
Payments & Banking
intermediate

Real vs Phishing SMS

Identify real SMS vs phishing vs social engineering.

ReactFramer Motion
Payments & Banking
intermediate

QR Sticker Phishing

QR has suspicious name. Pay or cancel? 2 outcome branches.

ReactFramer Motion
Payments & Banking
intermediate

Lost Phone 5-step

Mai lost iPhone. Rank 5 emergency actions by priority.

ReactFramer Motion
Business Models
beginner

FinTech Business Model Canvas

BMC 9 blocks for cases like Momo / Stripe / Revolut β€” compare side by side.

React