Web-Based Student Monitoring Application Development Using a System Design Approach

Abstract

This study aims to design and develop a web-based student monitoring application under a Design System approach. This application is offered as a solution to problems in monitoring student academic activity, i.e., time delay in information, non-centralized data, and limited real-time visualization of study progress. This system is developed with ReactJS, ExpressJS, and Node.js technology supported by containerization with Docker and traffic management with Nginx. To make the development and update process automatic and efficient, CI/CD pipeline is used with GitHub Actions. The Design System approach allows the formation of a consistent, structured, and easy-to-maintain user interface, as well as improving readability and user experience in the long term. This application is equipped with some main features, i.e., role-based login (admin, lecturer, student), academic progress dashboard, task notification system, time management suggestion, and API integration for direct academic data synchronization. Pilot testing was conducted by involving students as well as lecturers as users of the system and concluded that this application was able to facilitate the effectiveness of academic communication and make monitoring of student performance more convenient. This system was also proven to be responsive across different devices as well as easy to use. With its flexibility and scalability, this application is worthy of being implemented widely in higher education institutions in Indonesia.