Log Viewer Project Summary
For this project, the brief was to build an event log viewer. There was a need for the team members to easily scan and analyze the data collected from the company's various customer facing applications. Due to this data not being easily accessible in the past, the information was often not being used. As the company offers a wide variety of services and processes large amounts of data, the tool needed to be simple to use and allow for fast navigation and retrieval of information.
You can interact with the application here or view the code on Github.
Tools & Tech
I was given free reign to implement the project using any tools or technologies I wanted. With the help of the lead developer, the SQL database was setup on my system to enable my application to interact with the data. Having recently started learning React I decided to use it to build out the project.
The component-based architecture and the interchangeability it offers really appeal to me. Furthermore, the repetitive presentation of a stack of infinitely nested data seemed the perfect use case to make use of reusable components. For state management, I used Redux Toolkit.
To plan the project, I used Figma as I found it intuitive to use. This was especially helpful when it came to analyzing the layout to ensure the interface was as usable as possible.
Thought Process
My highest priority was to present the data as clearly as possible. This was challenging given the amount of data that needed to be presented and the limited screen real estate at my disposal. It was while researching best practices, that I learned the nuanced difference between legibility and readability. This guided my choice of font as well as teaching me to pay attention to the effect a small change in spacing and contrast can have.
In order to make interpretation of the data as efficient as possible, I used colour to communicate important information. This allows the user to both find this information quickly and to consume it instantly without the need to read and process text unnecessarily.
Build Process
The build was initially done in JavaScript, but over the course of the project I started learning TypeScript. As a result, I migrated the project in order to reduce errors.
While I initially experimented with the Context API, it quickly became apparent that the scope of the state management required was simply beyond the intended use of Context. Instead I chose to make use of Redux Toolkit and used this to define several state slices for the different areas of the application.
A custom useFetch hook was implemented to make the process of fetching the data more efficient.
While the application will almost exclusively be used in a work and office environment on desktop PCs, I decided to make it fully responsive across the full spectrum of devices. Presenting data on smaller devices is particularly challenging and this gave me invaluable experience in creating a usable, responsive application.
What I Learned
The biggest challenge was working out the cause and effect of the rendering (and re-rendering) of components. Coupled with the effects of hooks and how they are intertwined with this process, this proved really tricky to wrap my head around.
There's a tangled web analogy in there for sure and mostly it felt like it was wrapped around my head! Needless to say, it's going to take some time to really grasp these concepts.
Another realization was just how important it is to really get stuck in and apply what I'd learned. I found it difficult to properly plan the layout of components and the flow of data between them, simply because I hadn't the ability to form clear mental models of how they would normally interact. Thus I found it easier to actually start building a basic structure and once it started taking shape, I was able to see a clearer path forward and make adjustments to my original plans. With experience, this understanding will become intuitive.
One step at a time.