Map of Defect
Project overview
Internal process management software for Mapna Group in order to migrate from traditional paperwork toward digitalization and better data management.
The role of this app is to streamline the whole process of a engine repair including receiving the parts from clients, creating the contracts, managing jobcards and staff assignment, part inspection, and tracking the repair process.
It optimizes their rigid process of engine parts repair and to keep track of their data in a centralized and structured way.
My Role
- Frontend developer
- System design
- Project management
App Features:
- Dark mode / Light mode
- Customizable theme colors
- Customizable fonts
- Live image editing
- Dynamic draggable defect icons on engine image
- Notifications
- Cached data
- Role based dynamic UI
- Export page as image or spreadsheet
- PWA
- Responsive design
Challenges
In order to create a centralized software for Mapna, it was necessary to redesign their internal business processes. The most challenging part was creating a new process while being faithful to their traditional workflows and their resistance to change.
This project had complex and heavy forms with dynamic nested fields that needed to be initially filled with external data. Some fields also had to be disabled or hidden to certain roles or after a certain point of time in the process.
Another challenging part for me was the engine part image that was connected to dynamic nested form fields where each dynamically nested input section in the form must have added a draggable icon on that image. the positions of those icons also needed to be saved to and received from backend.
I forced myself to learn and use typescript for this project. now I don't even wanna think about doing something in pure JS. Going back from typescript is impossible and I'm glad I started using it back then.
I had never used react before this project. I didn't even know how it looked like. That's why I'm very proud of myself for doing this project. I handled this very fast and efficient while learning react and its ecosystem.