Building a To-Do List Application

Build a Basic, React, or Angular to-do list web application using Catalyst Advanced I/O Function and Catalyst Data Store that enables you to note down tasks and delete them after they are done.

Create a Table in the Data Store

Next, let's create a table in the Data Store in the ToDoList project. As discussed earlier, this table is used to store to-do list items created by the user.

To create a table:

  1. Navigate to Data Store under Develop.
    catalyst_todo_datastore
  2. Click Create a new Table.
  3. Enter the table's name as "TodoItems", then clickCreate.
    catalyst_todo_table_name
Note: Ensure that you enter the name exactly as instructed, because the application's code contains the same name.

The table is now created and displayed in the Data Store page.

Now, let us create a column in the table to store the to-do list items.

  1. Click New Column in the Schema View section of the table.
    catalyst_todo_datastore_view
  2. Enter the column's name as "Notes". Select the data type as Text and click the Is Mandatory toggle switch to enable it.
    catalyst_todo_column_name
    You can learn about the various data types supported by Catalyst and the other properties of a column from the Data Store help page.
    Note: Ensure that you enter the name exactly as instructed, because the application's code contains the same name.
  3. Click Create.

The column is now created and listed in the Schema View section.

catalyst_todo_table_view

You have now configured all the necessary components from the console. You will now be working on coding the application from your local system.