Add responsive web UI for product store with CRUD operations and category management

[Copilot]

Implements a web-based interface for the product store demo, currently backend-only. UI provides full product management (create, read, update, delete) with responsive design and accessibility features.

Implementation

Frontend (vanilla JS/HTML/CSS)

• Single-page application at / route
• Product cards with inline edit/delete actions
• Modal-based editing workflow
• Event delegation for XSS prevention
• URL encoding for all API requests
• HTML escaping for user content
• Category dropdown with 9 hardware store categories

Backend

• Added index route serving HTML template
• Enabled CORS via Flask-CORS
• Extended product schema to include category field
• Updated POST and PUT endpoints to handle category data

Accessibility

• WCAG-compliant ARIA labels and semantic HTML
• Keyboard navigation support
• prefers-reduced-motion media query support
• Mobile-first responsive design (375px to desktop)

Security

• Zero CodeQL vulnerabilities
• CSS.escape() for safe selectors
• No inline event handlers
• Proper input sanitization

Category Management

• Dropdown with 9 predefined categories:
  • Electrical
  • Garden & Outdoor
  • Hand tools
  • Hardware
  • Lumber & Building materials
  • Paint & Finishes
  • Plumbing
  • Power tools
  • Storage & organization
• Category displayed as styled badge on product cards
• Category editable through both add and edit forms

Screenshots

Form with Category Dropdown

Product Card with Category Badge

Edit Modal with Category

Mobile (375px)

Files Changed

• src/templates/index.html - UI template with category dropdown
• src/static/css/style.css - Responsive styles and category badge styling
• src/static/js/app.js - CRUD operations with category handling
• src/app.py - Index route + CORS + category field support
• requirements.txt - Added Flask-CORS
• src/readme.md - Updated docs

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Add a User Interface (UI) to the Product Store Demo Application</issue_title>
<issue_description>Description:
The current product-store-demo application lacks a user-facing interface and is primarily backend-focused. To improve usability and accessibility, a web-based UI should be implemented. This UI will allow users to interact with the product store, view available products, and perform relevant actions (such as adding, editing, or deleting products) through a modern, responsive web interface.

Acceptance Criteria:

• A web-based UI is accessible via the application’s main route (e.g., /).
• The UI displays a list of products retrieved from the backend.
• Users can add new products through a form.
• Users can edit and delete existing products.
• The UI is responsive and works on both desktop and mobile devices.
• All user actions are reflected in the backend (i.e., changes persist and are visible on refresh).
• Error and loading states are handled gracefully.
• The UI uses a modern framework (e.g., React, Vue, or plain HTML/CSS/JS if preferred).

Important Notes:

• The backend logic should remain unchanged; the UI should interact with existing endpoints.
• Follow best practices for accessibility (WCAG) and responsive design.
• If using a frontend framework, document setup steps in the project README.
• Ensure CORS and API integration are handled securely.
• Coordinate with the team to confirm API endpoints and data formats.
• Use the playwright MCP sever to take screenshots of the working solution and attach them to the pull request as a comment
• Do not add or include any products into the data. Use "test item" and "test description" for the test data to be shown in any screenshots.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Add a User Interface (UI) to the Product Store Demo Application #2

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[liamchampton]

@copilot Also add a category drop down list with the following fiel entries. Show this on each product entry on the form.

Electrical
Garden & Outdoor
Hand tools
Hardware
Lumber & Building materials
Paint & Finishes
Plumbing
Power tools
Storage & organization

[Copilot]

@copilot Also add a category drop down list with the following fiel entries. Show this on each product entry on the form.

Electrical...

Added category dropdown with all 9 categories to both the Add Product form and Edit modal. Categories are displayed as styled badges on product cards. Changes committed in 1812551.

Form with Category Dropdown

Product Card with Category Badge

Edit Modal with Category