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

Ecommerce product page build with React

Alexβ€’ 3,130

@Alex-Archer-I

Desktop design screenshot for the E-commerce product page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I used to use Redux for managing complex states in react apps. But this time I tried the useContext hook for cart states. I wanted to practice it more and compare it with Redux. Wait, am I really proud with it? Guess should be something.

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

I decided to bring this project closer to the real one. To do this I put the product data to a separate file and tried to build app as if there could be more products. Also I slightly changed "add to cart" design for more deep work with context. Well, after I made those challenges up, I successfully overcame them.

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

As always I'll be more than happy to receive some critics, advices and just random comments =)

Community feedback

Munib ahmadβ€’ 190

@MunibAhmad-dev

Posted

First of all, great job on completing the project! πŸŽ‰ Here are a few points of feedback:

It's fantastic to see you experimenting with the useContext hook for managing cart states instead of relying on Redux. This not only shows your willingness to step out of your comfort zone but also your eagerness to explore and learn different state management approaches. It's a great way to understand the nuances and benefits of each method. Perhaps next time, you could document your findings and compare both approaches in a blog post or a detailed readme. This would not only solidify your understanding but also help others who might be in a similar learning phase.

Your approach to make the project more realistic by externalizing product data and simulating a larger product set is commendable. It's a practical step that showcases your forward-thinking and ability to handle scalability. Additionally, modifying the "add to cart" design to deepen your understanding of context is a smart move. It shows you’re not just completing tasks, but also thinking critically about the user experience and the underlying architecture.

For specific areas of improvement, I'd suggest focusing on the following:

Code Structure: Ensure your code is modular and well-documented. This makes it easier for others (and future you) to understand and maintain. Performance Optimization: Look into optimizing your use of context to prevent unnecessary re-renders, especially as the product list grows. Testing: Consider adding more tests to cover edge cases and ensure the reliability of your application as it scales. Overall, your project demonstrates a solid understanding of React and state management. Keep experimenting and pushing your boundaries. Well done! πŸ‘

Marked as helpful

1

Alexβ€’ 3,130

@Alex-Archer-I

Posted

@MunibAhmad-dev

Thank you! =)

Yeah, the code is a bit messy now. It's cos I had to change components structure on the fly a few times. Guess I need a more practice to see overall structure in advance.

Thanks again for kind words, it's really encouraging =)

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