Support

## Enhancing the Panagram Frontend: A Community Challenge Congratulations on reaching this stage! We've successfully set up the "Panagram" word-guessing game, which you can see running locally. While functional, the current user interface (UI) is admittedly quite basic. This presents a fantastic opportunity for you to flex your frontend development skills. We encourage you to take the existing Panagram application and "clean this up and make it look pretty." If you develop an improved UI, please share your work by tagging **@kierinightingal** on Twitter (note the spelling: "Nightingale" with an "e" wouldn't fit, so it's "gal"). For transparency, the current rudimentary frontend was built using **Tailwind CSS**. Interestingly, **ChatGPT** was utilized to assist with the initial styling; the existing code was provided to the AI with the prompt to "make this pretty for me" using Tailwind. We are genuinely excited to see the beautiful and intuitive frontend designs you can create for Panagram. ## Introducing the Final Project: Building an ETH Currency Mixer Now, let's turn our attention to the final, capstone project of this course: we're going to build a currency mixer, specifically an **ETH (Ethereum) mixer**. The core concept behind this mixer is to **break the flow of funds from the depositor to the withdrawer**. In essence, it aims to enhance transaction privacy on the Ethereum blockchain. For those familiar with the Web3 space, the functionality we'll be exploring is similar to "what Tornado Cash did." Our project, however, will be named "Mixer." It is crucial to understand and emphasize that this project is undertaken for **educational purposes only**. We will be exploring the technical mechanisms and cryptographic principles behind such systems. The development of this Mixer will likely involve concepts such as smart contracts (as suggested by tools like Foundry) and potentially zero-knowledge proofs (hinted at by Noir documentation), which are fundamental to building robust privacy-enhancing applications. In the next section, we will begin the process of constructing this ETH currency mixer.

Summary

A pivotal introduction to Panagram UI Challenge & ETH Mixer Project Reveal - Flex your frontend development skills by taking on a community challenge to redesign the Panagram game's user interface. This lesson also unveils the course's capstone project: building an ETH currency mixer for educational insights into blockchain transaction privacy.

Course Overview

About the course

What you'll learn

Noir syntax

Create a witness, a proof, and Solidity verifier contracts

Use the Poseidon commitment scheme

Create ZK circuits and build a full ZK protocol

ZK Merkle trees and hashing in Noir

Verify signatures without revealing the signer

Build the backend for a full-stack ZK application with noir.js and bb.js

How to create proofs and verify them in a front-end

Course Description

Who is this course for?

Software engineers
Solutions Architects
ZK Engineers
ZK Smart Contract Developers
Web3 Developers

Meet your instructors

Ciara Nightingale

Developer relations at Cyfrin

Last updated on June 12, 2025

Thanks for checking us out

Start learning for free

Start for free

Zero Knowledge (ZK) Developer Noir Programming And ZK Circuits

Section 1: Welcome To Noir

Duration: 6min

Section 2: ZK Ecrecover

Duration: 1h 11min

Section 3: ZK Panagram App

Duration: 2h 12min

1. Introduction

An inaugural walkthrough to Welcome to the World of Full-Stack Zero-Knowledge Applications - Experience the construction of "Panagram," your first full-stack ZK-proof application, from Noir circuit design and smart contracts to frontend JavaScript for ZK operations. This lesson details the complete development lifecycle, including client-side proof generation, on-chain verification, and understanding ZK in a practical context. Duration: 5min

2. Panagram Project Walkthrough

An architectural guide to Understanding Panagram: A Decentralized Word Game with Zero-Knowledge Proofs - Unpack Panagram's three-tier design, encompassing its React frontend, Noir ZK circuits, and Solidity smart contracts that manage game state and NFT rewards. This lesson details how ZKPs facilitate private word guessing through client-side proof generation and on-chain verification. Duration: 6min

3. Creating The Panagram Circuit

A practical primer on Initializing Your ZK-Panagram Project with Nargo - Kickstart your ZK-Panagram word game by setting up a Nargo project and crafting the core Noir circuit for private guess verification via hash comparison. This lesson also guides you through compiling the circuit and generating the vital verification key and Solidity verifier contract. Duration: 4min

4. Panagram Contract Setup

A practical walkthrough to Setting Up Your Foundry Project for ZK-SNARK Integration - Learn the essential steps for creating a Foundry project, organizing your files, and integrating the ZK-SNARK verifier contract. This lesson highlights the critical workflow required for updating the verifier when your ZK-SNARK circuit changes. Duration: 1min

5. Inheriting ERC 1155

A foundational blueprint for Defining the ZK Panagram Architecture in README.md - Establish the ZK Panagram's architectural design in its README, detailing game mechanics, ERC-1155 token rewards, and the Verifier contract's role. This lesson then guides the initial setup of `Panagram.sol`, including OpenZeppelin integration and Verifier contract linkage. Duration: 8min

