Templates and other code - tonytienvuong/Project-1-Bay-Kicks GitHub Wiki

Templates and other code

Everything used from outside this project, cited in IEEE format.

Libraries used

All declared in package.json and installed from npm. Nothing is loaded from a CDN.

  1. React 19.2
  2. React DOM 19.2
  3. Bootstrap 5.3.8
  4. Vite 8.3
  5. oxlint 1.81
  6. @vitejs/plugin-react 6.1

Citations

[1] Meta Platforms, Inc., "React," react.dev. [Online]. Available: https://react.dev/. [Accessed: Oct. 2, 2026].

[2] Bootstrap Team, "Bootstrap 5.3 Documentation," getbootstrap.com. [Online]. Available: https://getbootstrap.com/docs/5.3/. [Accessed: Oct. 2, 2026].

[3] Bootstrap Team, "Navbar — Bootstrap 5.3," getbootstrap.com. [Online]. Available: https://getbootstrap.com/docs/5.3/components/navbar/. [Accessed: Oct. 2, 2026].

[4] Bootstrap Team, "Grid system — Bootstrap 5.3," getbootstrap.com. [Online]. Available: https://getbootstrap.com/docs/5.3/layout/grid/. [Accessed: Oct. 2, 2026].

[5] Vite Team, "Vite — Next Generation Frontend Tooling," vite.dev. [Online]. Available: https://vite.dev/. [Accessed: Oct. 2, 2026].

[6] W3C, "Markup Validation Service," validator.w3.org. [Online]. Available: https://validator.w3.org/. [Accessed: Oct. 2, 2026].

How the libraries are used

  1. Bootstrap supplies the grid, navbar, buttons, forms and spacing utilities for every page. It is imported once in src/main.jsx. Its JavaScript handles the navbar collapsing to a hamburger on small screens, so none was written for that.
  2. React supplies components, props, state and event handling. useState holds the cart in App.jsx.
  3. Vite builds the project. vite.config.js sets base: './' so the built page refers to its files relatively, which is what lets it work when served from a Cloud Storage bucket rather than a domain root.
  4. The project started from the Vite React template, created with npm create vite@latest -- --template react. Everything under src/components/, plus src/App.jsx, src/index.css and src/App.css, was written for this project.

Product images

The 25 photographs come from Wikimedia Commons and were resized to 900 x 900. Each one's author, licence and source page is recorded in public/images/CREDITS.json. Licences: 15 CC BY-SA 4.0, 6 CC0, 2 CC BY 2.0, and 2 CC BY-SA 3.0. The CC0 images need no credit; the others are credited in that file.

Citations

All 25 entries:

