liya-w1-react #10
liya-w1-react #10
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 ✅
Requested improvements:
- The categories are highlighted differently when selected. "Show All" has white text with blue backgroud, the other categories have a dark border which disappears when the user clicks somewhere else. Please make the look for the selected category consistent.
- The layout of the product cards jumps around when selecting different categories. The number of products in a row can be 4 or 3 or 2. Please improve the product card grid to stay consistent. You can have a look at the sample app to get an idea https://hyf-react-w1-example.netlify.app/
- Breakdown the app into components.
Additional compliments
- Nice touch adding a button for '"Show All"
- Buttons and Product Cards have a visually pleasing border with rounded corners.
| import products from "./fake-data/all-products"; | ||
| import "./App.css"; | ||
|
|
||
| function App() { |
There was a problem hiding this comment.
Please move code from App component to other components. If you look at the ecommerce app in the project readme, it has 3 sections: a title, list of categories, list of products. Categories and Products can be their own components and this is the real value of using React.
week1/project/ecommerce/src/App.jsx
Outdated
| <div id="root"> | ||
| <h1>Ecommerce App</h1> | ||
|
|
||
| <div className="category-buttons"> |
There was a problem hiding this comment.
Extract this into a component and place it in a folder called components.
week1/project/ecommerce/src/App.jsx
Outdated
| ))} | ||
| </div> | ||
|
|
||
| <div className="product-list"> |
There was a problem hiding this comment.
Extract this into a component and place it in a folder called components.
|
Hello @sycons! I completed refactoring. Please take a look. Thank you! |
|
Great changes. Especially extracting utility functions into a file and creating a hook for category selector. This shows good use of React and adding structrue to your application. Layout changes look good. The grid stays consistent and responds well to different breakpoints. Minor recommended changes (but NOT a blocker for approval):
|
…g, redeployed to Netlify
Thank you @sycons ! I applied your suggestions and added a few more. The app became more practical and nice-looking. |
No description provided.