Introduction: What You Will Build

This guide targets the Tiramisu testnet. Check Networks for current testnets and faucets.

This guide shows you how to build a browser-based drawing application. The application uses MetaMask for authentication and Arkiv as a Web3 data layer.

The Goal

This tutorial shows you how to use Arkiv with a browser wallet like MetaMask. The fullstack dashboard tutorial uses a private key on the server. This project is different: a user interacts with Arkiv directly from the browser, and MetaMask signs the transactions.

This application is a single page. It has three main parts:

1. MetaMask wallet integration. The app connects to the user’s browser wallet. It switches to the Arkiv Tiramisu testnet automatically, or adds the testnet if needed. MetaMask signs the on-chain transactions.
2. A p5.js drawing canvas. Users draw freehand sketches on the canvas with the mouse.
3. A blockchain-backed gallery. The app saves each sketch as an entity on Arkiv. It queries Arkiv for the sketches of the connected user and shows them in a gallery.

The Final Product

By the end of this tutorial, you will have an app with these features:

• The app connects to MetaMask and switches to the Tiramisu testnet.
• Users draw on a canvas and save their artwork to Arkiv.
• The app shows a gallery of the sketches a user saved before.

You can browse the full source code on GitHub.

This guide gives you a hands-on learning experience. Each step explains the code and shows you how the pieces connect. Start with the setup step.