NML

My10X

Front-end Development, Custom Software Development

A mobile-friendly, user-centric, secure portal for 10X clients to view and manage their investments.

Project Overview

Problem: The old online portal and mobile app experience lacked depth and functionality, users felt it lacking for the management of their investments. Any changes to their account required assistance and support, resulting in a slow and underwhelming user experience of the product. Accessing detailed fund information and projections was not available.

Solution: Design and develop a modern client portal that's mobile friendly and user-centric. Giving clients the power to administer their investments and plan for their future.

My10X is the go to place for retirement planning.

It is your financial advisor, your investment manager and your financial coach, helping you set realistic retirement goals, develop a savings (and investment) program to meet your goals, adjust your plan for any life events and monitor your progress along the way. Importantly, My10X proactively communicates with you in a personalized way and reminds you about your savings goals and how to improve your outcomes. It also reaffirms and congratulates you for taking the right steps along the way.

My10X is a mobile first platform but can be accessed via laptops and tablets. In one sentence, the portal enables clients to plan, invest and monitor their retirement investments and to achieve their retirement goals.

Feature Highlights

MY10x Retirement
MY10x Retirement
  • Simple, mobile-friendly card based layouts.
  • Interactive retirement planning tool.
  • Referral program
  • OTP based login
  • Tailored content.

Technical Requirements:

  • Mobile Friendly
  • Low latency
  • Secure

Technology

  • ASP.Net MVC Application hosted in Microsoft Azure.
  • SQL for data storage.
  • ReactJs, Redux, React-Router and Webpack to build a Single Page App.
  • JSON Web Tokens (JWT).
  • Azure Application Insights.
  • Segment.io
  • Orka integration.
  • NML CMS integration.
  • Entity Framework.
  • Microsoft's Unity for dependency injection.
  • Redis for caching.
  • HiQPdf for generating PDFs from HTML templates.
  • DotLiquid for templating statement PDFs.

ReactJs, Redux and React-Router were used to build a Single Page App. The entire client side application is contained in one cacheable script that can transition between multiple ‘pages' without the need to make full web requests as is done traditionally. Data needed for rending the application pages is retrieved as needed as JSON from the server and shared between pages.

Redis is used as a caching technology. We cache oft used data that is unlikely to change regularly, to avoid having to make additional database or webservice calls. There are various instances from within My10X where we cache the results of API calls to Orka. Additionally we also cache database calls from Orka, either to its own database or the external source database. Redis provides a great improvement, reducing time to fetch data from 100s of milliseconds to less than 10.

Architecture

For the My10X application we went about integrating and expanding the existing universal 10X investment API, nicknamed Orka. Orka acts as a central platform for 10X's entire data architecture – managing their various services, investment portfolios, and partners. Orka allows the 10X architecture to be infinitely scalable to meet the needs of the market.

MY10x Architecture

The My10X application is a Single Page App (SPA) that integrates with Orka in the backend. Users are authenticated against Orka and all API requests to Orka that involve client information need to present a JWT as part of the request. These tokens not only verify that a user has been authenticated against the API, but also serve to validate that users do not access each other's information.

There is no need for the My10X application to persist any data since user accounts and investment information is stored behind the Orka interface. As such, the My10X application has a very lightweight architecture consisting of the front end application and back end controllers that act as an intermediary between the front end application and Orka.