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

Responsive Product list with functional cart with Angular 18 & SASS!

@FerdinandoGeografo

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?

📌 In this funny Frontend Mentor Challenge I practiced a lot of layout organization and the way of thinking in a reusable way following the DRY principle.

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

💡 the main challenge was the management of the application state related to the products and cart data, and the shape of the possible actions to modify it, ensuring a decoupling between the components.

📚 I practiced and applied many of the principles also used by libraries such as NgRX : I delegated the entire management of the state to a service, with a pattern based on signals API provided by Angular and the actions callable by smart components to access data and modify them through methods provided by the service.

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

I would love to get some feedbacks from you. Your insights would be incredibly valuable in helping me improve. Here are a few specific areas where I'd appreciate your thoughts:

📌 Folder Structure Management:

How effective is the current folder structure? Are there any changes you would suggest to improve organization and maintainability?

📌 State Design and Action Management:

What do you think about the design of the state and the way actions are managed? Are there any best practices or improvements you would recommend?

📌 SCSS Organization:

How is the SCSS part of the application organized? Do you have any suggestions for better structuring or optimizing the SCSS?

📌 Possible Improvements or Suggestions:

Do you have any general feedback or suggestions for improving the solutions I've implemented? Are there any areas where you see potential for enhancement?

Thank you so much for taking the time to review my work. Your feedback is greatly appreciated ❤️.

Happy code to everyone!! 😁

Community feedback

@elisabed-coder

Posted

The project demonstrates an impressive design that is both aesthetically pleasing and fully responsive, ensuring a seamless user experience across a variety of screen sizes. The functionality is robust, with all features working as expected.

1

@FerdinandoGeografo

Posted

@elisabed-coder Thank you very much! 🙏🏼🥹. I'm glad you appreciated the UX of this project and that you could see the effort dedicated to the challenge.

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