Skip to content

Home

Jump to bottom
tonytienvuong edited this page Oct 2, 2026 · 3 revisions

Bay Kicks

Live site: https://storage.googleapis.com/bay-kicks-cs351-tvuong/index.html Repository: https://github.com/tonytienvuong/Project-1-Bay-Kicks

Bay Kicks is an online shoe store. It sells 25 pairs of sneakers, and everything runs in the browser. There is no server and no database.

A visitor can browse the shoes, open one to see its details, pick a size and a color, add the shoe to a cart, and create an account.

How the site is put together

One page loads. After that, JavaScript swaps which screen is showing, so moving between the shop and the cart never reloads the page.

Four React ideas do most of the work:

  1. State remembers things while the site is open, such as what is in the cart.
  2. Props pass information down from one component to another.
  3. .map() builds a list by repeating a component, once per item.
  4. Conditional rendering shows something only when it applies.

The screens

App.jsx holds a value called view, and that value decides which screen is drawn.

There are six screens.

  1. Home (HomeView.jsx) is the entrance, with a button into the shop.
  2. Shop (ShopView.jsx) shows the product grid, 10 products to a page.
  3. Product (ProductDetailView.jsx) shows one shoe in full, with its options and the Add to Cart button.
  4. Cart (CartView.jsx) lists everything currently in the cart.
  5. Sign in (AccountView.jsx) is the login form.
  6. Create account (CreateAccountView.jsx) is the registration form.

Four more components are used inside those screens. NavBar (NavBar.jsx) is the bar at the top, shown on every screen. ProductList (ProductList.jsx) turns the product array into cards, and ProductCard (ProductCard.jsx) draws one of those cards. CartItem (CartItem.jsx) draws one line in the cart.

How the cart works

The cart lives in App.jsx, which is the parent of every screen. Keeping it there means the product page, the cart page and the count in the top bar all read the same data, so they can never disagree.

The count and the subtotal are not stored anywhere. They are worked out from the cart each time the screen is drawn, using reduce(). The brief asks for this specifically: the count has to come from the cart, not from a separate variable that could drift out of step.

A cart line is identified by the product together with the chosen size and colour. The same shoe in two different sizes is two separate lines.

How the lists are built

.map() is used in three places, and the brief names it as a requirement:

  1. ProductList — one card per product
  2. CartView — one row per cart item
  3. ShopView — the page number buttons

The Add to Cart button

The button starts switched off, and only turns on once a size and a colour have both been chosen. Quantity is held between 1 and however many are in stock. Adding the same size and colour a second time adds to the existing line instead of making a new one.

Styling

There are two CSS files.

  1. src/index.css — the colours, and the basics for the page
  2. src/App.css — the styling for each screen

The look is black text on a white background. Custom class names begin with bk- so they never clash with Bootstrap's own classes.

Clone this wiki locally