Shorten URL

Tuesday, 06 May 2025

ⓕ 𝕏 in

Overview

A system for creating short links for public relations and communication.

Role/Responsibilities

Assigned to design the frontend web application and develop the backend for fast and accurate data processing, ensuring compatibility with the frontend. The features include:

Login System
Code generation for use as a link
Adding/Deleting/Editing links
Displaying results as a QR Code image
Downloading QR Code image files
Sending links via email
Usage statistics (number of links and number of link clicks)
URL Redirect
Responsive design

Problems/Challenges

Using links for public relations through various channels of the organization can result in very long links. The link's domain does not reflect the organization's identity, and converting links into QR Codes requires using other tools, which adds steps to the workflow. For this reason, an opportunity was seen to develop a Shorten URL system to be a tool for shortening links and automatically generating QR Codes to increase convenience and create a consistent university identity by using the same domain name. Using the shortened links can also increase credibility.

Design Concept

The system design will focus on development as a web application, emphasizing UI/UX design for ease of use and ensuring it supports display on all screen sizes. Analysis was required to select programming languages and tools that are efficient and suitable for continuous collaborative development by the team.

Technologies/Tools

Frontend: Vue.js (Nuxt) A popular framework that is easy to use and efficient.
Backend: Node.js (Express) A popular framework, easy to use, and efficient for processing.
Database: PosgreSQL Suitable for storing large amounts of data with good performance.
Styling: Bootstrap Used for designing the UI and responsiveness of the web application.
DevOps: Docker Used for deploying the system's API part and using Kong API for Reverse Proxy for Frontend and Backend.

Features

Shorten links (no expiration date)
List links and number of link clicks
Ability to Delete/Edit links
Downloading QR Code image files
Sending links via email
Responsive design

Outcome

After the design and development of the Shorten URL system were completed, it has been widely used, resulting in increased convenience and efficiency in work. The system can shorten links and generate QR Codes in a single step. The system processes link shortening and management quickly and accurately. Regarding accessing shortened links, the system can Redirect correctly and quickly.