Skip to content

Instantly share code, notes, and snippets.

@Omar-Nabil
Last active August 19, 2024 20:28
GSoC'24 Report - Mifos X Web App Enhancements

Google Summer of Code 2024

x

Project - Mifos X Web App Enhancements

The Mifos X Web App represents an enhanced version of the Mifos X Community App, offering a robust financial solution tailored for the Mifos user community. It encompasses all essential features for various financial inclusion methods and products, complemented by a self-service administrative portal. This portal aims to provide superior support to users of online and mobile banking applications, enabling effective management and assistance. The Web App, developed since 2018 using Angular, promises improved user experience and better maintainability for financial institutions.

Project Mentor:

Goals Of the Project

  • Fix remaining issues.
  • Impoving translations.
  • Enhance look and feel of app.
  • Redesigning customer and account dashboard pages.

Translation Overview

We can split the translation into three categories:

1 – Translate Data comes from Back-End

For this translation, I created a pipe named translateKey. The TranslatePipe is a custom Angular pipe that translates keys received from the back-end using @ngx-translate/core. It constructs a translation key from a given value, group, and optional prefix, then instantly retrieves the corresponding translation. This pipe streamlines translating dynamic content in multi-language applications by organizing translations into logical groups.

2 – Complete the Translation of Static Text in HTML Files

To complete the translation of static data in HTML files, hardcoded text is replaced with translation keys that reference entries in a translation file. This process ensures that all user-facing text is dynamically translated based on the selected language, enabling seamless localization. By centralizing translations, it simplifies updates and supports multi-language capabilities across the application.

3 – Enable Localization within TypeScript Files

To enable localization within TypeScript files, I replaced hardcoded strings with translation keys using TranslateService from @ngx-translate/core. For instance, instead of directly using 'Edit Note', I used this.translateService.instant('labels.heading.Edit Note') to dynamically fetch the appropriate translation. This approach ensures that all user interface text in the TypeScript code is translated based on the user's language preference, supporting a multilingual application.

languages

Related Pull Request

  • [PR-2037] - translate collaterals folder and add missing translations.
  • [PR-2105] - add missed translation for products module.
  • [PR-2108] - create new translate pipe and remove TranslateCatalogPipe
  • [PR-2109] - add translation to manage-data-tables inside system module
  • [PR-2124] - translation of manage hooks.
  • [PR-2134] - add missed translations to html files.
  • [PR-2156] - finish translation of matTooltip in our project.

Enhance look and feel of Mifos X Web App

1 – Redesign customer dashboard page

350949079-4b61d048-4e92-44f6-9155-a8e901eb83d1

2 – add some style to accounting, organization, products and system modules

355435773-14a60946-06ad-41b1-a9a5-8b0d2a4f2a1e.mp4

3 - add new style to our progress bars

358878368-8bc30721-32f3-453b-a4ec-001552348e9e.mp4

Related Pull Request

  • [PR-2164] - add new style to our progress in toolbar.
  • [PR-2159] - add some style to accounting to enhance our user experience.
  • [PR-2150] - add some style to dashboard.

Conclusion

My experience with Google Summer of Code through The Mifos Initiative has been both rewarding and challenging. I've deeply enjoyed expanding my skills and collaborating with dedicated community members to achieve our project goals. Special thanks to RADHA THAKARE, Ed Cable, Alberto and Pushpendra for their constant support and invaluable guidance throughout this journey. Their assistance was crucial in navigating both the technical and collaborative aspects of the project.

Thank You
Regards
Omar Nabil

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment