Client Side Architecture

Why React?

React to create incredibly flexible and reusable components. React component is a package of code that creates a particular element of our front-end, such as a button or a dropdown. Component helps us reduce time and effort for front-end development because we can build several common components once and reuse them across our web-application. Component also lets us customize the user interface to match the style of our mockup and perform specific desired behaviors.

Redux vs. React?

Because there is a lot of data that we need to inject into our components across our web-application to perform specific functions, we use Redux to manage a single-point state container. For example, the usertype is used across several components to display appropriate features for the user. Without Redux, we will have to manually pass the usertype either via parent-child hierarchy or via URL parameters. Both ways create are time-consuming, error-prone to implement, and create tightly-coupled components. Of course, that doesn't mean Redux is the solution to every problem. There are certain pieces of data that should be kept within the component itself. For example, not every component needs to know about all the skill data we have, just the Skills component. This is when React state is more suitable than Redux. The usage of whichever technology stack depends on the cases.

Styling

At the beginning, the front-end team has a conflict of interest regarding styling. Some members want to use CSS for styling, some members want to use custom theme hook by Material UI. In the end, we go with the latter option because the theme hook lets us eliminate the CSS files, and reduces the number of total files we create in our project. In addition, the theme hook integrates well with the Material UI components we utilize for our web-application.

Exception handling

Error handling is something that our front-end team pays very special attention to. If errors are not handled properly, or difficult for team members to interpret, web-application crashing will become frequent and debugging will become a drudgery. There are a set of rules we need to follow. Every component that performs API request must have an error indication state. At first, we assign empty strings to our error state, but then we change to null, because sometimes the errors returned can be empty strings. Every API request must handle the caught errors.