Given a JSON file with 500 records of cyber security vulnerabilities (CVE’s) found in a system, my challenge was to create a functioning and aesthetically pleasing webpage to display all the data and help a user easily navigate and understand the data.Github Repo for Final Product
My UX Design skills were a huge benefit in the beginning. I knew how to consider the end users (IT professionals) and I worked to understand the data and create a hierarchy of which data points were most important, second, and third to the users.
Next, I sketched wireframes for different possible and appropriate data visualizations.
Prototype Challenges: It took me a while to figure out how to turn the CVE records object into an array of objects, then loop through them with the array.ForEach( ) method to create DOM elements for each record. Also, figuring out how to monitor which button was active, to fill the details panel with the correct CVE data was a challenge. I solved that part by query selecting all CVE buttons, then using the ternary operator to check for a match with the newly clicked button, then add/remove the active class.
First, I had to use the useState and useEffect hooks right away to fetch the JSON data from my local server.
Then, I created the static components, such as the CVE button rows, details panel, and other UI elements. To create the 500 instances of the CVE container/button, I first turned the data object into an array of objects using the Object.entries() method. I knew I wanted the final visualization to display records from highest security risk to lowest, helping the users prioritize the data. So I created a sorting function for the array. Then, using the array.map() method, I created an instance of my clickable button row for every record, creating access to the record data as a prop.
I used the useState() hook to monitor which CVE record was active, passing the setCVE function up through components using props, until it reached the nearest common ancestor for all components needing to access the activeCVE state.
With the activeCVE record managed at the top with useState, my detailsPanel component could read the data from the activeCVE and send it down through its props to the appropriate data fields.
With the activeCVE record managed at the top with useState, I implemented a useEffect hook to remove the active class from the previously active CVE button, so that only one row would be active at a time, allowing for CSS to indicate the one active CVE button.
Product demo at top of article.
In the end, I can’t believe how much I learned in 6 weeks! This project — and the pace at which I had to learn — stretched my brain in ways I haven’t felt for many years. I appreciate React’s functional way of computing and managing state. I believe my React app took up less lines of code then my vanilla js prototype and is easier to read if you’re familiar with JSX. Those are huge benefits! Looking forward to continuing my React journey.