Skip to content
Asurafin / Mar 2022 — Aug 2022 (5 months)

Ops Portal

Portal for Asurafin's Ops team to manage their operations

ops-portal
Ops Portal

01 / Overview

As the lead developer for the Ops Portal at Asurafin, I was tasked with creating a comprehensive platform tailored to the operational team's needs, enabling efficient management of corporate actions, reconciliations, transfers, subscriptions, reports, and account management.

  • Frontend: This portal was constructed using our Storybook component library, which facilitated a unified and efficient user interface, built upon the robust foundations of Nuxt, Vue, Storybook, and Tailwind CSS

  • Authentication: Authentication security was ensured through Auth0, providing a reliable and secure entry point for the Ops team

  • TypeScript: A pivotal technical advancement in this project was the employment of the openapi-typescript-codegen package, combined with a custom script. This innovation allowed for the automatic generation of a complete axios service from our Swagger JSON, significantly streamlining the integration of frontend and backend updates and eliminating the challenges associated with manual synchronisations

  • Data: The portal incorporates sophisticated charts, graphs, and data tables for a clear and intuitive display of data, enhancing the operational efficiency and decision-making processes for the Asurafin Ops team

02 / Problem

Asurafin's Ops team needed one platform to manage corporate actions, reconciliations, transfers, subscriptions, reports and accounts.

03 / Decisions

I combined openapi-typescript-codegen with a custom script to generate a complete axios service from the backend's Swagger JSON, so backend changes reach the frontend automatically, with no manual syncing.

04 / Outcome

The portal is built on the shared Storybook library, uses Auth0 for sign-in, and gives the Ops team charts, graphs and data tables for their day-to-day work.

05 / Stack

  • NuxtFrontend
  • StorybookFrontend
  • TailwindFrontend
  • TypeScriptFrontend
  • VueFrontend
  • GCPDevOps
  • Circle CIDevOps
Next projectResearch Portal →