LidiiaStarshynova-w1-React

[starshynova]

No description provided.

[ChingHsun]

Hi Lidiia, Your code works well and shows a good understanding of React. Great work!
I left some comments and a minor change, but it is not a blocker for approval.

Assignment Requirements ✅

• A product list that displays all of the products in the all-products file.
• the site is responsive, so have a look at the breakpoints in the deployed example project.
• A category list that displays all of the categories in the all-categories file at the top of the page
• If the user clicks on a category only the products that have that category in their category property should be displayed on the screen.
• The categories listed in the product objects do not match up exactly with the categories in the categories list. You will have to find a solution to this without editing the files
• There should only be 1 category active at a time and the user should see which category is selected.
• You need to deploy your app somewhere (using something like netlify) and put the link in your PR!

Comments Rules

Type	Description
Suggestions	• Common best practices, standard improvements • Should be considered for implementation
Nice-to-have	• Based on personal preferences or coding style • Optional enhancements
Question	• Starting a discussion to understand technical decisions • Asking for clarification or exploring different solutions
Praise	• Recognizing and highlighting good practices • Encouraging positive patterns

Suggestions 💡

• All in comments
• If you have the same commit message, you can combine them together (search for amend, fixup, autosquash)

Nice-to-have ✨

• Naming: renaming components from ButtonSet/ Card to CategoryList / ProductCard to better reflect their specific business purposes. This makes the code more self-documenting and easier to maintain.
• Over-componentization: Small, single-purpose pieces of code that are only used once don't need to be split into separate components. Since it is a small assignment, it is a good practice to separate the components. In this project, I will only use two components.

--> General: Looking at App.js should give you a clear overview of your page structure and component hierarchy. It's like reading the table of contents for your app.

Praise 🌟

• The code structure is clean and easy to understand
• Good responsive website
• Hover effects on buttons - that's a nice touch for user experience

Nice one!

[ChingHsun]

Suggestion:
It should be Uppercase, as with buttonSet.

[ChingHsun]

Hi @starshynova here is the example to comment

fixed in 300bd10

[ChingHsun]

Suggestion:
Removing unused files that came with the project template. such as index.css, and assets folder

[ChingHsun]

Suggested change

	const Product = (props) => {
	const Card = (props) => {

Suggestion:
Better to make the component name match the file name

[ChingHsun]

Suggested change

import React from 'react';

Suggestion:
When importing a React component, you can skip 'import React' for modern React (17+)
Reference

[ChingHsun]

Suggestion:
replace(/^FAKE:\s*/, '')) ideally be handled within ButtonSet or Button.
Due to the Single Responsibility principle, The App pages shouldn't need to know the 'FAKE:' detail.

[ChingHsun]

Suggested change

	<ButtonSet setFilterProducts={handleFilterProducts} />
	<ButtonSet onCategorySelect={handleCategorySelect} />

Suggestion:
For general naming in React, props that handle events should start with 'on'.

1. The 'set' prefix is typically reserved for useState hook naming
2. The name should describe what the prop does, not how it does it
   Reference