School Self-Evaluation Platform

A comprehensive self-evaluation platform for schools under the Ministry of Religious Affairs of Indonesia.

Friday 1 December 2023
React
Next.js
Chakra UI
TypeScript
Education
E-Government
Jotai

Overview

The School Self-Evaluation Platform is a web-based application designed to facilitate self-evaluation processes for Islamic schools under the Ministry of Religious Affairs of Indonesia. It provides a centralized platform for madrasahs to assess their performance, plan improvements, and report their progress to higher authorities.

Features

  • User Authentication: Implements secure user authentication and authorization using NextAuth.js with role-based access control.
  • Multi-role Support: Supports different user roles (Madrasah Staff, Madrasah Principal, Supervisor, District/City Admin, Provincial Admin, Central Admin) with role-specific functionalities.
  • Dashboard: Provides role-specific dashboards with summaries and visualizations of evaluation data.
  • Self-Evaluation Process: Allows madrasahs to complete a structured self-evaluation questionnaire covering various aspects of school performance.
  • File Upload: Supports document uploads as evidence for evaluation responses.
  • Activity Planning: Enables madrasahs to plan and prioritize improvement activities based on evaluation results.
  • Approval Workflow: Implements a multi-step approval process involving school principals and supervisors.
  • Historical Data: Maintains historical evaluation data for year-on-year comparisons.
  • Reporting: Offers comprehensive reporting capabilities for different administrative levels.
  • Data Visualization: Utilizes charts and graphs to present evaluation results and progress.
  • Integration with External Systems: Integrates with other systems like E-RKAM for budget planning.

Tech Stack

  • React: The frontend is built using React, providing a component-based architecture for the user interface.
  • Next.js: Leverages Next.js for server-side rendering, routing, and API routes.
  • TypeScript: Utilizes TypeScript for enhanced type safety and improved developer experience.
  • Chakra UI: Employs Chakra UI for consistent and customizable UI components.
  • Jotai: Uses Jotai for lightweight and scalable state management across the application.
  • React Query: Implements React Query for efficient server state management and data fetching.
  • Axios: Utilizes Axios for making HTTP requests to the backend API.
  • Zod: Employs Zod for runtime type checking and form validation.
  • React Hook Form: Uses React Hook Form for efficient form handling and validation.
  • Chart.js: Implements Chart.js for data visualization.
  • Cypress: Utilizes Cypress for end-to-end testing of the application.
  • Docker: Uses Docker for containerization and deployment.
  • Sentry: Integrates Sentry for error tracking and performance monitoring.

Lessons Learned

This project has provided valuable insights into:

  • Complex Workflow Management: Implementing a multi-step evaluation and approval process across different user roles.
  • Hierarchical Data Handling: Managing and aggregating data at various administrative levels (school, district, province, national).
  • Performance Optimization: Implementing strategies to handle large datasets and complex calculations efficiently.
  • User Experience for Diverse Users: Designing intuitive interfaces for users with varying levels of technical proficiency.
  • Data Integrity and Security: Ensuring the confidentiality and integrity of sensitive educational data.
  • Scalability: Designing the system to handle a large number of schools and users across the country.
  • Offline Support Considerations: Addressing challenges related to internet connectivity issues in remote areas.
  • Localization: Implementing features to support the Indonesian language and local educational context.
  • Integration with Legacy Systems: Developing strategies to integrate with existing government educational systems.

Screenshots

/projects/edm/edm-1.jpeg
/projects/edm/edm-2.jpeg
/projects/edm/edm-3.jpeg