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
