> ## Documentation Index
> Fetch the complete documentation index at: https://web3docs.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> What you'll build in Workshop Amikom — a neo-brutalism dApp on Ethereum (Sepolia)

# Workshop Amikom — EVM

In this workshop you build a full-stack **"Tabungan Crypto"** (crypto savings) dApp
on Ethereum, end-to-end: from a Vite starter to an on-chain integration on the
**Sepolia** testnet.

## What you'll build

A single-page dApp where a connected wallet can:

* See its **IDRT** token balance and its **Vault** savings balance
* **Mint** test tokens (open faucet)
* **Approve** the Vault, then **Deposit** tokens into savings
* **Withdraw** tokens back to the wallet

All styled with a bold **neo-brutalism** theme (thick black borders, hard offset
shadows, sharp corners, vibrant colors), with live transaction status.

## The core Web3 flow

```
            approve(vault, 100)              deposit(100)
 ┌──────────┐ ───────────────────►  ┌──────────┐ ───────────►  ┌──────────┐
 │  WALLET  │  "Vault, you may       │  IDRT    │  Vault pulls  │  VAULT   │
 │ (you)    │   pull 100 of my       │ (ERC20)  │  via          │ savings: │
 │          │ ◄───────────────────   │          │  transferFrom │   100    │
 └──────────┘        withdraw(100)   └──────────┘ ◄───────────  └──────────┘
                Vault sends tokens back
```

The **approve → deposit** pattern is the most fundamental idea in Web3: a contract
may not pull your tokens without permission. You grant it first (`approve`), then
the contract pulls them (`transferFrom`).

## Tech stack

| Layer        | Tools                                                    |
| ------------ | -------------------------------------------------------- |
| App          | Vite, React 19, TypeScript                               |
| Styling      | Tailwind CSS v4, shadcn-style components (neo-brutalism) |
| Wallet       | RainbowKit                                               |
| Chain access | wagmi + viem                                             |
| Data         | @tanstack/react-query                                    |
| Contracts    | Solidity + Foundry (forge, cast, anvil)                  |
| Network      | Ethereum **Sepolia** testnet                             |

## Repositories

<CardGroup cols={2}>
  <Card title="Frontend starter" icon="react" href="https://github.com/DevWeb3Jogja/workshop-amikom-fe">
    Vite + React + Tailwind v4 + shadcn, neo-brutalism themed (branch `starter`).
  </Card>

  <Card title="Smart contracts" icon="file-contract" href="https://github.com/DevWeb3Jogja/workshop-amikom">
    Foundry project: `RupiahToken` (ERC20) + `Vault`.
  </Card>
</CardGroup>

## Prerequisites

* Basic JavaScript/TypeScript and React
* **Node.js 20+**
* A browser wallet (**MetaMask**) with some **Sepolia ETH** (grab from a faucet)
* For the contracts section: **Foundry** (`forge`, `cast`)

<Info>
  Everything here runs on a **testnet** — no real funds. Use a throwaway test
  wallet, never one holding mainnet assets.
</Info>

## Workshop steps

<Steps>
  <Step title="The starter">Set up the Vite + shadcn neo-brutalism project.</Step>
  <Step title="Wallet setup">Add RainbowKit + wagmi + viem and a Connect button.</Step>
  <Step title="Smart contracts">Deploy `RupiahToken` + `Vault` to Sepolia.</Step>
  <Step title="Frontend integration">Wire balances, approve, deposit, withdraw, mint.</Step>
</Steps>

<Card title="Start: The Starter" icon="arrow-right" href="/evm/workshop-amikom/02-starter" horizontal>
  Clone and run the neo-brutalism Vite starter.
</Card>