OpenViSTAI · Agents · Blockchain · Crypto
Submit a project
Menu
Developer Tools

Your First WEB3 Dapp

Your First WEB3 Dapp is a step-by-step tutorial for building a TypeScript and React web app that reads Ethereum blockchain data through GraphQL, using CryptoPunks as its example dataset.

Explore the practical guide ↓

Independent OpenViST project profile, based on linked sources.

Your First WEB3 Dapp — OpenViST project profile in Developer Tools.
OpenViST project illustration. See the linked sources for product details.
Understand the project

Practical overview

When it fits

Use it as a learning project when you want to understand read-only Ethereum data access in a web app, rather than as a hosted application or transaction tool.

Who it is for

  • Beginners learning to build a web application that reads Ethereum data.
  • Developers exploring the use of React, TypeScript, GraphQL and The Graph together.

Documented uses

  • Build a browser-based viewer for Ethereum blockchain data.
  • Explore CryptoPunks data through a GraphQL-powered React interface.
  • Learn a practical pattern for accessing indexed Ethereum data from a TypeScript web client.
Before you choose

Requirements & limits

The tutorial is publicly visible on GitHub. No software license is specified in the supplied repository metadata.

  • The project is tutorial material; it does not provide a standalone hosted dApp or API.
  • The documented stack includes TypeScript, React, The Graph and GraphQL, with Node.js and npm in the local development setup.
  • The README describes read operations against Ethereum mainnet and says ETH and browser plugins are not required.
  • The clone command in the README names web3rb/your-first-web3-dapp, while the profile repository is qimachine/your-first-web3-dapp; verify the intended source before cloning.
  • Public repository visibility does not by itself establish permission to reuse the code.

Check current requirements in the official documentation. Source-based guidance does not mean OpenViST has run or independently tested this project.

Source-based practical guide

Prepare the tutorial project locally

Set up the documented development environment and obtain the tutorial code.

Before you start

  • A development computer with internet access
  • Visual Studio Code, Git, curl, NVM, Node.js and npm

Steps

  1. Create a project directory and open it in Visual Studio Code.

  2. Install curl, Git and NVM using the installation resources referenced in the README.

  3. Use NVM to install a stable Node.js version, then clone the tutorial repository with Git and change into its directory.

  4. Open the project in Visual Studio Code and use nvm use to check the Node version specified by the project’s .nvmrc file.

Expected outcome

The tutorial source is available in a local project directory, with the documented Node version selected for the project.

Guide limitations

  • These steps cover environment and source setup, not running or deploying the application.
  • The README’s clone command refers to a different repository path (web3rb/your-first-web3-dapp) than the profile’s source repository (qimachine/your-first-web3-dapp); check the repository instructions before cloning.
  • The repository metadata does not specify a software license.
Documentation 1 ↗
Evidence and transparency

Sources & review

Official repository ↗
Source record details
Source availability
Active
Sources checked
17 October 2026
Original website title
qimachine/your-first-web3-dapp · Official homepage title · retained in its source language
How we review sourcesSuggest a correction