14.10. LibEuFin Frontend

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

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

/components/login

The login page for the user.

/components/navbar

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

components/home

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

/components/activity

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

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