First full stack diagnosis

What's going on?

During winter quater of 2023, I made this full stack web app with three other group mates.

It is now autumn quater 2023, and for project 1 of the course INFO 443, software architecture, I was asked to look back at this project, give it a diagnosis and form a report of its architecture design. This is the place where I will do the recording.

First lets do a quick viz

Using the tool mentioned here, I got this:

Node: one of the first things i realize is that I should've put the backend in a seperate folder, like what the frontend did.

Here comes the UML

This is a top level UML diagram of my codebase. The connections between the elements have been marked using arrows.

and the sequence UML

This is a sequence diagram showing how the web app will behave when the user attempts to add a game to the dashboard.

Tests

Since this project is done using react, Jest would be the natural choice of framework for testing.

The assignment ask us to

implement a complete set of automated tests for your chosen architectural element (module or class) you're analyzing. We expect a complete set to comprise around a dozen automated tests, achieving 100% code coverage.

So for my project the architectural element will be the components that composes the main dashboard. Namely Navbar.js and Gambox.js.

Here is the test result. As you can see my components are not as isolated as I once imagined. There is a lot of spill over.

I've also notised that there is a lot of unnessary error handling. For example this code here

function handleAdd() {
    // add a game
    // pass in current Catagory, then show search window
    fetch("api/users/")
      .then(res => res.json())
      .then(data => {
        if (data.status == "loggedin") {
          setCatagoryName(catagoryName);
          setShowSearch(true);
        } else {
          alert("Please login first");
        }
      })
  }

will not be used unless the user logged in. I had to add an impossible scenario in order to cover that line of code in the test.

Update in 2023-01-30:

I've finished the full version since then.