---
title: "Introduction"
url: https://docs.catalyst.zoho.com/en/tutorials/task-manager/nodejs/introduction/
description: "Build a React task manager app to create and manage tasks. You can perform CRUD and filter functionality on tasks."
last_updated: 2026-08-17T12:16:04Z
service: All Services
type: tutorial
related_links:
  - name: "Project Directory Structure"
    url: /en/cli/v1/project-directory-structure/introduction/
  - name: "NoSQL Table Keys"
    url: /en/cloud-scale/help/nosql/components/#table-keys
  - name: "NoSQL SDK"
    url: /en/sdk/nodejs/v2/cloud-scale/nosql/get-component-instance/
  - name: "NoSQL API"
    url: /en/api/code-reference/cloud-scale/nosql/insert-item/#InsertNewItem
---

# Task Manager App

### Introduction

This tutorial will help you build a React web application called **Task Manager**. The application will allow you to perform the following functionalities:

* Create a task
* Assign statuses to each task you create
* Filter tasks
* Update the created tasks
* Delete tasks when they are no longer required

The client side of the application will look like this:

![catalyst_tutorials_nosql_taskmanager_first_look](https://catalyst-docs-development.zohostratus.in/images/tutorials/task-manager/catalyst_tutorials_nosql_taskmanager_first_look.webp)

The logic of this application is coded employing the following Catalyst services and its respective components:

1. [Catalyst Serverless](https://docs.catalyst.zoho.com/en/serverless/):
    * [Advanced IO Function](https://docs.catalyst.zoho.com/en/serverless/help/functions/advanced-io/): To code the backend logic of the application in the Node.js environment.

2. [Catalyst CloudScale](https://docs.catalyst.zoho.com/en/cloud-scale/):
    * [NoSQL](https://docs.catalyst.zoho.com/en/cloud-scale/help/nosql/introduction/): To store unstructured or semi-structured data where the data is passed as JSON or JSON arrays.
    * [Web Client Hosting](https://docs.catalyst.zoho.com/en/cloud-scale/help/web-client-hosting/introduction/): To host the front-end of the application as a React web app.

You will use the [Catalyst web console](https://console.catalyst.zoho.com/) and the [Catalyst Command Line Interface](https://docs.catalyst.zoho.com/en/cli/v1/cli-command-reference/) (CLI) to build the application.

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

### Featured Concepts

Before we dive into the application, it is important you comprehend the following NoSQL table keys:

* **Partition Key**: This key is a mandatory attribute as it defines how and where the data should be stored in the distributed NoSQL table.

* **Sort Key**: This key is typically an optional attribute and that will help you in referring the required data that shares the same Partition Key.

For example, if you have a NoSQL table that contains data on fruits, then the *fruit* itself will be the **Partition Key**, while its specific *variety* will be the **Sort Key**.

<table class="content-table">
	<thead>
		<tr>
			<th class="w30p">Fruit (Partition Key)</th>
			<th class="w30p">Variety (Sort Key)</th>
      <th class="w30p">Color (Index)</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Apple</td>
			<td>Royal Gala</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>Apple</td>
			<td>Fuji</td>
      <td>Red</td>
    </tr>
    <tr>
			<td>Banana</td>
			<td>Cavendish</td>
      <td>Yellow</td>
		</tr>
    <tr>
			<td>Banana</td>
			<td>Red Dacca</td>
      <td>Red</td>
		</tr>
	</tbody>
</table>

> **Info:**: [Learn more about NoSQL Table Keys](https://docs.catalyst.zoho.com/en/cloud-scale/help/nosql/components/#table-keys).

### Application Workflow

The workflow of the application is described below:

* You will create a task by populating the input fields present in the client. The `UserID` will act as the **Partition Key**, and the `Task Name` will act as the **Sort Key**.

* Once the task is created, the unstructured data will be stored in the NoSQL storage component.

* You can filter the created tasks and the required tasks will be referred using its `UserID` (**Partition Key**) and `Task Name` (**Sort Key**).

* You can also perform **Edit** and **Delete** operations on the created tasks. The data changes will be reflected in the NoSQL component.

* Finally, the React application is hosted on Catalyst using the Web Client Hosting component.