Integrating the book editing and deletion functionality into the UI required adding **Edit** and **Delete** buttons next to each book entry in the **BookTable**. I chose to use a **Material UI dialog** for deletions, ensuring users confirm before deleting a book. For editing, I opted for a separate **EditBook** page where users can search for a book by ID, load its details, and modify the fields. This design provides clarity and prevents accidental modifications.
The most challenging part was ensuring that **state updates correctly** after an edit or deletion. Initially, changes did not immediately reflect on the UI because the component didn’t re-fetch the updated data. I solved this by adding state updates after each successful operation.
Refactoring the UI to use **Material UI** was mostly smooth, but there were some issues with styling conflicts and certain components not behaving as expected.
For example, `
Despite these small challenges, **Material UI improved the app’s overall look and feel significantly**, making it look modern and polished with minimal effort.
Adding the **PUT /books/:id** endpoint was relatively straightforward because it followed a similar structure to the existing **POST** endpoint. However, implementing validation to ensure the book exists before updating it was crucial to prevent errors. The biggest issue I faced was handling **404 errors properly** in the UI so that users see a clear "Book not found" message instead of a generic error.
Writing tests for the editing endpoint was easier after having written tests for the **POST** endpoint. The logic was similar, and I could reuse validation strategies from previous work.
This project helped me strengthen my understanding of **React state management**, **Material UI components**, and **RESTful API design**. The biggest takeaway was how **important UI feedback is** for user experience—ensuring error messages and success states were properly displayed made a big difference.
Overall, while there were some initial challenges in integrating Material UI and handling updates properly, the end result was a **well-structured, functional, and visually polished** application.