Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
GSoC 2018 Project Documentation: New Web UI for Fineract CN

GSOC-2018 Project: New Web UI for Fineract CN

Fineract CN Introduction

Apache Fineract CN is an application framework for digital financial services, a system to support nationwide and cross-national financial transactions and help to level and speed the creation of an inclusive, interconnected digital economy for every nation in the world. This documentation will help users and developers understand the work I did during the summer period.

Project Overview

The project description is to design an application for MFI's that support group lending functionaities and to customise the UI to look like that of Mifos X. This application will have a different flavor from that of the existing fims webapp.

Work Plans

Project Plans

The plan for this project is to have some understanding of how the current fims web app functions. Customise the project to look like that of Mifos X, Design the UI's to be used by a microfinance for setting up a basic MFI on the application and also add modules for Center and Collection sheet to have the same downdrill like that of Mifos X.

  • Design the UI's For Fineract CN Group Finance: I plan to design and implement the following:-
    • login page
    • dashboard
    • The various UI's to create, view and edit an office
    • The various UI's to create, view and edit an employee
    • UI to assign roles and permissions
    • UI's to allow the accountant carry out its functions.
  • Include some functionalities from MifosX: I planned included some functionalities from mifos X like the navbar with routing to the various pages, the design and implementation for center and collection sheet
  • Add some User Interfaces: I needed to add some UI that could be used to support group lending.
  • Do Some Implementation: I planned to do some backend implementation for the functionalities that were not yet implemented on the backend which was neded for my project

Workdone and Documentation


In this section I will give a brief overview of the work done during this summer internship period. I started by designing the Mockups for the UI before the coding period began. After this was followed by the design and implementation of the login page and the adding of some features from Mifos X like the navbar, side-nav on the dashboard page which could be viewed immediately after the login page. Later, I designed and implemented the modules for creating an office, employee, module for accounting with pages like create ledger UI, UI to view chart of accounts, UI to view trial balance. Also, the module for assigning roles and permissions. All these modules and their UI's were implemented using information gotten from Fineract CN back-end. I also designed the UIs for create center, view List of centers and collection sheet using informations from Mifos X. Lastly, I began the implementation for view list of centers using data from a JSON file hosted locally on my machine.

The link to some screen shots of the work done is available here


This section will provide all the links to the resources that I used to get this project started with, the links to what I have done so as to enable others contribute more to this project.

Usage and Testing

The section describes how you can use or test this project

1- Just go to this link found Here

2- Clone or fork it

3- Go to the proxy.conf.json file and adjust the configured URLs and ports to point to your back end services

4- Run the project using "npm run dev"

Use these as credentials. Tenant: 'playground', Username: 'operator'and Password: 'init1@l'

Work left

This section indicates the amount of work is yet to be done

1- Continue with the mock implementation for the endpoints that are not yet available, which are endpoints for groups and centers

2- Design some UI's that could not be added due to lack of backend implementation like center meeting page and carryout more enhancement of the app


My GSoC experience this year as a first-year GSoC student was really exciting and educative. I want to thank the community for their support especially my mentors Awasum Yannick, Isaac Kamga and Ed Cable. I also want to thank all those who did documentation on the Fineract CN project like Myrle Krantz and Isaac Kamga because those documents helped me greatly in getting started. My GSoC journey this year was not very easy but it was worth it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.