Brevis URL Shortener

Brevis is a URL Shortener web application which allows users to type in any URL and Brevis will generate a shorten version of that URL. Think of Brevis as a simplified version of Bitly. The main requirements of this project was a technical requirement, being that it has to be implemented using a Full Stack architecture using Nuxt.js, Express.js, and MongoDB.

The user must be able to input any URLs and the webapp will generate a shorten URL. The shorten URLs must then be displayed below the input in reverse chronological order and have a way for the user to click a button to copy the shorten URL into their clipboard. Also, the user must be able to successfully redirect to the original URL when they access the shorten URL.

Brevis is also available for download as open source software on my GitHub repository. You can check it out by clicking the button below. Disclaimer - Do not try to go to brevis.com as I do not own that domain nor do I have any plans to. It was already taken before the project began.

• Visit Website
• Source Code

• Web Design
• HTML
• CSS
• Node.js
• Nuxt.js
• Express.js
• MongoDB

What I Did

This project was mainly inspired by my desire to learn ReactJS as well as combining it with a backend solution, ExpressJS, to practice my Full Stack Web App Development skills. I chose MongoDB as my database since it works well with NodeJS based applications, and implementation is quick and easy. I later decided to go with Nuxt.js over React.js mainly due to personal preference. Not only that, this was a lightweight webapp, and I don't need extra overhead.

Before touching any code, I designed a mockup of what the website would look like in Photoshop. I decided to go with a flat modern red and white theme mainly because I rarely get to use warm colors when it comes to designing websites.

• #e84c3d
• #fafafa

The Technology Stack

• Nuxt.js (Vue.js)
• Express.js
• MongoDB
• Node.js

Challenges

Copy To Clipboard Functionality the Nuxt.js/Vue.js Way

One challenge I faced was implementing a copy to clipboard functionality so that whenever the user generates a new shorten URL, he/she can click the copy button which will copy the shorten URL to the clipboard.

Most cases when involving the execCommand('copy') functionality, it uses a input box. However, in my case, I had the text I want to get copied in a set of anchor tags so that made it difficult. I tried referencing it via document.getElementById('shorterURL').innerHTML, but sadly, no luck.

I then asked on Reddit for some ideas via a post in the /r/vuejs subreddit, and one person responded suggesting the document.createRange() solution, but the problem with that is it requires the user to actually highlight the content. What I wanted was for the javascript to do it automatically, and all the user had to do was click a single button.

It wasn't until later I decided that I would do a somewhat small "hack" which will solve my problem. I ended up using javascript to temporarily create a hidden input element and set the value of it to the innerHTML of the anchor tag. Then, I called the execCommand('copy') functionality to the generated hidden input. Once that was done, I ended the script by having javascript to remove the generated hidden input field.

URL Redirect to Original URL via Shorten URL

The final challenge was getting the redirect to the original URL feature to work. I had to figure out a way to create a dynamic route (which can be done by creating a page with a underscore in front of its name) that will grab the dynamic route parameter value, send that to the backend, retrieve the original URL, and redirect via the frontend automatically on page load.

I accomplished this by first creating a asyncData () request via axios.get to the backend along with a corresponding {params} to access the dynamic route parameter value which contains the shorten URL string. The backend then searches the database and returns the original URL. The returned value is then referenced inside a method which I have the Nuxt.js' mounted () function to automatically call and run said method. The method then handles the code to redirect the user to the original URL. I tried using the redirect() function, but that didn't work. I tried using this.$router.push(), and it didn't work. What finally worked was when I used window.location = originalURL.

The Result

I was able to successfully create a fully functional URL shortening full stack web app. Whenever the user enters a URL, if it already exists, the webapp returns the existing shortened URL otherwise it will generate a new one. The results are then displayed beneath the input field in reverse chronological order so the latest result is displayed on top, and the oldest on the bottom. I was able to also get the copy button to work.

The next functionality I plan to add is a basic analytics system.

What I Would Do Differently

• To improve the functionality used to generate the shorten URLs. Currently it uses Math.floor(Math.random() * 100000).toString(); to quickly generate a temporarily decent short string of random characters; however, I plan to replace this logic with a hash algorithm that allows me to generates a unique and short string whose size I can declare.
  UPDATE: 11/6/21 - Updated and replaced with Shake256 hash algorithm to improve unique short URL generation.