marlatte / shopping-cart

A mock e-commerce website built with React.

Hi there 👋

I'm a front-end developer educated through The Odin Project who also enjoys:

• Making music 🎸 🥁 🎤
• Designing logos and layouts 🖼️ 🖍️
• Tearing my hair out over soccer ⚽️ 🛡️

Skilled with

shopping-cart's Issues

Plan app

Thinking in React

Starting from a mockup...

1. Break the UI into a component hierarchy
2. Build a static version in React
3. Find the minimal but complete representation of UI state
4. Identify where your state should live
5. Add inverse data flow

This Project's goals

• What features do you want?
• What components does that necessitate?
  • Each component gets own folder with structure:

components
  ├─ form
  │  ├─ __tests__
  │  ├─ FormInput.jsx
  │  └─ Checkbox.jsx
  └─  ui
     ├─ __tests__
     ├─ Button.jsx
     └─ Modal.jsx

• Where and what to test?
  • Try to use separate files instead of nesting describe's, and setup functions instead of beforeEach

Design

• 3 pages: Cart, Home, Products
• Can I use Conor's Yuedpao wireframe?

Bug: hero img

• When focus shifts to hero img on mobile it covers the text. Move :hover rule into @media.

• Also, when navigating back to Home from other pages, hero img doesn't load. Caught on iOS Safari. Reproduced on desktop Safari in Responsive Design Mode. img dimensions computed as 0 x 0.

Add loading screen

Anywhere there's a fetch with an empty screen:

• Home: ProductTeaser
• SingleProduct
• Products grid

Bug: cart img's not loading

Mobile: images (both hard-coded and fetched) display fine on most pages, but CartItems won't load on Safari. Reproduced on desktop Safari.

img dimensions are 0 x 0, but then playing with css in devTools brings it back. Maybe they just need some min dimensions?

Bug: fetch from last page not getting cached

Going back and forth to recently visited pages still triggers fetches.

Bug: updating quantity very slow

Updating quantity in the Cart takes a while for new number to show up bc it updates the miniCart, then the full cart with setCart() within useEffect(), then passes that down to CartItem to actually be displayed.

Add LocalForage

In cartController.js, replace Map with localForage so the browser remembers users' carts/

Update doc.title to relevant Title

• SingleProduct: Yuedpao Solid Gold Petite Micropave, etc.
• Products: Yuedpao Jewelry, etc
• Home: Yuedpao Homepage
• Cart: Yuedpao Cart

Create React Project

• npm create vite@latest <repo-name> -- --template react
• git init then add and commit
• gh repo create
• Rm template files
• Set up file structure
• Add basic README and descriptions
• Add prettier & airbnb configs: npm i -D eslint-config-prettier eslint-config-airbnb
• Add them to eslint 'extends' (airbnb first, prettier last)

Remove console.log()'s

• Add product
• Change quantity in cart
• Removing product

React router start every page at top

Scroll back to top on every new route (or child route)

Style app with modules

• Body & Root flex boxes, height, etc.
• Footer
• ErrorPage
• Header & Menu
• main flexbox
• ProductCard
• Home
• Products
• SingleProduct
• Cart
• CartItem

Bug: Articles on Home

Articles section in Home has weird spacing on iOS Safari. When stacked vertically, second article is pushed down out of position and overlaps with CallToAction.

Reproduced on desktop Safari in Responsive Design mode.

Annotate screenshots

• Take screenshots of UI
• Annotate to create component hierarchy