Skip to content
Asurafin / Nov 2021 — Mar 2022 (4 months)

Advisor Portal

CRM portal for Asurafin's client & advisors to manage their clients

advisor-portal
Advisor Portal

01 / Overview

In my role as the lead developer for the Advisor Portal, I was tasked with creating an administrative platform designed to revolutionise how our clients manage their relationships with their advisors. This platform, effectively functioning as a Customer Relationship Management (CRM) system, enables our clients to seamlessly manage contacts, documents, transfers, subscriptions, and generate reports.

  • Frontend: Leveraging the unified Storybook component library, built with Nuxt, Vue, and Tailwind, ensured a consistent and efficient user interface across the portal

  • Authentication: Authentication was securely managed using Auth0, providing a safe and reliable access point for users

  • TypeScript: A significant innovation was the integration of the openapi-typescript-codegen package with a custom script to automate the generation of a complete axios service from our Swagger JSON generated from our backend services. This approach not only streamlined the synchronisation of frontend and backend developments but also eliminated the inconsistencies associated with manual endpoint updates

  • Data: The portal's data visualisation capabilities, including charts, graphs, and data tables, were meticulously designed to offer insightful and accessible data representations, enhancing the decision-making process for our clients and their advisors

  • DevOps: Deployment was expertly managed through Circle CI, facilitating a smooth transition to the Google Cloud Platform

02 / Problem

Asurafin's clients needed a CRM-style tool to manage their advisor relationships: contacts, documents, transfers, subscriptions and reports.

03 / Decisions

I generated the frontend's complete axios service from the backend's Swagger JSON, using openapi-typescript-codegen with a custom script, which removed the inconsistencies that come from updating endpoints by hand.

04 / Outcome

Clients get charts and data tables for their data, in a portal built on the shared Storybook library with Auth0 sign-in and CircleCI deploys to Google Cloud.

05 / Stack

  • NuxtFrontend
  • StorybookFrontend
  • TailwindFrontend
  • TypeScriptFrontend
  • VueFrontend
  • GCPDevOps
  • Circle CIDevOps

06 / Gallery

Next projectStorybook →