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.

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

Prerequisites

You must have:

• 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).

For that, 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 npx create-aptos-dapp@latest to create the project.

npx create-aptos-dapp@latest

3. Follow the instructions to create the project.

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

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

Follow the Next Steps instructions.

Now let’s create a smart contract.