Skip to content
Aptos Documentation

Build an End-to-End Dapp on Aptos

A common way to learn a new framework or programming language is to build a simple todo list. In this tutorial, we will learn how to build an end-to-end todo list dapp, starting from the smart contract side through the front-end side and finally use of a wallet to interact with the two.

See the completed code in the source-code.

Prerequisites

Section titled “Prerequisites”

You must have:

Although we will explain some React decisions, we are not going to deep dive into how React works; so we assume you have some previous experience with React.

Setup

Section titled “Setup”

In this section, we will setup three things:

  1. API key using Geomi
  2. Project using create-aptos-dapp which will hold our project files, both client-side code (React based) and the Move code (our smart contract)
  3. Move On Aptos VSCode extension

Setup API key

Section titled “Setup API key”

First let’s create an API key using Geomi. The Aptos TypeScript SDK uses Geomi API by default, and without an API key, you will get very low rate limits.

  1. Visit Geomi: Go to geomi.dev in your web browser.

  2. Sign up or Log in: Create a new account or log in to your existing Geomi account.

  3. Create a new project: Click on “Create New Project” to create a new project and name it my-first-dapp. Geomi API key creation 1 Geomi API key creation 2

  4. Navigate to API Resource tab: Navigate to the API Resource tab in your dashboard. Geomi API key creation 3

  5. Create New API Resource: Name it my-first-dapp-api and set the network to Devnet. Geomi API key creation 4

  6. Configure API Key: Since we will be using the API key in our web app, toggle on Client usage. Here you can configure allowed URLs and extension IDs that can use the API key. Set Allowed URLs to http://localhost, which is the development server we will be using. Also set Per IP rate limit to 100,000. Geomi API key creation 5

  7. Copy and Save: Now you have your API key. Copy the key as we will be using it in the next step. Geomi API key creation 6

Setup Project with create-aptos-dapp

Section titled “Setup Project with create-aptos-dapp”

Next, we will be using create-aptos-dapp to create the project.

  1. Open a terminal and navigate to the desired directory for the project (for example, the Desktop directory).

  2. Run the create-aptos-dapp command to create the project:

    Terminal window
    npx create-aptos-dapp@latest

  3. Follow the instructions to create the project with these settings:

    • Choose a name for the project, for example my-first-dapp
    • Choose the Full-stack project option
    • Choose the Boilerplate Template option
    • For simplicity, choose not to use Surf
    • Choose the Vite app framework option
    • Choose the Devnet network option
    • Say Yes for using API key and paste the Geomi API key you copied earlier
    • Say No for customizing default selections

  4. The tool will create the project in a directory with the same name as the project and install the required dependencies.

  5. Follow the Next Steps instructions.

Setup Move On Aptos VSCode extension

Section titled “Setup Move On Aptos VSCode extension”

Finally, let’s install the Move On Aptos VSCode extension.

  1. Open VSCode (or Cursor) and navigate to the Extensions tab.
  2. Search for Move On Aptos published by aptoslabs and install the extension.

Chapters

Section titled “Chapters”

After meeting the prerequisites and getting set up as described below, you will follow this tutorial in this order:

  1. Create a smart contract
  2. Set up a frontend
  3. Fetch Data from Chain
  4. Submit data to chain
  5. Handle Tasks

Now let’s create the Todo List smart contract.