# Frontend: test · Build with zero-knowledge proofs on Chromia · Learn Chromia

> This step creates an FT4 account in the Rell dapp.

Source: https://chromia.com/learn/zero-knowledge-proof/frontend/frontend-test/

Build with zero-knowledge proofs on ChromiaLesson 19 of 19

1. [01Introduction to the course](https://chromia.com/learn/zero-knowledge-proof/introduction/)
2. [02Zero-knowledge proof](https://chromia.com/learn/zero-knowledge-proof/zero-knowledge-proof/)
3. [03Project setup](https://chromia.com/learn/zero-knowledge-proof/setup/)
4. [04Architecture overview](https://chromia.com/learn/zero-knowledge-proof/architecture-overview/)

Module 1: Writing Circom circuits

1. [05Overview](https://chromia.com/learn/zero-knowledge-proof/circom-circuits/)
2. [06Circom circuits: introduction](https://chromia.com/learn/zero-knowledge-proof/circom-circuits/circom-circuits-introduction/)
3. [07Circom files overview](https://chromia.com/learn/zero-knowledge-proof/circom-circuits/circom-circuits-project/)
4. [08Circom circuits: compile](https://chromia.com/learn/zero-knowledge-proof/circom-circuits/circom-circuits-compile/)

Module 2 – Dapp

1. [09Overview](https://chromia.com/learn/zero-knowledge-proof/dapp/)
2. [10Dapp: setup and run](https://chromia.com/learn/zero-knowledge-proof/dapp/dapp-setup-run/)
3. [11Dapp overview](https://chromia.com/learn/zero-knowledge-proof/dapp/dapp-overview/)
4. [12Dapp entities](https://chromia.com/learn/zero-knowledge-proof/dapp/dapp-entities/)
5. [13PLONK verification](https://chromia.com/learn/zero-knowledge-proof/dapp/dapp-verification/)
6. [14Dapp operations overview](https://chromia.com/learn/zero-knowledge-proof/dapp/dapp-operations/)
7. [15Dapp queries overview](https://chromia.com/learn/zero-knowledge-proof/dapp/dapp-queries/)

Module 3 – Frontend

1. [16Overview](https://chromia.com/learn/zero-knowledge-proof/frontend/)
2. [17Frontend: setup and run](https://chromia.com/learn/zero-knowledge-proof/frontend/frontend-setup-run/)
3. [18Frontend architecture](https://chromia.com/learn/zero-knowledge-proof/frontend/frontend-explore/)
4. [19Frontend: test](https://chromia.com/learn/zero-knowledge-proof/frontend/frontend-test/)

[Learn](https://chromia.com/learn/)[Build with zero-knowledge proofs on Chromia](https://chromia.com/learn/zero-knowledge-proof/)

19 / 19Module 3 – FrontendAdvanced

# Frontend: test

### Initialization steps

1. Connect MetaMask
2. Log in or register

This step creates an FT4 account in the Rell dapp.

![Login](/learn/media/LoginRegister-ea677eb4f3aec28cf3633854581a627d.png)

3. Unlock the wallet

Unlocking the wallet securely generates an encryption keypair. You use this keypair to encrypt private data and to decrypt private operation data stored in logs. Decrypting that log data is how the app derives each user's total private balance.

![Unlock Wallet Button](/learn/media/UnlockWalletButton-685db221d1ba9916b9a3ab14ab6c241e.png)

![Unlock Wallet](/learn/media/UnlockWallet-a0567ea9334371ebf3645542c694a1f1.png)

4. Register a private address

![Register](/learn/media/RegisterPrivateAddress-2b130e799fea701dcdb845d73442df15.png)

A registered private address lets a user receive private transfers. The address itself is not secret. The registry stores it as a fixed value so you can target a specific user more easily. This is a design choice, not something the demo technically requires.

## Demo scenarios

### Basic flow demo

1. Open the app (keys are generated automatically)
2. Claim 1000 tokens from the faucet
3. Shield 500 tokens (public → private)
4. Send 200 tokens to a random recipient
5. Unshield the remaining 300 tokens (private → public)

### Privacy demo

1. Show that the public balance is visible on the blockchain
2. Shield tokens so they become private
3. Show that private transfers do not expose amounts
4. Show how recipient addresses are hidden
5. Unshield tokens to make them public again when needed

### Multi-user demo

1. Generate several random recipients
2. Show how private transfers move between users
3. Show that only the recipient can decrypt their own notes
4. Show how nullifiers stop double-spending

Written for this site from Chromia’s public course. Code samples are the course’s own.

[← Previous**Frontend architecture**](https://chromia.com/learn/zero-knowledge-proof/frontend/frontend-explore/)[Course done →**Start building**](https://chromia.com/developers/#start)

On this page

* [Demo scenarios](#demo-scenarios)