Building a To-Do List Application

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

Test the application

Before you deploy the application to the remote console, you can test the application on a local server and check if everything works fine using the Catalyst CLI. For detailed information on catalyst serve, refer to the Serve Resources help page.

To serve the Catalyst project locally, execute the following command from your project directory (CATALYST_PROJECT_HOME):

$ catalyst serve

The to-do list application will now be served at default port 3000. The local endpoint URLs of the components are displayed.

Note: Every time you access the homepage or any of the sub-pages of your client, or the function, the CLI will display a live log of the URL accessed, along with the HTTP method that is used to access it.

You can now open the client component's local URL in a browser to access the application.

Let's test the application by adding a task in the to-do list. Enter a task and click Add Task.

The task will be added and displayed in the app.

Let's verify this. Open the TodoItems table in the Data Store from your Catalyst console. Click the Data View tab to view the record. A row will be created for the list item that was added.

Let's add a few more tasks in the to-do list app. We can now test the delete operation. Click on a task that you want to delete.

When you click on a task, the delete operation is executed automatically and it will be removed from the list. The app displays the updated list.

Let's verify if the record was deleted in the Data Store. Open the TodoItems table in the Data Store and click Data View to view the records. The row for the list item will be deleted from the table.

If this setup is working correctly, we can deploy the application to production.