---
title: "Configure the client"
url: https://docs.catalyst.zoho.com/en/tutorials/document-processor/nodejs/configure-client/
description: "Create a React web app that detects and extracts data from input documents, and processes it using  OCR, Barcode Scanner, and Identity Scanner of Zia Services."
last_updated: 2026-08-17T12:16:04Z
service: All Services
type: tutorial
related_links:
  - name: "Client Directory Structure"
    url: /en/cli/v1/project-directory-structure/client-directory
  - name: "Install Tailwind CSS"
    url: https://tailwindcss.com/docs/guides/create-react-app
---

# Configure the Client 

Next, let's configure the client component. The [client directory](https://docs.catalyst.zoho.com/en/cli/v1/project-directory-structure/client-directory/) (`/app`) you initialized will contain: 

* Application source files in the `/src` directory
* Public files in the `/public` directory
* Node modules
* The `client-package.json` configuration file
* `[package.json](https://docs.npmjs.com/files/package.json)` and `[package-lock.json](https://docs.npmjs.com/configuring-npm/package-lock-json.html)` dependency files

You can fetch the entire client directory with configured code [this git repo](https://github.com/catalystbyzoho/tutorial-catalyst-zia-services) that you downloaded earlier.

Replace the `src` folder in this directory with the one in the extracted zip using an IDE and save the files. 

> **Note:** Please go through the code in each file to make sure you fully understand it.

### Install React packages

We will be installing the following additional React modules for the Document Processor application:

* **`react-hot-toast`**: This library is used to display toast messages as status notifications in the client application.

* **`react-router-dom`**: This package is used for routing purposes to load the content in the client application dynamically based on the URL.

* **`axios`**: This client library is used to make HTTP requests from the client end to communicate with the APIs in the server side.

* **`classnames`**: This attribute is used to set or return the value of an element's class attribute in React.

To install these react packages, navigate to the project's client directory (`/app`) in your terminal and execute the following command:

```sh
npm i react-hot-toast react-router-dom axios classnames
```

![react-install](https://catalyst-docs-development.zohostratus.in/images/tutorials/document-processor/nodejs/react-install.webp)

This will install the modules and save all their dependencies.

The following information will also be updated in the `package.json` file.

![package-details](https://catalyst-docs-development.zohostratus.in/images/tutorials/document-processor/nodejs/package-details.webp)

#### Install Tailwind CSS

We have use the [Tailwind framework](https://tailwindcss.com/) to implement the pre-built CSS classes that scan all your html files and JS components, and generates a static CSS file for your project.

Navigate to the project's client directory (`/app`) in your terminal and to install and initialize this framework, you will need to execute these two commands in your terminal:

1. To install Tailwind CSS:

```sh
npm install -D tailwindcss@3
```

![tailwind](https://catalyst-docs-development.zohostratus.in/images/tutorials/document-processor/nodejs/tailwind.webp)

2. To initialize the `tailwind.config.js` file in your project:

```sh
npx tailwindcss init
```

![tailwind-init](https://catalyst-docs-development.zohostratus.in/images/tutorials/document-processor/nodejs/tailwind-init.webp)

This will create the `tailwind.config.js` file in your client directory. Open the file, paste the code below , and save the file. You can learn more about tailwind installation from [this page](https://tailwindcss.com/docs/guides/create-react-app).

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

```

The client directory is now configured.

Let us quickly go through the working of the function and client components of the application:

The user enters an input image or a digital document to be processed in the client application. 

The `/:model` API in the `index.js` file is triggered and it defines which model to invoke. Based on the type of the input document, the corresponding logic of the model (`pan`, `cheque`, `ocr`, `barcode` or `passbook`) will get executed.

All the listed below models (except barcode) use the [zia.extractOpticalCharacters()](https://docs.catalyst.zoho.com/en/sdk/nodejs/v2/zia-services/ocr/) method in the [Catalyst Zia Services Node.js SDK package](https://docs.catalyst.zoho.com/en/sdk/nodejs/v2/zia-services/ocr/) to extract the data from the input document or image and provides the response in the JSON format.

* **`/pan`**: For this document, the `modelType` is configured as `PAN`. The user provides a scanned copy of the PAN card as the input and response includes the card holder's first name, last name, data of birth and the PAN card number. 

* **`/ocr`**: The `modelType` is configured as `OCR` for general OCR processing. The extracted text from the input document and a confidence score will be sent as a response. The confidence score is a percentage value depicting the accuracy of the text recognition and prediction in the given input document.

* **`/cheque`**: For this document, the `modelType` is configured as `CHEQUE`.The user provides a cheque leaflet(only in the CTS-2010 format) and response includes the cheque number, bank details such as the bank name, branch, IFSC code, account number, amount and the date of issuance.

* **`/barcode`**: The user provides either 1D or 2D barcodes as input and returns the encoded information it as response. We have used the `[zia.scanBarcode()](https://docs.catalyst.zoho.com/en/sdk/nodejs/v2/zia-services/barcode-scanner/)`
method in the [Catalyst Zia Services Node.js SDK](https://docs.catalyst.zoho.com/en/sdk/nodejs/v2/zia-services/ocr/) to perform this operation. To learn more about the supported barcode formats, please refer to [this page](https://docs.catalyst.zoho.com/en/zia-services/help/barcode-scanner/introduction/).

* **`/passbook`**: The user provides a passbook document as an input and the response includes information such as the account number, bank name, its branch and address. 

6. The `/aadhaar` API in the `index.js` file is triggered when the user choose to process an aadhaar card in the client application. The user needs to provide both the front and back side images of the card separately, which will both be processed. This model recognizes the language of the document automatically and processes it. This API implements the `[zia.extractAadhaarCharacters()](https://docs.catalyst.zoho.com/en/sdk/nodejs/v2/zia-services/identity-scanner/aadhaar/)` method in the SDK package that extracts the parameters recognized in the aadhaar card such as the card holder’s name, address, gender and aadhaar card number. 

Let's have a look at the client components in detail:

* The root directory of the client contains the Catalyst-specific [`client-package.json`](https://docs.catalyst.zoho.com/en/cli/v1/project-directory-structure/client-directory) file, which contains the default configurations of the client.

* The `src` folder contains the application’s source files including the JavaScript and CSS files that will be included in the build folder when we compile the React app. The `App.jsx` facilitates the behaviour of the front end of the application. It handles the change and shrink events, and posts and obtains data using the APIs defined earlier. The files within the `views` folder are responsible for rendering the response as output in the client application. 

* The `public` folder is used to hold files that can be openly accessed by browsers through public URLs. It includes the following files:

    1. `index.html`: The default entry point of application.

    2. `manifest.json`: Contains information about the web application including the `start_url` which is set to “.”. This enables every shortened version of the URL the user enters to originate from the base URL [Catalyst_web_app_URL/app/](https://docs.catalyst.zoho.com/en/cloud-scale/help/web-client-hosting/key-concepts/#default-web-application-url) when the app is hosted. 

* `tailwind.config.js`: This file contains all the client side customizations of your application such as the CSS styles implemented in your project.