When will you use this?

Use this lesson to build something you can show in interviews and on your resume.

• Portfolio projects prove you can finish — recruiters click your demo link.
• Build one dashboard or shop end-to-end; that beats ten half-finished tutorials.

Real-world: account summary home

Net banking home shows balance cards, recent transfers, and quick pay widget — all from protected APIs.

Production-style code

function BankingHome() {
  const { data: account } = useQuery({ queryKey: ['account'], queryFn: fetchAccount });
  const { data: txns } = useQuery({ queryKey: ['txns'], queryFn: fetchRecentTxns });
  return (
    <>
      <BalanceCard balance={account?.balance} accountNo={account?.maskedNo} />
      <QuickPayForm onSubmit={submitTransfer} />
      <TransactionList transactions={txns} />
    </>
  );
}

What happens in production: Demonstrates fintech UI patterns — masking, confirmations, and error states matter as much as layout.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

function formatINR(amount) {
  return new Intl.NumberFormat('en-IN', {
    style: 'currency', currency: 'INR'
  }).format(amount);
}

<td>{formatINR(tx.amount)}</td>
<td>{maskAccount(tx.accountLast4)}</td>

Line-by-line walkthrough

How it works (big picture)

• Intl.NumberFormat handles locale currency.
• Never show full account numbers in lists.
• Confirm before transfer.

Do this on your computer

1. Build transaction table with formatted amounts.
2. Add balance card component.
3. Add confirmation modal for transfers.
4. Read the real-world section and name which part of the app uses this topic.
5. Run the example locally and confirm the same behavior in the browser.
6. Change one value in the example (text, initial state, or URL) and predict what will happen before you save.

Experiments — try changing this

• Change text or labels in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error message, then fix it.

Remember

Format money with Intl. Mask sensitive fields. Confirm critical actions.

Common questions