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.

Initialize the Client

Now, let's initialize the client.

You can initialize the client in one of the three types supported by Catalyst:

  1. Basic web app: The basic client application is a simple version of the Catalyst client that is created without any external frameworks or libraries.
  2. React app: You can choose this if you prefer to create the To-Do List app using the React framework.
  3. Angular app: You can choose this if you prefer to create the To-Do List app using the Angular framework.
Note: Catalyst provides native plugin support to create React and Angular apps. These plugins also handle several operations related to setting up, testing and deploying your applications.

Since, you are initializing the client after the project has already been initialized, you can set it up independently by executing the following command from your project directory:

$ catalyst client:setup

Use the arrow keys and select your preference by pressing Enter.

catalyst_todo_client_select

Based on your choice, you can navigate to the relevant section for the steps to initialize the web app:

Initialize the Client as a Basic web app

If you chose Basic web app while setting up the client using the Catalyst command catalyst client:setup, Catalyst will initialize the client accordingly.

Enter "ToDoApp" as the name of the name for the client package and press Enter. catalyst_todo_basic_init_complete

The client is now successfully initialized as a Basic web application.

The client directory (CATALYST_CLIENT_HOME) will be created in the standard structure in the project directory.

This is the structure of the ToDoList project's directory, if the Advanced I/O function is of the Node.js platform, and the client is initialized as a basic web app.

catalyst_todo_basic_node_directory

This is the structure of the ToDoList project's directory, if the Advanced I/O function is of the Java platform, and the client is initialized as a basic web app.

catalyst_todo_basic_java_directory

You can now configure the client. Next Step

 

Initialize the Client as an Angular Web App

Catalyst will initialize the Angular app using the Catalyst Angular plugin (zcatalyst-cli-plugin-angular).

  1. Name your Angular app as "app", then type "Y" and press the Enter key to enable the auto-completion feature. This will provide auto-completion for your Angular terminal commands.
    catalyst_todo_angular_autocomplete
  2. You can choose to share your application data with the Angular by entering "Y" or opt out of it by entering "N", then press Enter. Since the application does not require Angular routing, type "N" and press Enter. catalyst_todo_angular_routing
  3. For this application we will be using CSS style sheet. Press the Enter key after choosing CSS.
    catalyst_todo_angular_stylesheet
  4. Now all the required Angular application files, configuration files, and dependencies will be installed through the Catalyst Angular plugin. catalyst_todo_angular_init

  5. The client is now successfully initialized as an Angular web application.

    catalyst_todo_angular_init_complete

The client directory (CATALYST_CLIENT_HOME) will be created in the standard structure in the project directory.

This is the structure of the ToDoList project's directory, if the Advanced I/O function is of the Node.js platform, and the client is initialized as Angular.

catalyst_todo_angular_node_directory

 

This is the structure of the ToDoList project's directory, if the Advanced I/O function is of the Java platform and the client is initialized as Angular.

catalyst_todo_angular_java_directory

 

You can now configure the client. Next Step

 

Initialize the Client as a React web app

If you chose React web app while setting up the client using catalyst client:setup, Catalyst will initialize the React app using the Catalyst React plugin (zcatalyst-cli-plugin-react).

  1. Next you will be prompted to choose the type of React application. Choose "JavaScript" as the type for this tutorial.

    catalyst_todo_react_init_1
  2. Name your React application as "app," and press Enter. All the required React packages such as react, react-dom, and react-scripts will be installed through the Catalyst React plugin.
    catalyst_todo_react_client_init
    The client is now successfully initialized as a React web application.
    catalyst_todo_react_init_complete

The client directory (CATALYST_CLIENT_HOME) will be created in the standard structure in the project directory.

This is the structure of the ToDoList project's directory, if the Advanced I/O function is of the Node.js platform, and the client is initialized as React.

catalyst_todo_react_client_node_directory

This is the structure of the ToDoList project's directory, if the Advanced I/O function is of the Java platform and the client is initialized as React.

catalyst_todo_react_client_java_directory

 

PreviousNext
Configure the Advanced I/O FunctionConfigure the Client