Submitted 14 days ago

Product List built with NextJS and tailwind and typeScript👨🏻‍💻

Alejandro Cañon• 220

@alecanonm

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product list with cart

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 am proud to built this page with different technologies and made it totally functional and responsive
I would do differently put the JSON data in a base data like mongoDB or Postgres to put more information if the customer wish it

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

i didn't find something that had could be a challenge

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

I would like to know if i built the project in the right way with the technologies that i used, and also i would like to know if the hooks and my solution are right and if there's a better way to do it i would like to know it

Community feedback

Fernando A. Malfavón• 80

@Wlfernando

Posted 13 days ago

I watched you images deformed when shrinking the viewport. I recommend give them a static width and height adaptaded with media queries or use the element <picture> to prevent this behaivor. Also the popup isn't like the displayed in the design: for the text in it, you could meet text-wrap and text-overflow; and for the dimension of the popup, you can work with media queries. I worked this one with nextjs, too. If you want to read my code, here is my solution: https://github.com/Wlfernando/Product-list-with-cart

Marked as helpful

Please log in to post a comment

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