Map of Defect

This project was made for mapna to optimize their currently rigid process of engine parts repair and to keep track of their data in a centralized and structured way.

This is a very special project for me. I've always been afraid of typescript and react and I had this mindset:

I learned react under pressure for this project and I also forced myself to use typescript. 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 still hate react though 😂.

This was my very first project with react. 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 a lot of related libraries at the same time.

One of the key resources that saved me in this project was Mantine. I used it's theme features, ui components, hooks, modal system, notification system and most importantly its form management extension. This project had complex and heavy forms with dynamic nested fields that needed to be initially filled with backend data. Some fields also had to be disabled or hidden to certain roles or after a certain point of time.

The most 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 also used axios for data fetching. It's interceptor feature is amazing! This is also one of those tools that I can't live without in any project.

And I handled global state management with Zustand. Boo React Context.. Boo...