Esen karatas w1 react #8
Conversation
There was a problem hiding this comment.
Good implementation 👍
- Copied fake data into
srcfolder as instructed ✅ - Product list that displays all of the products from the
all-productsfile ✅ - Category list that displays all of the categories from the
all-categoriesfile 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 ✅
- Only 1 category is active at a time and the user should see which category is selected ✅
- Page is reponsive and adapts to various breakpoints ✅
Requested improvements:
- Please deploy app to netlify and and the link to the PR description.
- There is a bullet next to each category. Please remove it to improve the layout. It looks like the result of using the
<li>tag. Maybe a different html tag is better suited for this. - There isn't a way to return to all products after selecting a category. Please add functionality so that when a category is clicked again, it will remove the filtering and show all products.
- Move components into their own files. This adds structure to the application and makes improves maintainability, instead of having one big
App.jsxfile that keeps growing.
Additional compliments
- Nice layout! Really love the product cards being inside a card with rounded corners and the slight enlarge effect when hovering. Great styling work 👏
week1/project/ecommerce/src/App.jsx
Outdated
| export default function App() { | ||
| const [activeCategory, setActiveCategory] = useState("all"); | ||
|
|
||
| function normalizeCategory(category) { |
There was a problem hiding this comment.
Great use of extracting reusable logic into a function 👏
week1/project/ecommerce/src/App.jsx
Outdated
| ); | ||
| } | ||
|
|
||
| function Header() { |
There was a problem hiding this comment.
Please move this component into it's own file and place it in a folder called components.
week1/project/ecommerce/src/App.jsx
Outdated
| ); | ||
| } | ||
|
|
||
| function FilteredCategories({ |
There was a problem hiding this comment.
Please move this component into it's own file and place it in a folder called components.
week1/project/ecommerce/src/App.jsx
Outdated
| setActiveCategory: PropTypes.func.isRequired, | ||
| }; | ||
|
|
||
| function ProductList({ products }) { |
There was a problem hiding this comment.
Please move this component into it's own file and place it in a folder called components.
week1/project/ecommerce/src/App.jsx
Outdated
| products: PropTypes.array.isRequired, | ||
| }; | ||
|
|
||
| function ProductItem({ product }) { |
There was a problem hiding this comment.
Please move this component into it's own file and place it in a folder called components.
|
Here’s the live version of the app: https://esens-ecommerce-app.netlify.app |
|
All requested changes have been implemented. I went through the code locally to complete the review, to work around the number of changed files being too high to review it in GitHub. |
No description provided.