🧠 Technical Challenges & Solutions
- Handling Asynchronous Operations Challenge: Ensuring the UI remains responsive and provides feedback while waiting for API data.
Solution: Implemented async/await for cleaner, readable code and managed a "Loading State" by toggling a spinner element before and after the fetch request.
- Unified Form for Create & Update Challenge: Using a single modal form for two different operations (POST and PUT).
Solution: Used a hidden input field (productId) to track the state. If the ID is present, the app triggers a PUT request; otherwise, it defaults to a POST request to add a new item.
- Dynamic UI Syncing Challenge: Removing items from the list without a full page refresh upon deletion.
Solution: Verified the API response status was exactly 200 before using JavaScript's .remove() method to target the specific table row ID in the DOM.
🛠 Final Project Structure The project follows a clean Single Page Application (SPA) architecture:
index.html: Defines the semantic structure using HTML5 and the responsive layout with Bootstrap 5.
script.js: Contains the core logic using Vanilla JavaScript to simulate CRUD operations via the DummyJSON API.
style.css: Custom styling for the dashboard sidebar, table, and image previews.