Contributor: Craig Rosario GitHub LinkedIn
Organization: The Mifos Initiative
Project Link: mifos-x-web-app-react
Mentors: Aleksandar Vidakovic
- Mifox X React Web App Repository: mifos-x-web-app-react
- Mifox X React Web App Jira: JIRA
The legacy Mifos X Web App is built in Angular with Material Design. The goal of this project was to migrate the UI to a modern React + TypeScript stack using ShadCN UI + Tailwind for styling, and the OpenAPI-generated Fineract client for backend integration.
The main aim of the project was to create a more modular, maintainable, and modern UI and a structure for easier contribution and long-term sustainability.
- Migrate core modules of the Mifos X Angular web app into a React-based architecture.
- Establish a consistent design system using ShadCN UI and reusable components.
- Integrate Apache Fineract backend using the OpenAPI-generated TypeScript client.
- Maintain a clean project structure (modular pages, components, state management).
Over the coding period, I implemented the React version of Mifos X web app, building reusable UI components, connecting the frontend to the Apache Fineract Backend, and replicating the modules and structure from the Angular app.
-
Home and Sidebar Page
- Login page with backend integration.
- Sidebar page which includes Dashboard, Navigation, Checker Inbox and Tasks, Individual collection sheet, Notifications, Frequent Postings, Journal Entries, Chart of Accounts.
- Profile & Settings pages.
-
Admin Module
- Admin Users Pages.
- Admin Organization Pages (Manage Offices, Funds, Loans etc.).
- Admin System Pages. (Manage Jobs, Hooks etc.)
- Admin Products Pages. (Loan Product, Saving Product, Share Product etc.)
- Admin Template Pages.
-
Reports Module
- Client Report Pages.
- Loan Report Pages.
- Saving Report Pages.
- Fund Report Pages.
- Accounting Report Pages.
-
Accounting Module
- Completion of the Accounting Module which include pages such as Closing Entries, Accounting Rules, Accruals etc.
-
Institution Module
- Creation of Clients, Groups, and Centers module.
- Sub-menu and Sub-pages of these modules.
- Creation of Loan Account, Saving Account and Share Account and subpages based on Account status.
-
Documentation
- Frequent Comments are present in each file for future development.
- Also files such as Readme.md, Contributing.md and Issues.md have been created.
| PR's | Description |
|---|---|
| PR: #1 | Initial Files |
| PR: #3 | Login and Home |
| PR: #4 | Chart of Accounts |
| PR: #6 | Journal Entry |
| PR: #7 | Frequent Postings |
| PR: #8 | Notifications |
| PR: #9 | Dashboard |
| PR: #10 | Individual collection sheet |
| PR: #11 | Navigation |
| PR: #12 | Checker Inbox and Tasks |
| PR: #13 | Navbar, Profile, Settings, Not found |
| PR: #14 | Accounting Main Page |
| PR: #15 | Accounting Module |
| PR: #16 | Reports Module |
| PR: #17 | Admin Users Module |
| PR: #18 | Admin Templates Module |
| PR: #19 | Admin Organization Module |
| PR: #20 | Admin Products Module |
| PR: #21 | Admin System Module |
| PR: #22 | Institution Centers Module |
| PR: #23 | Institution Groups Module, Savings Products, Loan Products |
- Core modules are migrated and functional with backend integration.
- The UI is consistent with ShadCN components and Tailwind styling.
- Project structure is modular and maintainable.
- All merged code is in the
devbranch. Releases will be merged in themainbranch. - Certain OpenAPI client generator issues need to be fixed on the fineract side.
The React UI is built with modular, reusable components under src/components/ui (ShadCN components) and src/components/custom (custom components).
These can be imported and reused anywhere in your pages or layouts.
For example, here is the full flow of using the AppSelect component in the layout to fetch account types from the Fineract backend and render a dropdown.
// 1. Imports
import { useEffect, useState } from "react"
import AppSelect from "@/components/custom/select/AppSelect"
import { GeneralLedgerAccountApi, type GetGLAccountsTemplateResponse } from "@/fineract-api"
import { getConfiguration } from "@/lib/fineract-openapi"
// 2. API Setup
const glApi = new GeneralLedgerAccountApi(getConfiguration())
// 3. Component
const ExampleAppSelect = () => {
// state
const [template, setTemplate] = useState<GetGLAccountsTemplateResponse | null>(null)
const [selectedType, setSelectedType] = useState<string>("")
// 4. Fetch data with useEffect
useEffect(() => {
const fetchTemplate = async () => {
try {
const res = await glApi.retrieveNewAccountDetails()
setTemplate(res.data)
} catch (err) {
console.log("Failed to fetch GL account template", err)
}
}
fetchTemplate()
}, [])
// 5. Render and use AppSelect on the page
return (
<div className="min-h-screen bg-gray-50 dark:bg-zinc-900 p-6">
<AppSelect
selectLabel="Account Type"
selectValue={selectedType}
selectOnChange={(value) => setSelectedType(value)}
selectPlaceholder="Select Type"
selectOptions={
(template?.accountTypeOptions || [])
.filter((opt) => opt.id !== undefined)
.map((opt) => ({
id: opt.id!,
name: opt.value!
}))
}
/>
</div>
)
}
export default ExampleAppSelect- Add pages that are inaccessible on the main web app.
- Add pages that are incomplete due to faulty OpenAPI client generator.
- Addition of missing data once the backend is fixed.
- Add end-to-end testing for reliability.
- Add support for multiple languages.
- Future enhancements to make the UI even better.
- Large Number of Pages: Migrating over 100 screens with different integrations.
- Fineract OpenAPI Client: Some fields were missing/incorrect in the generated client.
- Modern frontend architecture (React + TypeScript + ShadCN + Tailwind).
- Backend API integration using OpenAPI clients.
- Codebase structuring for maintainability in large projects.
- Collaboration in open source – working with mentors and the community.
Overall, Google Summer of Code 2025 has been an incredible experience. I not only contributed significantly to the new Mifos X React web app but also grew immensely as a developer. Learning how to work in a collaborative environment and large-scale open source codebases.
I would like to thank my Mentor Aleksandar Vidakovic for his guidance and feedback throughout the project. I am also grateful to Ed Cable, David Higgins as well as the Mifos community for their support during the summer.
Finally, I would like to thank the Google Summer of Code team for making this summer an incredible learning experience.
Thank You
Regards
Craig Rosario