Back to Projects

School Funding Management Platform

Web application for managing operational school assistance funds.

3 min read
React
Next.js
Chakra UI
TypeScript
React Query
Axios
E-Government

Overview

The School Funding Management Platform is a web application for managing and distributing operational assistance to schools under the Ministry of Religious Affairs of Indonesia. It handles user management, fund allocation, verification, and reporting.

Features

  • Multi-level User Management: Different user roles including central, province, district, executive, and school levels, each with specific permissions and access.
  • Fund Allocation and Distribution: Manages the allocation and distribution of funds to eligible schools based on various criteria.
  • Verification Process: Verification system for submitted documents and fund requests.
  • Reporting and Analytics: Reporting for different administrative levels, including fund utilization, verification status, and overall program progress.
  • Document Management: Users can upload, manage, and verify various documents required for the assistance program.
  • Dashboard and Visualizations: Dashboards with data visualizations for quick insights into program status and progress.
  • Announcement System: A system for publishing and managing announcements for users.
  • Configurable Settings: Administrative controls to configure various system settings and parameters.

Tech Stack

  • React: For the frontend UI.
  • Next.js: For server-side rendering and routing.
  • TypeScript: For type safety.
  • Chakra UI: For UI components.
  • React Query: For server state management and data fetching.
  • Axios: For HTTP requests.
  • React Table: For dynamic tables.
  • React Hook Form: For form handling.
  • File-Saver: For file downloads.
  • Date-fns: For date formatting.
  • React Icons: For icons.

Key Components

  • User Authentication: JWT-based authentication system.
  • Role-based Access Control: Access control based on user roles and permissions.
  • Dynamic Form Generation: Dynamic forms for various data input scenarios.
  • File Upload and Management: File uploads for documents and reports.
  • Data Visualization: Charts and graphs for data representation.
  • Pagination: Custom pagination for large datasets.
  • Modular Component Structure: Components organized in a modular fashion for maintainability.

Lessons Learned

  • Scalability: Designing a system to handle data for many schools across different administrative levels required careful planning.
  • User Experience: The interface needed to work for users with varying levels of technical expertise.
  • Data Integrity: Accurate fund allocation and distribution depends on solid verification at each step.
  • Performance: Efficient data fetching and state management strategies were needed for handling large datasets.
  • Security: Strict access controls and data protection are critical for sensitive financial information.
  • Flexibility: The system needed to adapt to changing regulations and requirements in government assistance programs.

Screenshots

/projects/madrasah-bos/madrasah-bos-1.png
/projects/madrasah-bos/madrasah-bos-2.png