Building 'Mini-Terminal' for my portfolio

This is an article where I share my experience and the decisions I made while building the Mini-Terminal.

How did it all start?

I wanted to build a portfolio site for myself, and to differentiate myself from the other popular portfolios found online, I decided to make something which also would showcase my skills in Data Structures, Algorithms and Front-end frameworks. I had some prior experience working with React but none with Vue. So I resolved to work on Vue for this. My goal was to build a webpage whsich would simulate a terminal and file system in a computer. Also, I didn’t want to use any helper libraries or packages to make the terminal. I handled the key press events myself to create an editor. Only elements that were used in creating this webpage were div, span and p.

The UI building blocks

First I decided on what components to build. I realised that I should have a container which would handle the key press events. The other components were ReadOnlyText section and EditableText section. In a CLI based terminal you just have text, which is mostly read-only and few parts are editable. This editable text will be converted to ReadOnly once we hit ‘return/enter’ key to execute the commands we give.

The internals that give life to UI

I implemented a tree with node similar to inode to mock the file-system. I wrote a generic parser and executor components which will parse the text and pass the parsed text as token, which contain some meta data to the executor. The executor will identify the command and execute the function that maps to command. In this way we can have any number of commands and functionalities added with ease in future. Everything was built as generic as possible to extend the capabilities and functionalities with ease. Auto complete suggestions feature was implemented based on the meta data that I had in an object. This is where I have mappings to command names, functions, help text and meta related to arguments and options. This helped me to implement the help command and built a Trie for autocompletion feature.

Summing up

That was a great experience for me building this because it required me to put in more than one skill to build the entire webpage. My thought to showcase my proficiency in different skills was perfectly potrayed with this webpage because it required skills like implementation of different and complex data structures, writing algorithms which are efficient and optimal, understanding how Vue components work and communication between the components in the DOM heirarchy, exploring things in JS and CSS.

So, that’s how the Mini Terminal was built and the story behind it.