Shopping Items List

[laurasliwa]

Shopping Items List

Value Proposition

As a user

I want to browse a well-organised list of shopping items,

so that I can easily see what I need to buy.

Description

Acceptance Criteria

• The homepage displays a list of shopping items.
• The shopping list is headlined with its purpose.
• Each item listing includes:
  • Shopping item name
  • Shopping item quantity
  • Shopping item category
• A counter displays the total number of items currently on the shopping list.
• Each category is visually differentiated, for example, by using different colours.
• The list supports vertical scrolling to accommodate multiple entries.

Tasks

• [x] Create feature branch feature/shopping-items-list

• [x] Inspect and adapt the example data in the assets folder

• [ ] Replace title in index.js to GrocerEase

• [x] Create an assests folder with the files ´categories.jsonandshopping-items.json` and copy the data in the corresponding files

• [x] Import the arrays from the assests folder in _app.js

• [ ] write a function with map using the id and returning the item name, quantity and category

• [x] add a function with a counter for total number of items

• Styling:

• [ ] import Google Font

• [x] add a color to each category

---

📒 Handout/Link List

• React with Arrays
  • Knowing how to use .map() to render lists in JSX
  • Understanding how to render items from an array of objects
  • Knowing to add a unique key for list items

[laurasliwa]

Notizen:

• _app.js & index.js nochmal anschauen
• unique identifier/key anschauen
• Map mit key und fragments

[JessicaLoers]

Hi Laura. well done. There are a few thoughts from my side.

Tasks

• Add an imageUrl for each shopping item, for example from unsplash.com

You could move this task point to the "Shopping Items Details" user story; you don't need the images beforehand. But it doesn't matter if you want to do the hard work now. 😁

I think it's interesting that your shopping list resembles an Excel sheet—it's a creative approach. 💞

However, I've some concerns regarding usability, especially on mobile devices. Since the items in the list are very closely spaced, it might be challenging to accurately click on an item, particularly on smaller screens. This could make navigation, such as opening a detail page, more difficult, as finger taps on mobile are less precise than mouse clicks.

Perhaps you could consider increasing the spacing between the items or exploring alternative layouts that allow for clearer separation of elements. This could help improve the user experience on mobile devices.