Catly

Introduction

In this tutorial, we will build a simple URL shortener application which will allow you to instantly trim lengthy URLs into easily shareable ones. We will build this application as a single page React application using Catalyst’s React plugin and by leveraging a few other Catalyst services.

The final look of the client application will resemble this screen:

You can access a working application and test its functioning here: https://catlynodejs-860829830.development.catalystserverless.com/app/index.html

We will name this application Cat.ly, and it will be built using the following Catalyst components:

• Catalyst Serverless Function : A Node.js function (of the type Advanced I/O) will contain the logic to shorten the given URL.

• Catalyst Cloud Scale Data Store : Used to store the original URLs and their shortened versions.

• Catalyst Cloud Scale Cache : Stores the frequently accessed URLs along with their shortened versions to enable faster retrieval and rendering.

• Catalyst Cloud Scale ZCQL : Retrieves original URLs from the Data Store through queries when their shortened versions are accessed.

• Catalyst Cloud Scale Web Client Hosting : Hosts the front end of the application. The client will be built in the React framework using Catalyst’s React plugin (zcatalyst-cli-plugin-react). This plugin contains certain node modules and library files that handle several operations involved in the development and testing of the React app internally. This allows for a faster and efficient application building process.

We have provided the source code of the application in this GitHub repository.

You can download the code from this repository to your local system. We will be providing step by step instructions to work on the code in the repository’s files and build the final deployable application in the next sections.

The final Cat.ly application will contain the following directory structure:

Before we dive deep into the code, we will first look into the overall architecture of the application and the usage of each of the Catalyst components.

Application Architecture

The Cat.ly application’s architecture can be described as follows:

1. A user enters a URL to be shortened in a text box in the application’s client.
2. The Advanced I/O function checks if the entered URL is valid. If the URL is valid, a short ID, which is the ID part of the shortened version of the URL, is generated.
3. The original URL and the short ID of the URL are saved in a Catalyst Cloud Scale Cache segment for easier access. They are also saved on a table in the Catalyst Cloud Scale Data Store.
4. The original URL and its shortened version are displayed in the client application. A count variable is incremented to display the number of URLs shortened using the application.
5. When the user clicks on the shortened URL from the client, a ZCQL query is executed to fetch its original URL from the cache segment. If the cache item has expired, the data is fetched from the table in the Data Store instead and re-persisted to the cache. The cache item is overwritten every time the URL is accessed, and its expiry is updated each time.
6. A redirect signal is fired to the browser to open the original URL in a new tab.