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.

Introduction

This tutorial will help you build a simple single-page to-do list web application in Catalyst that enables you to note down tasks to be done, and delete them after they are done.

The client application will look like this:

You can access a working application and test its functioning here: to-do.zohocatalystapp.com.

The to-do list application contains the following fundamental Catalyst components:

  • Advanced I/O Function: The Advanced I/O function is coded in the Node.js programming environment. It contains the APIs that enable the users to create, view, and delete list items
  • Client: The front end of the application that is hosted on Catalyst through web client hosting

The to-do list application uses the following Catalyst features: 

  • Data Store: To store the to-do list items in a table
  • ZCQL: To fetch data from the Data Store through querying

We will use the Catalyst web console and the Catalyst Command Line Interface (CLI) to build this application.

You will be given the code for the files to be included in the function and client components in this tutorial. You will just need to copy the provided code and paste it into the appropriate files as directed.

Application Architecture

The to-do list application's functioning can be described as follows:

  • Adding a note: A user enters a note in the client application and adds it as a to-do list item. The client component triggers the Advanced I/O function. The function saves the note as a record in the table in the Catalyst Data Store using a HTTP POST request. The Advanced I/O function then executes a HTTP GET request to obtain all the existing records in the table and sends them back to the client for rendering. The client application displays all the existing items in the to-do list.
  • Deleting a note: When the user clicks on a note in the client application, it triggers a HTTP DELETE request. The corresponding record from the Data Store is deleted. The Advanced I/O function then performs another GET request and obtains the remaining records which is sent back to the client. This will update the to-do list displayed in the client.