A Link Shortener

A Link Shortener

8th July, 2020

Web

ReactJs Material UI Local Storage

Description

A simple Front-End application that provides a link shortening service via the use of Local Storage created using ReactJs and Material UI.

What did I learn?

I decided to dig into ReactJs after being familiar in using VueJs as part of an assessment that I had to do. The assessment was open-ended which means that I could create anything and the one thing that was on my mind which I find it interesting to do is, is a link shortening website.

One could say that the structure of this app is just a CRUD system but the main point of this project is for me to get a further dive into using and learning about ReactJs. Throughout the journey, since I was asked to use Material UI and no other library, I had a trouble in using custom CSS styling like I used to do as I wasn't sure if I am allowed to make those from scratch as Material UI alone provide good colour schemes and necessarily stylings by default.

Features:

  • Using Local Storage to store JSON data (can be transferred to integrating with MongoDB or MySQL easily)
  • Redirecting based on the URL given regardless of domain as this will redirect users automatically
  • Using Material's UI styling library and not relying on self implemented styles
Last updated: 13th July, 2020