Skip to content

Ruba week1 React #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

RubaMansour
Copy link

No description provided.

@ChingHsun ChingHsun self-assigned this Feb 7, 2025
@ChingHsun
Copy link

Hi Ruba, Your code works well and shows a good understanding of React. Love the Product Card styling and attention to UX details ✨
However, due to the white color, the text in the category list is not visible.
Since it will be confusing, may need to fix this main problem before approved.

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
    BLOCK: white wording
截圖 2025-02-07 23 11 55
  • 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

Nice-to-have ✨

  • All in comments
    (really minor, it is REALLY good)

Praise 🌟

  • Clean Architecture, Well-organized component structure
  • Logical data flow from App to child components
  • Strong Naming Conventions and prop names
  • Descriptive class names and Self-documenting code
  • Impressive UI/UX, Adding ALL category and remove FAKE text for good user experience
  • Nice product card layout and Professional-looking grid system

Nice one!

activeCategory === "All"
? productsData
: productsData.filter((product) => {
return product.category === activeCategory.replace("FAKE: ", "");

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
return product.category === activeCategory.replace("FAKE: ", "");
return product.category === activeCategory;

Suggestion:
.replace("FAKE: ", "") ideally be handled within ProductList.
Due to the Single Responsibility principle, The App pages shouldn't need to know the 'FAKE:' detail.

Comment on lines 18 to 19
});
return (

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
});
return (
});
return (

Nice to have:
Better to have a spare line

Comment on lines 18 to 19
>
{category.replace("FAKE: ", "")}{" "}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
>
{category.replace("FAKE: ", "")}{" "}
>
{category.replace("FAKE: ", "")}

Nice to have

Comment on lines 111 to 124
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@@ -0,0 +1,26 @@
import React from "react";

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
import React from "react";

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants