Eric Liang

Entrepreneur, Web Developer, Content Creator

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.

Client: Myself
Date: July 2, 2018 - July 6, 2018


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

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
Because this project is intended for practice purposes, why not! If it was a actual release, I probably would've went with blue or purple as the theme of choice. I went with a one page web design due to the simplicity of this project.


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


If I had to redo this project, what I would do differently is probably use React.js mainly for the sake of learning the React.js framework.

Have A Project In Mind?

Interested in working with me? Let's have a quick chat, and see how we can make your project come to life. :)


Let's Do This