Procurement system

Employer: Clira AB

At Clira I worked with frontend assignments, backend assignments but also with assignments that involves all areas of the application with frontend and backend changes and database/migrations. In several assignments I would check and ask other parts of the organization like the product owner for clarification or I needed more information from the Q&A department. There were also some support assignments from the live enviroment where I collaborated with Q&A to pin down where the issue was so that I could implement the changes needed.

Frameworks/languages I worked with:

• React
• Typescript
• NextJS
• Tanstack (React) Query
• Tailwind CSS
• React hook form
• Ant Design
• PHP
• PostgreSQL

Credit Safe implementation

We were tasked with the assignment to integrate the Credit Safe API in the platform. This was mainly backend focus starting with reading how the API works, what requirements Credit Safe has and how to actually use it. Some of my thoughts during this assignment includes which areas of their API did we need to use and what was the best approach.

To give the best UX we decided when a request for a credit report was made from the frontend – the backend should spawn a queued job that would handle all the communication with the Credit Safe API that when completed should be visible in the frontend.

The frontend only needed the function to make a request for a credit report, showing the result built upon existing functions with accolades.

Here are some screenshots ( all data shown is examples/seeded only ):

Allocation decision

This assignment was purely frontend and UI/UX that needed to be done. When creating an allocation decision there was a need for a better usage flow, a better handling of the functions on that page. The solution was to disable some parts depending on where the user is in the steps to create an allocation decision. I also took the initiative to add feedback messages to give the user information about what is expected/what the next step is.

Here are some screenshots ( all data shown is examples/seeded only ):

File upload

In the editor you can add different types of fields which then the supplier was required to answer to the buyer of the procurement when creating a bid. I had do some investigation where the issue was becuase it was not clear or easy to understand at first but then I found the issue was when there is a file upload field that was set to required. When that is added/set and a supplier should answer the multi-step form in multiple tabs the supplier was not able to continue to the next step.

I found the issue was because of different types of libraries was used in the same tab that did not interact with each other in a proper way. The solution was to create a custom validation for the file upload and pass up state in the component tree which would make it possible for the parent component to check the validation before proceeding to the next step/tab.