[1] Petar Milošević, "Mizuno Wave Ibuki 2," Wikimedia Commons. [Online]. Available: https://commons.wikimedia.org/wiki/File%3AMizuno_Wave_Ibuki_2.jpg. [Accessed: Oct. 2, 2026]. Licensed under CC BY-SA 4.0. [2] Petar Milošević, "Brooks Ghost 14 GTX," Wikimedia Commons. [Online]. Available: https://commons.wikimedia.org/wiki/File%3ABrooks_Ghost_14_GTX.jpg. [Accessed: Oct. 2, 2026]. Licensed under CC BY-SA 4.0. [3] HI 622, "Nike air Force 1 white on white," Wikimedia Commons. [Online]. Available: https://commons.wikimedia.org/wiki/File%3ANike_air_Force_1_white_on_white.jpg. [Accessed: Oct. 2, 2026]. Licensed under CC BY-SA 4.0. [4] Neomicro, "Koyo Bear Running Shoe," Wikimedia Commons. [Online]. Available: https://commons.wikimedia.org/wiki/File%3AKoyo_Bear_Running_Shoe.jpg. [Accessed: Oct. 2, 2026]. Licensed under CC BY-SA 4.0. [5] Ayo Ogunseinde armedshutter, "Houston sneakers (Unsplash)," Wikimedia Commons. [Online]. Available: https://commons.wikimedia.org/wiki/File%3AHouston_sneakers_%28Unsplash%29.jpg. [Accessed: Oct. 2, 2026]. Licensed under CC0. [6] Peachyeung316, "Red Rabbit Sneaker from HM," Wikimedia Commons. [Online]. Available: https://commons.wikimedia.org/wiki/File%3ARed_Rabbit_Sneaker_from_HM.jpg. [Accessed: Oct. 2, 2026]. Licensed under CC BY-SA 4.0. [7] Petar Milošević, "Asics Gel-Cumulus 22," Wikimedia Commons. [Online]. Available: https://commons.wikimedia.org/wiki/File%3AAsics_Gel-Cumulus_22.jpg. [Accessed: Oct. 2, 2026]. Licensed under CC BY-SA 4.0. [8] Tdorante10, "Stanton Street Courts td (2018-12-31) 39 - Nike Huarache 2K4 2016," Wikimedia Commons. [Online]. Available: https://commons.wikimedia.org/wiki/File%3AStanton_Street_Courts_td_%282018-12-31%29_39_-_Nike_Huarache_2K4_2016.jpg. [Accessed: Oct. 2, 2026]. Licensed under CC BY-SA 4.0. [9] Hermes Rivera hermez777, "Nike ready to ball (Unsplash)," Wikimedia Commons. [Online]. Available: https://commons.wikimedia.org/wiki/File%3ANike_ready_to_ball_%28Unsplash%29.jpg. [Accessed: Oct. 2, 2026]. Licensed under CC0. [10] Petar Milošević, "Reebok Royal Glide Ripple Clip shoe," Wikimedia Commons. [Online]. Available: https://commons.wikimedia.org/wiki/File%3AReebok_Royal_Glide_Ripple_Clip_shoe.jpg. [Accessed: Oct. 2, 2026]. Licensed under CC BY-SA 4.0. [11] Jacek Halicki, "2023 Adidas Yeezy 350 V2 EF2905 (1)," Wikimedia Commons. [Online]. Available: https://commons.wikimedia.org/wiki/File%3A2023_Adidas_Yeezy_350_V2_EF2905_%281%29.jpg. [Accessed: Oct. 2, 2026]. Licensed under CC BY-SA 4.0. [12] Daderot, "Garrison high-top sneakers, 1940, US Army, manufacturer unknown - Bata Shoe Museum - DSC00771.JPG," Wikimedia Commons. [Online]. Available: https://commons.wikimedia.org/wiki/File%3AGarrison_high-top_sneakers%2C_1940%2C_US_Army%2C_manufacturer_unknown_-_Bata_Shoe_Museum_-_DSC00771.JPG. [Accessed: Oct. 2, 2026]. Licensed under CC0. [13] Daderot, "Perfection high-top sneakers, 1900-1929 - Bata Shoe Museum - DSC00727.JPG," Wikimedia Commons. [Online]. Available: https://commons.wikimedia.org/wiki/File%3APerfection_high-top_sneakers%2C_1900-1929_-_Bata_Shoe_Museum_-_DSC00727.JPG. [Accessed: Oct. 2, 2026]. Licensed under CC0. [14] Tdorante10, "Stanton Street Courts td (2019-02-26) 34 - Nike Kobe A.D. 2017," Wikimedia Commons. [Online]. Available: https://commons.wikimedia.org/wiki/File%3AStanton_Street_Courts_td_%282019-02-26%29_34_-_Nike_Kobe_A.D._2017.jpg. [Accessed: Oct. 2, 2026]. Licensed under CC BY-SA 4.0. [15] TanSenpai from Philadelphia, United States, "Nike SB Dunk High MF Doom," Wikimedia Commons. [Online]. Available: https://commons.wikimedia.org/wiki/File%3ANike_SB_Dunk_High_MF_Doom.jpg. [Accessed: Oct. 2, 2026]. Licensed under CC BY 2.0. [16] TanSenpai from Philadelphia, United States, "Nike SB Dunk High MF Doom edited," Wikimedia Commons. [Online]. Available: https://commons.wikimedia.org/wiki/File%3ANike_SB_Dunk_High_MF_Doom_edited.jpg. [Accessed: Oct. 2, 2026]. Licensed under CC BY 2.0. [17] Nike, "Paar sneakers, Nike, Air Max, objectnr 91282-1-2.JPG," Wikimedia Commons. [Online]. Available: https://commons.wikimedia.org/wiki/File%3APaar_sneakers%2C_Nike%2C_Air_Max%2C_objectnr_91282-1-2.JPG. [Accessed: Oct. 2, 2026]. Licensed under CC BY-SA 3.0. [18] Onitsuka, "Paar sneakers, Onitsuka, Tiger, objectnr 91283-1-2.JPG," Wikimedia Commons. [Online]. Available: https://commons.wikimedia.org/wiki/File%3APaar_sneakers%2C_Onitsuka%2C_Tiger%2C_objectnr_91283-1-2.JPG. [Accessed: Oct. 2, 2026]. Licensed under CC BY-SA 3.0. [19] Tdorante10, "Hudson River Park td (2019-01-29) 059 - Pier 25 Basketball Court, Nike LeBron Soldier IX," Wikimedia Commons. [Online]. Available: https://commons.wikimedia.org/wiki/File%3AHudson_River_Park_td_%282019-01-29%29_059_-_Pier_25_Basketball_Court%2C_Nike_LeBron_Soldier_IX.jpg. [Accessed: Oct. 2, 2026]. Licensed under CC BY-SA 4.0. [20] Deansfa, "On Cloudflow running shoes," Wikimedia Commons. [Online]. Available: https://commons.wikimedia.org/wiki/File%3AOn_Cloudflow_running_shoes.jpg. [Accessed: Oct. 2, 2026]. Licensed under CC BY-SA 4.0. [21] LeDroider, "Adidas Top Ten," Wikimedia Commons. [Online]. Available: https://commons.wikimedia.org/wiki/File%3AAdidas_Top_Ten.jpg. [Accessed: Oct. 2, 2026]. Licensed under CC0. [22] Tiia Monto, "Running shoes," Wikimedia Commons. [Online]. Available: https://commons.wikimedia.org/wiki/File%3ARunning_shoes.jpg. [Accessed: Oct. 2, 2026]. Licensed under CC BY-SA 4.0. [23] Fafaha, "Dad-sneaker-bild," Wikimedia Commons. [Online]. Available: https://commons.wikimedia.org/wiki/File%3ADad-sneaker-bild.jpg. [Accessed: Oct. 2, 2026]. Licensed under CC BY-SA 4.0. [24] LeDroider, "Adidas SL 72 OG," Wikimedia Commons. [Online]. Available: https://commons.wikimedia.org/wiki/File%3AAdidas_SL_72_OG.jpg. [Accessed: Oct. 2, 2026]. Licensed under CC0. [25] Aw1805, "On Cloud Running Shoes," Wikimedia Commons. [Online]. Available: https://commons.wikimedia.org/wiki/File%3AOn_Cloud_Running_Shoes.jpg. [Accessed: Oct. 2, 2026]. Licensed under CC BY-SA 4.0.

