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 my_first_dapp.

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 React app
3. Add Wallet support
4. Fetch Data from Chain
5. Submit data to chain
6. Handle Tasks

Prerequisites

You must have:

• Aptos CLI
• Aptos TypeScript SDK
• Aptos Wallet Adapter
• Create React App
• node and npm

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

In this section, we will create a my-first-dapp directory to hold our project files, both client-side code (React based)and the Move code (our smart contract).

1. Open a terminal and navigate to the desired directory for the project (for example, the Desktop directory).
2. Create a new directory called my-first-dapp, for example:

mkdir my-first-dapp

3. Navigate into that directory:

cd my-first-dapp

Now let’s create a smart contract.