Back to Projects

Project Management Platform

A project management solution for Ministry of Religious Affairs of Indonesia.

2 min read
React
Next.js
Chakra UI
TypeScript
Project Management
E-Government
Jotai

Overview

The Project Management Platform is a web application for managing projects at the Ministry of Religious Affairs of Indonesia. It handles event planning, participant management, reimbursement processing, and reporting.

Features

  • User Authentication: Secure authentication and authorization using NextAuth.js.
  • Dashboard: Role-specific dashboards for administrators, organizers, and participants.
  • Event Management: Create, edit, and manage various types of events (BIMTEK, FGD, KONSINYERING).
  • Participant Management: Manage event participants including registration, attendance tracking, and document uploads.
  • Reimbursement Processing: Reimbursement workflow for event participants, including document uploads and verification.
  • QR Code Integration: QR codes for attendance tracking and document verification.
  • Reporting: Reports on events, participants, and financial aspects.
  • Multi-role Support: Different user roles (ADMIN, PANITIA, PIC, PESERTA, EXECUTIVE) with role-specific features.
  • Biodata Management: Users can manage their personal and professional information.
  • File Upload and Management: File uploads for assignments, materials, and reimbursement documents.
  • External System Integration: Integrates with external systems like AMAN for financial processing.

Tech Stack

  • React: For the frontend UI.
  • Next.js: For server-side rendering, routing, and API routes.
  • TypeScript: For type safety.
  • Chakra UI: For UI components.
  • Jotai: For state management.
  • React Query: For server state management and data fetching.
  • Axios: For HTTP requests.
  • Zod: For validation.
  • React Hook Form: For form handling.
  • Cypress: For end-to-end testing.

Lessons Learned

  • Complex State Management: Managing state across multiple user roles and features using Jotai and React Query required careful architecture.
  • TypeScript Integration: TypeScript caught many bugs early in a codebase this size and made refactoring safer.
  • Modular Architecture: Designing the codebase to accommodate various features without tight coupling was important for maintainability.
  • Performance: Handling large datasets and complex UI interactions required optimization at multiple levels.
  • External Integration: Integrating with external systems and keeping data consistent across modules was one of the harder challenges.
  • Testing: Testing a multi-role application with Cypress required building out role-specific test fixtures.