Skip to content

Home

Jump to bottom
josecastillo209 edited this page Oct 3, 2026 · 1 revision

#Welcome to the p1website.trainermart.com wiki!

TrainerMart

Deployed site: https://storage.googleapis.com/trainermart-jose-p1/index.html#/

TrainerMart is a client-side React single-page application for CS 351 Project 1. It is a storefront for a fictitious adventure-gear company. Shoppers can browse products, open a product detail page, choose size and color, add items to a cart, and create or sign in to an account. There is no Express server, database, or real payment processing. Product data lives in a local JSON file, and cart and account data live in React state for the current browser session.

The production build is hosted on a public Google Cloud Storage bucket. Because a bucket does not rewrite unknown paths to index.html, the app uses HashRouter and relative asset paths. Live routes look like #/shop and #/cart.

Application architecture

index.html
  └── React (Vite)
        └── App
              ├── Navbar
              ├── Routes
              │     ├── HomeView
              │     ├── ShopView
              │     │     └── ProductList
              │     │           └── ProductCard
              │     ├── ProductDetailView
              │     ├── CartView
              │     │     └── Cart
              │     │           └── CartItem
              │     ├── AccountView
              │     └── CreateAccountView
              └── Footer

products.json
  └── imported by ShopView, HomeView, and ProductDetailView

App is the common parent. It owns the shopping-cart array and the saved account with useState, then passes that data and the update functions down as props. Views do not keep their own copy of the cart.

Path View Role
#/ HomeView Hero, feature highlights, and three featured products
#/shop ShopView Full catalog
#/product/:id ProductDetailView One product, options, and Add to Cart
#/cart CartView Cart page
#/account AccountView Sign-in form and saved account
#/create-account CreateAccountView Account creation form

React components

ProductList receives the product collection as a prop. It uses .map() to render one ProductCard for each product and passes that product down through props.

ProductCard shows one product: image, category, name, description, and price. Clicking the card navigates to /product/:id.

ProductDetailView loads the matching product from products.json with useParams. Size, color, and quantity are local useState values. Add to Cart stays disabled until size and color are chosen. Quantity must be a whole number of at least 1. If the product has colorImages, choosing a color swaps the main photo. If it has sizePrices, choosing a size updates the displayed price and the price stored in the cart.

Cart receives cartItems as a prop. It uses .map() to render one CartItem per line, and it calculates item count and subtotal from the current cart state instead of storing those numbers separately.

CartItem shows name, image, selected size and color, quantity, unit price, and line total. It can increase quantity, decrease quantity (not below 1), and remove the line. Size and color are not edited in the cart; the user removes the line and adds the product again.

Navbar links to every view and shows the cart count from the cart state.

Footer repeats the main links and notes that the store is a class project with no real checkout.

CreateAccountView and AccountView are client-side forms. A successful create stores first name, last name, and email in App state and sends the user to Account. Passwords are checked in the browser and are not stored.

CSS and JavaScript / React functionality

Custom styles in src/index.css set the store look: forest green, cream, ember, and gold. The navbar and footer use those colors with a gold rule. The home hero uses a dark overlay on an outdoor photo. Product cards lift on hover. Bootstrap 5 handles the grid, forms, alerts, and the mobile navbar. Bootstrap’s JavaScript bundle is imported so the hamburger menu works on a narrow screen.

Significant React behavior:

  • useState in App for cartItems and account
  • useState on the detail page for size, color, quantity, and messages
  • useState on both account forms for field values and validation errors
  • .map() in ProductList, Cart, size/color selects, and color thumbnails
  • Conditional rendering for an empty cart, a missing product, validation errors, and whether an account exists
  • Event handlers for navigation, form submit, quantity changes, and remove
  • Client-side validation on Create Account, Account sign-in, and Add to Cart
  • Cart count and subtotal derived from cartItems with reduce

Run locally

npm install
npm run dev

Open http://localhost:5173.

Production build:

npm run build

Upload the contents of dist to the Cloud Storage bucket. The live entry point is index.html#/.

Clone this wiki locally