Alaa nasher w1 react #10
Conversation
Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 5.2.11 to 5.4.6. - [Release notes](https://github.com/vitejs/vite/releases) - [Changelog](https://github.com/vitejs/vite/blob/v5.4.6/packages/vite/CHANGELOG.md) - [Commits](https://github.com/vitejs/vite/commits/v5.4.6/packages/vite) --- updated-dependencies: - dependency-name: vite dependency-type: direct:development ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Bumps [braces](https://github.com/micromatch/braces) from 3.0.2 to 3.0.3. - [Changelog](https://github.com/micromatch/braces/blob/master/CHANGELOG.md) - [Commits](micromatch/braces@3.0.2...3.0.3) --- updated-dependencies: - dependency-name: braces dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
crevulus
left a comment
crevulus
left a comment
There was a problem hiding this comment.
Hi Alaa,
Your data flow and component-separation is good, but your site is a little difficult to use because of the UI - especially the images overflowing. Trying tweaking the css to make it more user-friendly. Also make sure you're using dynamic code where you can instead of hardcoding.
| will-change: filter; | ||
| transition: filter 300ms; | ||
| } | ||
| .logo:hover { |
There was a problem hiding this comment.
It's best to clean up/remove code you're no longer using.
| @@ -0,0 +1,62 @@ | |||
| /* Categories */ | |||
There was a problem hiding this comment.
Your page is currently hard to use because of your css styles. Make sure your page is sized well and dynamic and/or respects common media breakpoints, otherwise it will be hard to use.
There was a problem hiding this comment.
From the README file:
Note: the site is responsive, so have a look at the breakpoints in the deployed example project.
week1/project/ecommerce/src/App.jsx
Outdated
| const displaySelectedCategory = (category) => { | ||
| setActieCategory(category); | ||
|
|
||
| if (category === "FAKE: electronics") { |
There was a problem hiding this comment.
We don't want to hardcode all of these values. This works, but what would happen if you have 50 categories? What about if the backend adds a new category? (if we pretend that the data is coming from a backend service instead of our JS files).
Try to find a dynamic way to get the category name and match it against the category without having to manually check each name.
3 participants
https://6942ee291e3c6b009961446f--alaa-ecommerce.netlify.app/