Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Biult in React JS, Vanilla CSS and ensured total responsiveness.

@The-isaacagboola

Desktop design screenshot for the Product list with cart coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I totally enjoyed building this under a self imposed deadline of 24hours. I overshot it with a few hours anyway. I feel fulfilled

What challenges did you encounter, and how did you overcome them?

Managing images import from a data.json file was a little tricky solved it by making th e imports first then assigning the entire file to a javascript array object. Also found out i could have sipmply solved this using the react tag.

Also encoutered slight issues with the state management; solved this by obeying the standard practice of declaring globally used variables in the context declaration and making use of the spread operator to clone the global items when used in a seperate module. Came up with a personally law; NEVER TRY MUTATING A CONTEXT VARIABLE FROM A SEPERATE MODULE, RATHER DEFINE THE FUNCTION IN THE CONTEXT THEN USE IT ELSEWHERE.

What specific areas of your project would you like help with?

An overview of the industry standard on state management and its dynamics.

Community feedback

P

@SabaMarghania1

Posted

If you want, to use images without import you can use public folder for this purpose. also check useReducer.

0

@The-isaacagboola

Posted

@SabaMarghania1 Ohhh Awesome...

Would check this out immediately.

Thank you so much

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord