金融科技案例库

金融科技案例库

在浏览器中运行的互动演示合集 — 区块链、DeFi、交易、风险、支付、数据、商业模式。

38 个案例

交易与投资
beginner

复利计算器

模拟复利的力量及其对长期财富的影响。

ReactTypeScriptRecharts
交易与投资
beginner

货币时间价值

可视化 PV、FV 和 NPV — 为什么今天的一元胜过明天的一元。

ReactD3
交易与投资
advanced

投资组合优化器

现代投资组合理论 — 绘制有效边界并选择最优权重。

ReactD3Math
交易与投资
advanced

交易策略回测

在历史数据上回测 SMA / RSI 策略 — Sharpe、回撤、胜率。

ReactRecharts
交易与投资
intermediate

互动金融图表

K 线 + 成交量 + 指标 — 技术分析的练习场。

ReactD3
区块链与 DeFi
beginner

区块链可视化

每个区块是一块砖 — 实时观察哈希、nonce、挖矿和不可篡改性。

ReactD3Crypto
区块链与 DeFi
intermediate

共识机制模拟器

PoW、PoS、PBFT — 模拟网络并观察分叉、最终性和 51% 攻击。

ReactSimulation
区块链与 DeFi
intermediate

加密与数字签名

哈希、ECDSA、Merkle 树 — 在浏览器中实时运行。

ReactWebCrypto
区块链与 DeFi
advanced

DeFi AMM 池模拟器

Uniswap 风格 x·y=k 池 — 交换、添加流动性,实时观察无常损失与滑点。

ReactTypeScript
区块链与 DeFi
advanced

智能合约状态机

将托管 / 拍卖合约建模为状态机 — 探索安全的状态转换。

ReactSolidity
区块链与 DeFi
advanced

代币经济模拟器

解锁、通胀、销毁、质押 — 观察供应量与价格如何随结构演变。

ReactRecharts
风险与信用
intermediate

信用风险评分

输入(收入、负债、历史)→ PD / LGD / EAD → 信用评分 — 可视化信用评分。

ReactD3
风险与信用
intermediate

混淆矩阵(欺诈检测)

欺诈检测的精度 / 召回率 / F1 — 拖动阈值,观察权衡。

ReactML
风险与信用
advanced

信用决策树

在贷款数据集上训练决策树 — 观察每个分支按何特征划分及基尼不纯度。

ReactD3ML
金融 AI
advanced

定价神经网络

预测期权价格的 3 层 MLP — 逐层观察前向与反向传播。

ReactD3
金融 AI
intermediate

市场情绪分析

新闻 + 推特流 → 情绪分数 → 与股价并列绘制。

ReactNLP
支付与银行
intermediate

Shopee 5 种支付方式对比

Mai 在 Shopee 选择 5 种支付方式之一:VietQR、MoMo、Visa、COD、BNPL。

ReactXYFlowFramer Motion
支付与银行
intermediate

银行 API 与开放银行

OAuth + PSD2:银行 → 金融科技应用的同意、令牌、交易获取流程。

ReactXYFlow
数据与 SQL
intermediate

SQL 查询可视化

编写 SQL,观察 JOIN、GROUP BY、WHERE 如何在样本数据上执行 — 全部在浏览器内。

ReactSQL.js
数据与 SQL
intermediate

ER 图建模器

拖放实体、绘制关系 — 自动生成 fintech 模式的 SQL DDL。

ReactXYFlow
支付与银行
beginner

通过 VNeID 进行 eKYC

Mai 通过 VNeID 在 MoMo 注册 — 仅共享 5 个有意义的字段,而非全部。

ReactFramer MotionXYFlow
支付与银行
beginner

银行关联(令牌化)

Mai 关联 MoMo ↔ Vietcombank。理解为何下次无需 OTP — 已颁发 EMVCo 令牌。

ReactFramer MotionXYFlow
支付与银行
intermediate

钱包充值 — 复式记账

Mai 从 VCB 向 MoMo 充值 10 万。探索复式记账(Pacioli 1494 年发明)。

ReactFramer Motion
支付与银行
beginner

通过 NAPAS 247 进行 P2P 转账

Mai 给 Nam 转 5 万咖啡钱。比较内部 (3 节点) 与 NAPAS 247 (5 节点)。

ReactXYFlowFramer Motion
支付与银行
beginner

VietQR 扫码支付

Mai 通过 VietQR 在 Highlands Coffee 支付 45 千。5 节点路由:VCB → NAPAS → TCB。

ReactXYFlowFramer Motion
支付与银行
intermediate

VietQRGlobal — 中国旅游

Mai 在北京支付 30 元 — 7 节点跨境路由。

ReactXYFlowFramer Motion
支付与银行
beginner

动态 vs 静态 QR

静态 vs 动态二维码 — 对比 payload。

ReactFramer Motion
支付与银行
intermediate

添加 Apple Pay 卡

将 VCB 卡添加到 Wallet。

ReactXYFlowFramer Motion
支付与银行
intermediate

NFC 拍卡支付

Mai 在便利店刷 iPhone — NFC + FaceID。

ReactXYFlowFramer Motion
支付与银行
intermediate

EMV 芯片 vs 磁条卡

Shopee Mall POS — 芯片卡降低 75% 欺诈。

ReactFramer Motion
支付与银行
intermediate

在线 3-D Secure

Mai 用 VCB 卡在 Shopee 买 iPhone — 3DS + SMS OTP。

ReactXYFlowFramer Motion
支付与银行
beginner

NAPAS 247 手机银行

Mai 通过 VCB 应用转 5 万到 TCB。

ReactXYFlowFramer Motion
支付与银行
advanced

生物识别 QĐ 2345

Mai 转 1500 万 — 触发人脸识别比对 VNeID。

ReactFramer Motion
支付与银行
beginner

QĐ 2345 测验

关于 QĐ 2345 生物识别 4 个阈值的 3 道测验题。

ReactFramer Motion
支付与银行
intermediate

识别真假短信

识别真短信 vs 钓鱼 vs 社工诈骗。

ReactFramer Motion
支付与银行
intermediate

QR 贴纸钓鱼

QR 显示可疑名字。付款或取消?

ReactFramer Motion
支付与银行
intermediate

丢失手机 5 步

Mai 丢手机。按优先级排 5 个应急操作。

ReactFramer Motion
商业模式
beginner

FinTech 商业模式画布

Momo / Stripe / Revolut 等案例的 9 个 BMC 模块 — 并排比较。

React