11.8. LibEuFin Frontend¶
11.8.1. Introduction¶
LibEuFin Frontend is a Single Page Application (SPA) built using React that facilitates setting up access to bank accounts, querying/displaying the transaction history of bank accounts and initiating payments.
11.8.2. Architecture¶
The frontend code sits in the /frontend folder. Files in the subfolders are highlighted below.
11.8.2.1. /actions, /reducers folder¶
Contains code that uses Redux to store the login state. Prevents user from relogging in every time they closed the browser or browser tab.
11.8.2.2. /routes folder¶
Directs the user to the respective pages according to the URL route. Routes are broken down into UnauthenticatedRoute and AuthenticatedRoute, which corresponds to the user’s login state.
11.8.2.3. /components/login¶
The login page for the user.
11.8.2.6. components/home¶
The home page showing general information of the users for e.g. bank accounts set up.
11.8.2.7. /components/activity¶
Shows activity of payments and its transaction history (WIP).
11.8.2.8. /components/bank-accounts¶
Shows bank accounts that are imported. A bank account drawer is shown to facilitate setting up of bank accounts. Each bank account is displayed in a card to display extra details for e.g its print document.