# The front-end

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](https://developers.finqware.com) 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](https://facebook.github.io/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](https://reactjs.org)) has a central [Redux](https://redux.js.org) 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.

![](/files/g11Xg4K4P8m1iKH0f6ZL)

Note: this example app is deployed online at [https://play.finqware.com/](https://play.finqware.com).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.finqware.com/dev-guide/designing-a-tenant-app/the-front-end.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.