The front-end

Things to consider while designing the front-end application

Your front-end application most certainly will have to deal with user sessions and various GUI matters that are out of scope here. From an integration with Finqware standpoint there are few notable things:

• an end-user needs to see a list of Banks to connect to. Your backend has to maintain an inventory of skills that you chose to implement for your tenant app.

• each connector (skill) may have various tricks to be aware of (eg: a certain Bank may need a list of IBANs as an input). At the moment consent flows are not yet 100% the same from one Bank to another. Make sure you check each skill doc section in the developer portal once you configured your tenant app.

• once the user initiates a consent session with a new Bank, they need to submit data step-by-step by following a wizard-based GUI. At least one step will involve a web redirect to a page served directly by the Bank (for the SCA process). Make sure you know how to handle the redirect back using your client-side tech of choice.

State management

One of the main challenges in developing any quality front-end is state management. State management in web/mobile apps has become a hot topic, especially since Facebook introduced the flux pattern back in 2014. It's always a matter of taste and depends greatly on what programming language and framework you're using.

In the example below, the client app (developed with React) has a central Redux state where we keep parameters related to the GUI (eg: the page loading flag) and data served by our app's backend such as:

• the available skills/connectors that will show the user which banks to connect to

• data related to the Sessions API that tracks the steps for a consent flow (eg: the user chooses an account-information skill and needs to go through a wizard-like UX to fill some forms and submit data)

• user data - which skills they already connected to. Also we need account data that has to be rendered on the screen.

Note: this example app is deployed online at https://play.finqware.com/.