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.4. /components/navbar

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

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.