| Build a responsive single-page web app called "Deraah Product API Tester" that allows users to enter a SKU and fetch product details from Deraah’s live API. The app should include a backend route /api/product that accepts a sku query parameter, validates that it's not empty, and sends a GET request to https://www.deraahstore.com/on/demandware.store/Sites-deraah_SA-Site/ar_SA/Vdimsa-ProductDetails?SKU={sku}. If the sku is missing, return HTTP 400 with { success: false, message: "Missing SKU" }, and if the API response has "success": false, return HTTP 404 with the error message. The frontend should feature a centered layout with a title “Deraah Product API Tester”, a subtitle “Enter a SKU to fetch live product information”, a labeled input field for the SKU, and a “Fetch Product” button. Upon submission, the app should call /api/product?sku={enteredSKU}, show a loading spinner, and display a product card if successful—showing the product name, short description, price with currency, availability badge (if available: true), and the first product image. If there’s an error, show a red alert box with the message “Product not found. Please check the SKU and try again.” The design should be responsive and mobile-friendly, using clean UI components such as cards, inputs, buttons, badges, spinners, and alerts, with a white background, blue or purple buttons, and red error messaging. Use shadows, spacing, and transitions for a smooth, professional UX. Use test SKU 10411131442000-8050 for validation. |
