Shorty - A Friendly URL Shortening Application

This is a very simple URL shortening application, in which the following features are implemented:

• Creation of a shortened url for long urls
• Ability to view the original long url by accessing the shortened url
• Ability to add expiry time to shortened links generated by the application
• The application has a dashboard which can be used to view a list of all the shortened urls generated
• Items in the main dashboard view can be sorted (in ascending/descending order, and on the basis of 2 different fields: no. of times the url has been viewed, last access time of the url)
• Each item in the main dashboard view has its own dedicated view as well, which can be seen by clicking on an item
• The dedicated view can be used to see usage insights about the generated link, such as its creation date, no of views / no of times it has been accessed, last access time, and expiry status (whether the link is still valid or not)

Frontend - Angular

The frontend has been created using Angular 6. The application is a SPA (Single Page Application), so app-routing as been used. It consists of the following routes:

• /
• /analytics
• /analytics/:shortid
• /:shortid [to view the actual url by accessing the shorturl]
• /404 [for invalid routes being accessed]
• /expired [for expired links]

Backend - NodeJS

The backend has been created as a REST API - implemented using ExpressJS and MongoDB (using Mongoose)

Installation Instructions

Both the frontend and the backend have their own Dockerfiles, which can be used to run the application in a containerized environment. Follow the following instructions to install and set up the application.

Backend

Installation without Docker

• Make sure that you have Node installed on your machine. If you don't have Node, follow the instructions available at this link to install Node first
• Run npm i -g nodemon to install nodemon package
• Run npm i to install all dependencies
• Run npm start to start the application

At this point, the application should be up and should have displayed 2 console messages: 1 about server being started, another message about the database connection being successful.

NOTE: You will need a .env file to run the application. You can get this from here. Keep this .env file in the root of the folder,

Installation with Docker

This installation guide assumes that you already have a working version of Docker installed. If you don't have Docker, follow the instructions and install it first before proceeding.

• Build the docker image by running this command in a terminal docker image build -t shorty .
• Check if the image has been successfully built by running docker image ls
• Run the built image by executing docker run -p {port}:3000 shorty where {port} is any port that you want the application to be accessible at
• Open up a browser window and navigate to localhost:{port} to see the running instance of the server

NOTE: You will need a .env file to run the application. You can get this from here. Keep this .env file in the root of the folder, where the Dockerfile resides

NOTE: You might need to change the variables in the .env file according to the ports that you start the application with. The PORT variable is the port where the backend server is running (you should generally not change anything else other than the ports)

Frontend

Installation without Docker

• Open up a terminal and execute this command cd frontend/shorty to change your current directory
• Run npm i to install all dependencies. This will take some time
• After the dependencies have been installed, run ng build to build the application
• Run ng serve to start the server
• After all the files have been compiled, open up a browser window and navigate to localhost:4200 to view the running application

Installation with Docker

This installation guide assumes that you already have a working version of Docker installed. If you don't have Docker, follow the instructions and install it from here first before proceeding.

• Open up a terminal and execute this command cd frontend/shorty to change your current directory
• Execute npm i command in the terminal to install all dependencies. This will take some time
• Run ng build to build the application
• Now run docker image build -t shorty . to build an image for the application
• After the image has been created, run docker run -p {port}:80 shorty to run the built image. Here {port} is the port that you specify to access the application from.
• Navigate to localhost:{port} in a browser window to see the running version of the application

Important Notice

An important thing to note is that the backend server needs the url (including) port of the frontend server (to be able to provide correct shortened urls which can be accessed). Furthermore, the front end also needs to know about the path (inlcuding port) on which it is itself running, and on which the server is running.

To elaborate on this some more, in the backend server, the .env file has the following field: APP_BASE_URL = http://localhost:4200/

Whereas, the frontend uses environment files, where the following fields are defined:

backendBaseUrl: 'http://localhost:3000', appBaseUrl: 'http://localhost:4200' where backendBaseUrl is the base url of the backend server (by default it will be http://localhost:3000), and appBaseUrl is the base url for the frontend app itself (by default it will be http://localhost:4200).

These fields need to be configured correctly, according to the ports and paths that are being specified when building the docker images. Otherwise, the application will not work correctly. As an example, here's a sample flow for the execution of both frontend and backend in a dockerized environment:

• cd backend to navigate to the root directory of the backend server.
• Set PORT field in .env file to 3000
• Set APP_BASE_URL field in .env file to http://localhost:4200/
• Run docker image build -t shorty-backend . in the terminal
• Run docker run -p 3000:3000 shorty-backend in the terminal
• Backend server will be running on http://localhost:3000

Now for the frontend, open another terminal

• cd frontend/shorty to navigate to the root direcotyr of the frontend app
• Open environment.ts file (assuming that you're building for dev environment), set backendBaseUrl: 'http://localhost:3000' and set appBaseUrl: 'http://localhost:4200'
• Run npm i to install dependencies
• Run ng build to build the app
• Run docker image build -t shorty-frontend . to build the app
• Run docker run -p 4200:80 shorty-frontend to run the image
• Navigate to http://localhost:4200 in the browser to see the app running

If you still run into issues with setup and deployment, please contact me. You can also view the live version of the application on http://shorty.surge.sh

Possible Improvements

• At the moment all the URLs generated are public, so anyone can view and use them. This means URLs can also be used for malicious purposes. A possible improvement is of course, to detect malicious/spam bots and scripts. This can be done on the server side, the most basic check can be to see the user-agent being sent with the request. Some bots/scripts can be filtered out this way.

• Another possible improvement can be privately generated URLs which are accessible only through authentication tokens.

• Certain commonly know malicious URLs can be blacklisted and not be supported for URL shortening by the application to keep it safe from some abuse.