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