How the code works

The code is explained on the other wiki pages, each covering the part it demonstrates.

  1. The home page explains the React side: how the cart is held in App.jsx with useState, why the count and subtotal are worked out from it rather than stored, how props pass data down, and how .map() builds the product grid and the cart lines.
  2. The mobile ready demo page explains the Bootstrap side: the navbar class by class, the responsive grid columns, and the custom media queries.
  3. The createAccount demo page explains the validation: what validate() returns, why the form carries noValidate, and how each error reaches its own field.

The JavaScript written for this project, rather than supplied by a library, is the cart state in App.jsx with its add, increase, decrease and remove handlers, and the validation logic in the two account views.

AI tools used

I used Claude Code, Anthropic's command-line coding agent [26], on this project. It was used in four distinct ways.

  1. Syntax reference and review while I wrote the components. I wrote the JSX myself, but the assistant supplied short references on the syntax each component needed (how a props list is written, how a form submit handler works) and reviewed each file against the spec before I moved on. My work: ProductCard, ProductDetailView, CreateAccountView.

  2. Helping build and edit files. ShopView (pagination), CartView and CartItem, the cart wiring in App.jsx, the two CSS files, products.json, the image processing, and the project setup. Files edited with AI assistance: ProductCard, ProductDetailView, CreateAccountView, AccountView, CartItem, CartView.

  3. Verification. Every file was checked rather than assumed correct — line-by-line review against the spec and oxlint after each change.

  4. Organising the wiki. It helped structure the five wiki pages from the brief's checklist and corrected me when I misunderstood how a piece of the code worked.

What came from libraries rather than AI or me — React and Bootstrap themselves — is covered under "Libraries used" above.

[26] Anthropic, "Claude Code," claude.com. [Online]. Available: https://claude.com/claude-code. [Accessed: Oct. 2, 2026].