Simple To-Do Fullstack

This example illustrates how to create a simple fullstack to-do checklist application.

If you're looking to use http canisters, check out the version on this branch!

Introduction

The application is built from the following Motoko source code files:

• Utils.mo, which contains the core functions for adding, completing, and removing to-do checklist items;

• Types.mo, which contains the type definition of a to-do checklist item; and

• Main.mo, which contains the actor definition and methods exposed by this canister.

Prerequisites

Verify the following before running this demo:

• You have downloaded and installed the DFINITY Canister SDK.

• You have stopped any Internet Computer or other network process that would create a port conflict on 8000.

Demo

1. Start a local internet computer.

   dfx start

2. Open a new terminal window.

3. Reserve an identifier for your canisters.

   dfx canister create simple_to_do
   dfx canister create simple_to_do_assets

4. Build your canister.

   dfx build

5. Deploy your canister.

   dfx deploy

6. Create a to-do checklist by invoking the addTodo method.

   dfx canister call simple_to_do addTodo '("Create a project")'
   dfx canister call simple_to_do addTodo '("Build the project")'
   dfx canister call simple_to_do addTodo '("Deploy the project")'

7. Display the to-do checklist by invoking the showTodos method.

   dfx canister call simple_to_do showTodos

8. Verify the return value matches what you would expect.

   ("
   ___TO-DOs___
   (1) Create a project
   (2) Build the project
   (3) Deploy the project")

9. Complete a to-do checklist item by invoking the completeTodo method.

   dfx canister call simple_to_do completeTodo '(1)'

10. Display the to-do checklist by invoking the showTodos method.

    dfx canister call simple_to_do showTodos

11. Verify the return value matches what you would expect.

    ("
    ___TO-DOs___
    (1) Create a project ✔
    (2) Build the project
    (3) Deploy the project")

Additionally, you can run the UI by visiting http://localhost:8000?canisterId=[your_canister_id]

You can find the canister id by running the command

dfx canister id simple_to_do_assets