This is a submission for the Midnight Network "Privacy First" Challenge - Protect That Data prompt
What I Built
I built ClearPath, a modern dashboard for tracking high-value goods like pharmaceuticals and luxury items.
The biggest problem in supply chains today is trust. Businesses need to prove where their products have been, but they can't afford to leak sensitive business information (like their list of suppliers and customers) on a public database. ClearPath solves this by using privacy technology to create a verifiable history for any product, while keeping the details of who owns it completely private. It provides proof without the risk.
Demo
You can try the live demo and see all the code in the public GitHub repository. The entire application runs right in your browser!
Here are a few screenshots of ClearPath in action:
How I Used Midnight's Technology
To create a great experience for other developers, ClearPath simulates the Midnight Network's core features. This allows anyone to run the project in their browser instantly, without any complicated setup. This is a key part of my goal to "Enhance the Ecosystem"—by providing a tool that lets developers build and test a beautiful frontend for a privacy DApp before needing to write a single smart contract.
I created two main JavaScript objects to mimic a real backend:
MockChainDB: This acts like our private blockchain database. It stores all the product information and transfer histories right in the browser, pretending to be a secure, on-chain ledger.
ZKCircuits: This object pretends to be the Zero-Knowledge Proof system. It has functions like generateTransferProof and verifyTransferProof, which work just like you would expect from the real Midnight SDK.
This approach lets developers get a feel for building on Midnight and focus on creating a great user experience first.
Data Protection as a Core Feature
In ClearPath, privacy isn't just an add-on; it's the foundation of everything. Every single product transfer is protected by a (simulated) Zero-Knowledge Proof.
Think of it like a secret handshake. To transfer a product, you don't have to show your ID to the whole world. You just have to prove you know the secret handshake for that specific item. The system verifies your handshake is correct and approves the transfer—all without ever revealing who you are.
This means a company can provide a 100% verifiable audit trail for its products, but its list of suppliers, customers, and business partners remains a complete secret.
Set Up Instructions / Tutorial
ClearPath: A Developer's Guide to Building Private Supply Chain DApps on Midnight
Welcome to the deep-dive tutorial for ClearPath! This guide is for developers looking to build sophisticated, privacy-preserving decentralized applications. We'll walk through the entire ClearPath project—from the core concepts to a feature-rich, working application.
This project was built for the DEV.to Midnight Network "Privacy First" Challenge. More than just a DApp, ClearPath is designed as a developer accelerator. It provides a fully simulated backend and a complete UI, allowing developers to rapidly prototype and build the frontend of a privacy-enabled application before ever needing to write a single line of smart contract code. This approach dramatically improves the developer experience and speeds up the journey from idea to implementation on the Midnight Network.
- The Vision: Why Private Supply Chains Matter In the world of high-value goods—like pharmaceuticals, luxury items, and sensitive electronics—trust and transparency are everything. Businesses need to prove the origin and journey of their products, but they face a critical dilemma: public blockchains, while transparent, expose sensitive business data like supplier lists, customer details, and transaction volumes. This is a deal-breaker for almost any real-world enterprise.
The Problem: How can a business prove the authenticity of a product's history without revealing its confidential business operations?
The Solution: ClearPath.
ClearPath leverages the power of the Midnight Network's privacy-first blockchain to create a verifiable and private supply chain. It allows companies to track and transfer assets with cryptographic certainty, while Zero-Knowledge Proofs (ZKPs) ensure their operational data remains completely confidential.
- Core Concepts for the Midnight Developer Before we dive into the code, let's understand the foundational technologies.
What are Zero-Knowledge Proofs (ZKPs)?
ZKPs are the core magic behind Midnight. In simple terms:
A Zero-Knowledge Proof lets you prove that you know a secret, without revealing the secret itself.
Analogy: Imagine your friend is colorblind and has two identical-looking balls, one red and one green. You want to prove to them that the balls are different colors without revealing which one is red and which is green. You could ask your friend to hide the balls behind their back, show you one, then hide it again and either switch them or not. Every time they show you a ball, you can correctly state whether they switched them or not. After enough rounds, they would be convinced you can tell the difference (you know the secret color), but you never once had to say "this ball is red."
In ClearPath, we use ZKPs to prove that a user has the right to transfer a product without revealing the user's identity on the public chain.
The Architecture: Simulating Midnight for Rapid Development
To improve the developer experience, ClearPath uses a simulated backend. This allows any frontend developer to build and test the full application logic locally in a browser, without needing to compile circuits or deploy contracts.
Here's the architecture:
Frontend (React): A modern, responsive user interface built with React and Tailwind CSS. This is what the end-user interacts with.
Simulation Layer (JavaScript Objects):
MockChainDB: A JavaScript Map object that acts as our "blockchain." It stores all product data and transfer histories in the browser's memory.
ZKCircuits: A JavaScript object that mimics the functions of a real ZK circuit. It has methods to generateTransferProof and verifyTransferProof, returning realistic-looking data structures.
AI Integration (Gemini): A layer that connects to a powerful language model to provide intelligent features, demonstrating how modern AI can enhance DApps.
This setup means you can focus on building a fantastic user experience first, and then swap out the simulation layer for real MidnightJS calls when you're ready to deploy.
- Getting Started: Running ClearPath Locally The entire project is self-contained in a single index.html file.
Prerequisites: A modern web browser (like Chrome, Firefox, or Edge).
Running the App:
Download the index.html file.
Open the file directly in your web browser.
That's it! The application is now running locally. You can interact with all its features, add users, transfer products, and test the AI integrations.
- A Deep Dive into the Code Let's break down the key sections of the source code.
The Simulation Layer: Your Local Midnight Testnet
This is the core of our developer-friendly approach. Instead of complex setup, we have simple JavaScript objects.
MockChainDB: This object is initialized with a set of sample products. It uses Map objects to efficiently store and retrieve product data and their associated histories. This simulates a persistent ledger.
const MockChainDB = {
products: new Map(),
history: new Map(),
init: () => { /* ... loads initial data ... */ }
};
MockChainDB.init();
ZKCircuits: This object simulates the creation and verification of proofs. The functions return data that structurally resembles what you would get from a real ZK circuit, making it easy to replace later.
const ZKCircuits = {
generateTransferProof: (product, fromOwner, toOwner) => {
// In a real app, this would be a complex cryptographic operation.
return {
proof: `zk_proof_${Math.random().toString(36).substr(2, 9)}`,
publicInputs: { productId: product.id, newOwner: toOwner }
};
},
verifyTransferProof: (proof) => {
// Simulates checking the validity of the proof string.
return proof.startsWith('zk_proof_');
}
};
The Application Logic: Handling a Private Transfer
The most critical function is handleConfirmTransfer. This is where we see the full flow of a private transaction.
const handleConfirmTransfer = (product, toOwner) => {
// 1. Generate the Proof (Simulated)
// We prove we have the right to transfer, without revealing our identity publicly.
const { proof } = ZKCircuits.generateTransferProof(product, currentUser, toOwner);
// 2. Verify the Proof (Simulated)
// The "network" verifies the proof is valid before proceeding.
const isProofValid = ZKCircuits.verifyTransferProof(proof);
if (isProofValid) {
// 3. Update the State (Simulated)
// If valid, the product's owner is updated in our mock database.
const updatedProduct = { ...product, owner: toOwner, status: 'In Transit' };
MockChainDB.products.set(product.id, updatedProduct);
// 4. Record the History
// A new entry is added to the product's private history log.
const newHistoryEntry = { /* ... owner, timestamp, proof ... */ };
const currentHistory = MockChainDB.history.get(product.id);
MockChainDB.history.set(product.id, [newHistoryEntry, ...currentHistory]);
// 5. Update the UI
setProducts(Array.from(MockChainDB.products.values()));
}
};
This function provides a perfect template for developers. The logic is identical to a real DApp; only the function calls in steps 1 and 2 would change.
Enhancing the DApp with AI
We use a simple, powerful function callGeminiAPI to interact with the AI model.
- AI-Generated Product Descriptions: When a user adds a new product, we provide a button that generates a professional description. This improves user experience by saving time and ensuring high-quality data.
const handleGenerateDescription = async () => {
setIsGenerating(true);
const prompt = `Generate a brief, professional product description for a product named '${product.name}'...`;
const desc = await callGeminiAPI(prompt);
setProduct(prev => ({ ...prev, description: desc }));
setIsGenerating(false);
};
- AI Audit Summaries: This is a more advanced feature. We compile the entire transfer history of a product, send it to the AI, and ask it to perform an audit.
const handleGenerateSummary = async () => {
setIsGenerating(true);
const formattedHistory = history.map(/* ... format data ... */).join('\n');
const prompt = `Act as a supply chain auditor. Based on the following transfer log...provide a concise summary... Here is the log:\n${formattedHistory}`;
const result = await callGeminiAPI(prompt);
setSummary(result);
setIsGenerating(false);
};
Top comments (0)