Converge is dashboard application that allows companies and subsidiaries of United Bank of Africa manage, assign assets, generate reports on assets.
Here is a link to the application before integration
https://converge-ram6h8igw-mylocarson.vercel.app/
React, Nextjs, SCSS, Axios
Seeing as Converge is a dashboard single application, it was a no-brainer to use Nextjs. Also, because the payload from the application interfaces will grow incrementally, I decided to make all pages on this web client-side made (no server-side rendering).
I wrote alot of JSX and built functional components.
Converge is a dashboard application, but it is dependent on other modules in the systems of the United Bank of Africa. As a result, Converge does not have a login or registration module; instead, the point of entry is through URL query parameters, where a token is given. If the application reads a token parameter in the URL query on the entry page, it makes a network call to the application interface on the backend infrastructure to verify that it is a legitimate and trustworthy token.
Following a good handshake with the backend application interface, which validates the token, the application proceeds to "login" the user, in which the user can interact with features depending on the permissions assigned to the user.
Permissions
The features available to a user on Converge are determined by the permissions delegated to them. Page level guards are introduced in the application using custom React Hooks and the useEffect API.
State Management
Despite having introduced data caching, I still wanted to store some global application state. I used the React Context API, a reducer, and a bunch of actions to manipulate global state abiding with Redux principle (having one single source of truth and updating state using only pure functions).