Templates and other code - uttamsai/digital-art-supplies GitHub Wiki

Templates and other code

Third-party templates

No third-party page template or Bootstrap example theme was used. The layout and styling were built from scratch using Bootstrap 5's utility classes and components (grid, navbar, forms, buttons, pagination) directly — no copied template files.

Library used: Bootstrap 5 — grid system, navbar, forms, buttons, pagination components, and utility classes. No other third-party UI library/template was used.

Product data and images

Real drawing-tablet listings can't be scraped from Amazon directly (its robots.txt blocks it), so the catalog in src/data/products.json was built from public research — manufacturer sites and independent buyer's-guide comparisons of Wacom, Huion, XP-Pen, GAOMON, and Xencelabs tablets. Model names and brands are real; exact prices/specs are approximate and illustrative, not live pricing.

27 of 28 products' images are hotlinked directly from each manufacturer's own official site (wacom.com/estore.wacom.com, huion.com, xp-pen.com, gaomon.net, xencelabs.com). One product, the GAOMON PD1560, uses a generated placeholder because its product page renders its photo gallery entirely in JavaScript, with no static image URL to extract (product page).

AI-assistance disclosure

This project was developed with assistance from Claude (Anthropic), an AI coding assistant, used as a pair-programming tool throughout development. Claude:

  • Researched real drawing-tablet models, brands, and specs from manufacturer sites and independent comparison articles to build the products.json catalog
  • Generated the placeholder SVG product artwork used as a fallback image
  • Sourced real product photo URLs for 27 of 28 products directly from each manufacturer's official website
  • Wrote the client-side form validation logic in CreateAccountView.jsx and AccountView.jsx
  • Wrote the image-fallback utility in src/utils/images.js that swaps a hotlinked product photo back to the generated placeholder if it ever fails to load
  • Diagnosed and fixed a Vite asset-path bug (base: './' in vite.config.js) needed for the site to work when hosted under a GCS bucket subpath

I reviewed the generated code, tested it in the browser, and contributed to the overall UI design and layout, helped set up the basic shop structure, organized and filled out the product data in the JSON file, and worked on the multiple routed views and navigation between the different sections of the site.