6. Setting The Verifier Contract

A foundational examination of Understanding NFT Metadata with IPFS - Uncover the structure of NFT metadata using JSON, its storage on IPFS, and the mechanics of ERC1155 token URIs. This lesson further details implementing an admin-controlled, updatable verifier address in Solidity with `Ownable`. Duration: 5min

7. Writing The Panagram Contract Functions

A constructive walkthrough of Panagram: Crafting Core On-Chain Game Logic - Explore the Solidity implementation of the Panagram game's key `newRound` and `makeGuess` functions, which drive its on-chain puzzle mechanics. This lesson covers setting up game rounds, verifying ZK-proofs for guesses, and minting NFT rewards for winners and participants. Duration: 18min

8. Compiling The Panagram Contract

A foundational lesson to Compiling Your Panagram Smart Contract: A Step-by-Step Guide - Establish a solid base by compiling your `Panagram.sol` contract with `forge build`, rectifying initial errors before you begin testing. This guide details how to identify and correct common mistakes, such as typos in `Ownable` inheritance and constructor calls. Duration: 1min

9. Starting The Tests

A crucial blueprint for Setting Up Your Panagram Smart Contract Test Environment - Learn to construct the initial test environment for the `Panagram` smart contract using Foundry, from creating the test file and importing dependencies to defining the test contract structure. This lesson details the implementation of the `setUp` function, with a core focus on deploying contracts and preparing the game's answer hash for ZK-SNARK circuit compatibility. Duration: 8min

10. Running Scripts In Forge Tests

A practical walkthrough of Running JavaScript Scripts in Foundry Tests for Off-Chain Data Generation - Learn to integrate off-chain data generation into your Foundry smart contract tests by calling JavaScript/TypeScript scripts using the FFI cheatcode. This lesson covers setting up your script environment, managing dependencies like `noir-js` and `bb.js`, and the vital step of version matching with CLI tools. Duration: 4min

11. Setting Up The Generate Proof Script

A foundational guide to Building the `generateProof.ts` Script: Setup and Dependencies - Prepare to generate ZK proofs by setting up the `generateProof.ts` script, importing key libraries like Noir.js, ethers, and UltraHonkBackend. This lesson also clarifies JavaScript prerequisites, outlines the proof creation logic, and organizes your project structure. Duration: 3min

12. Get Proof Function

An essential exploration of Bridging Solidity and External Scripts with Foundry's FFI - Discover how Foundry's FFI bridges Solidity tests with external scripts, enabling complex off-chain tasks like ZK proof generation. This lesson guides you through enabling FFI, constructing commands, handling data with `vm.toString`, and stresses paramount security precautions. Duration: 5min

13. Writing The Proof Script

An essential walkthrough to Generating Zero-Knowledge Proofs with Noir and TypeScript for Foundry Tests - Discover how to construct a `generateProof.ts` script for generating ZK proofs from Noir circuits, ensuring reliable file access and correct ABI encoding. Learn to leverage this script with Foundry's FFI for streamlined testing of ZK-enabled smart contracts. Duration: 24min

14. Finishing The Tests

A meticulous guide to Finalizing the ZK Panagram: A Testing Deep Dive - Learn to complete the Foundry-powered Solidity test suite for your ZK-SNARK game, focusing on fair NFT minting and mitigating front-running with address-specific proofs. This lesson also details verifying core game logic like new round creation and ensuring the system correctly rejects proofs from incorrect guesses. Duration: 16min

15. Panagram Recap

A consolidating overview to Recapping Our Zero-Knowledge Proof Application Build - This lesson brings together all components of the "Panagram" ZKP game, detailing the Noir circuit, Solidity contracts (Verifier & game logic), and testing with Foundry FFI for off-chain proof generation. It reinforces key ZKP concepts and practical development steps for building a complete ZK application. Duration: 6min

16. Frontend Walkthrough

A constructive guide to Building the ZK-Panagram Frontend: Integrating ZK Proofs with React - Learn how to build the crucial link between ZK proofs and a React frontend, focusing on client-side proof generation with Noir.js and `bb.js`. This lesson covers preparing inputs, creating proofs in the browser, and sending them to smart contracts using Wagmi. Duration: 4min

17. Fixing Bugs

An illuminating dissection of Securing Proof Inputs: The Double Hashing Solution - Uncover a critical ZK-SNARK vulnerability that allows proof input manipulation and how a double-hashing strategy provides a robust fix. This lesson guides you through implementing this security enhancement across Noir circuits, Solidity, and supporting JavaScript. Duration: 13min

18. Summary

Section 4: ZK Mixer

Duration: 3h 19min