2021 - 2023
简介
Micro Frontends Implementation for Employee Task Monitoring Application with React & Webpack
The goal of the final project was to analyze, design, and implement Micro Frontends in HR applications tailored to employees. The website was built using the React.js framework and a module federation approach with Webpack. The application operates through a Micro Frontend mechanism rooted in Component Based Architecture (CBA), separating it into a main application (Main App) and subordinate applications (Child App). Basic components were developed in the main app, while features such as task lists, adding tasks, changing tasks, and deleting tasks were developed in child apps.
Key responsibilities included:
- Implementing the Micro Frontend design to facilitate accelerated and scalable development.
- Ensuring integration, performance, accessibility, and adherence to best practices.
The system's performance was evaluated using Lighthouse, achieving a good rating of 86. Availability was tested with Pingdom, confirming 100% uptime. Security was assessed using OWASP ZAP and Burp Suite, with the system deemed secure at a medium level. Integration capabilities were successfully tested, and the system handled a user spike of 11,000 new users within 30 days without issues. The UI/UX evaluation yielded an overall score of 83%, with high marks for consistency, easy reversal of actions, and short-term memory load. The Micro Frontend Architecture evaluation scored 75%, highlighting good performance in loading speed and responsiveness, though accessibility could be improved.
Suggestions from users at Telco Company for future development include enhancing performance for smoother operation on low-spec devices and integrating with third-party services like Google Calendar for better task monitoring and reminders. These improvements aim to enhance overall usability and user satisfaction.