12.11. LibEuFin Frontend

12.11.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.

12.11.2. Architecture

The frontend code sits in the /frontend folder. Files in the subfolders are highlighted below.

/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.

/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.


The login page for the user.


Reusable navbar component that appears on every page of the project.


The home page showing general information of the users for e.g. bank accounts set up.


Shows activity of payments and its transaction history (WIP).


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.