Repository navigation
Templates and Other Code Used
TrainerMart was not copied from a store template. It started from the Vite React starter, then Bootstrap, React Router, and project-specific components were added. Product data, cart logic, forms, and most of the page layout were written for this assignment. Some of that code was drafted with an AI Grok assistant and then edited in the project. Image were AI generated with Google Gemini.
| Resource | Role in the project | What we changed |
|---|---|---|
| Vite React starter |
npm create vite@latest with the React + JavaScript template. Supplied index.html, src/main.jsx, src/App.jsx, and the dev/build scripts. |
Replaced the starter App content, added base: './' in vite.config.js for Cloud Storage, and removed the default demo UI. |
| React | UI library. Components, useState, and events. |
No library source was edited. Application code is ours. |
| React Router |
HashRouter, Routes, Route, NavLink, Link, useParams, useNavigate. |
Started with BrowserRouter. Switched to HashRouter so #/shop works on a storage bucket. |
| Bootstrap 5 | CSS grid, forms, navbar, buttons, alerts, badges. Icons from Bootstrap Icons. JS bundle for the hamburger. | Did not edit Bootstrap source. Applied its classes in our components. Custom colors and hero styles are in src/index.css. |
| Unsplash | Some early product placeholders and the home hero photo. | Later product photos are local files in public/images. The hero still uses an Unsplash URL in CSS. |
| Nu Html Checker | Checked the deployed index.html. |
No code change. Result is on the Validation page. |
| Google Cloud Storage | Hosts the production dist build. |
Upload and bucket settings only. No GCP library in the app. |
| Grok (xAI) | Drafted components, cart state, form validation, CSS theme, wiki text, and some product images. | Files were pasted into the repo, then edited (routes, image paths, prices, color photos, HashRouter). |
No paid theme, admin template, or third-party cart package was used. The cart is React state in App.
Vite starter. index.html loads src/main.jsx. That file mounts <App /> and imports Bootstrap. Vite bundles the app and copies public/ into dist/. We kept that pipeline and changed the app inside it.
Bootstrap navbar. navbar-expand-lg shows links in a row at the large breakpoint and collapses them below it. The toggler uses data-bs-toggle="collapse" and data-bs-target="#mainNav". The bundle imported in main.jsx listens for that click. We did not write that toggle.
Bootstrap grid. row plus col-12 col-sm-6 col-lg-4 is Bootstrap’s flex grid. We chose the breakpoints; Bootstrap supplies the widths.
React Router. HashRouter reads the part after #. A storage bucket only has to serve index.html. We changed this from BrowserRouter after /shop did not exist as a file on the bucket.
These are project code, not library files:
-
src/data/products.json— catalog, includingcolorImagesandsizePrices -
src/components/ProductList.jsx,ProductCard.jsx,Cart.jsx,CartItem.jsx,Navbar.jsx,Footer.jsx -
src/views/HomeView.jsx,ShopView.jsx,ProductDetailView.jsx,CartView.jsx,AccountView.jsx,CreateAccountView.jsx - Cart and account state in
src/App.jsx - Store colors and hero rules in
src/index.css - Local images in
public/images
AI drafts were modified where the running app needed it: import paths, /images/ vs images/, whole-dollar prices, size-based prices, color thumbnails, and hosting routes.
[1] Vite contributors, “Getting started,” Vite, 2026. [Online]. Available: https://vite.dev/guide/
[2] Meta Platforms, Inc., “React reference overview,” React, 2026. [Online]. Available: https://react.dev/reference/react
[3] Remix Software, Inc., “React Router,” React Router, 2026. [Online]. Available: https://reactrouter.com/
[4] Bootstrap Team, “Bootstrap documentation,” Bootstrap, 2026. [Online]. Available: https://getbootstrap.com/docs/5.3/getting-started/introduction/
[5] Bootstrap Team, “Navbar,” Bootstrap, 2026. [Online]. Available: https://getbootstrap.com/docs/5.3/components/navbar/
[6] Unsplash, “Unsplash license,” Unsplash, 2026. [Online]. Available: https://unsplash.com/license
[7] World Wide Web Consortium, “Nu Html Checker,” W3C, 2026. [Online]. Available: https://validator.w3.org/nu/
[8] Google Cloud, “Host a static website,” Cloud Storage documentation, 2026. [Online]. Available: https://cloud.google.com/storage/docs/hosting-static-website
[9] xAI, “Grok,” 2026. [Online]. Available: https://x.ai/