# Module 3 – Frontend · Build with zero-knowledge proofs on Chromia · Learn Chromia

> This module walks you through the Next.js client that serves as the user interface for the zero-knowledge proof token system.

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

Build with zero-knowledge proofs on ChromiaLesson 16 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/)

16 / 19Module 3 – FrontendAdvanced

# Module 3 – Frontend

This module walks you through the Next.js client that serves as the user interface for the zero-knowledge proof token system.

You will see how the frontend generates proofs in the browser using Circom circuits compiled to WebAssembly, how it protects keys with password-based encryption, and how it processes shield, transfer, and unshield operations in real time.

The lessons start with preparing your development environment, then move on to the cryptographic design that lets users make privacy-preserving transactions from a standard web interface.

## In this lesson

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

[Begin lesson →](https://chromia.com/learn/zero-knowledge-proof/frontend/frontend-setup-run/)

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

[← Previous**Dapp queries overview**](https://chromia.com/learn/zero-knowledge-proof/dapp/dapp-queries/)[Next →**Frontend: setup and run**](https://chromia.com/learn/zero-knowledge-proof/frontend/frontend-setup-run/)