Catly

Introduction

This tutorial will help you build a simple URL shortener service, Cat.ly, that reduces the length of URLs to make them more convenient to share and access. Cat.ly is built as a single-page React application using Catalyst as a serverless platform.

The client application will look like this:

You can access a working application and test its functioning here: catly.zohocatalystapp.com.

The Cat.ly application contains the following fundamental Catalyst components:

• A Node.js Advanced I/O Function: Contains the API that will shorten the URL that the user provides

• Client: The front end of the application that is hosted on Catalyst through web client hosting

The Cat.ly application uses the following Catalyst features:

• Data Store: To store the URLs and their shortened versions.
• Cache: To store frequently accessed URLs and their shortened versions for faster access.
• ZCQL: To fetch the original URLs through a query when their shortened versions are accessed.

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

The final Cat.ly application contains the following directory structure:

We have provided the source code of the application in this GitHub repository: https://github.com/catalystbyzoho/tutorial-cat.ly-node

Download the cat.ly repository to your local system and unzip the cat.ly-master zip file.

This tutorial provides instructions to work on the code in the repository’s files and build the final deployable application. You can keep the downloaded repository aside for now.

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 Cache segment for easier access. They are also saved in a table in the 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.