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

React + Sass | Ecommerce Product Page

Syed Ali Mansoor• 460

@syedalimansoor

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


Hello everyone! 👋

This is an e-commerce website built with React and Sass. It was my second project with React and I gotta say, I'm hook-ed! 😆

You could say I have fallen in love with the React mindset—think of every problem as a collection of smaller problems and crack each one of them individually. When all the individual pieces of your app come together and coalesce into what you were trying to accomplish, a heavy sigh of relief escapes the mouth and a major part of the next few hours is spent just clicking buttons, tabbing through the experience, and getting delighted at every micro-interaction, even though you have seen it an umpteen times before.

Yet, there is always more to explore and I look forward to tinkering with all the possibilities that have opened up to me as a React developer now.

My first step will probably be to dive into CSS-in-JS, or styled-components and Emotion, to be more exact.

After that, I will hopefully explore the mysterious world that is server-side. I know that there is Next.js and Gatsby for doing all that stuff but I am still kinda unaware of how everything works. Welp, that's what I plan to learn!

I also have eyes on the Intersection Observer API and GSAP for animations and scroll effects.

Once I master the art of animation (or at least become somewhat proficient at it), I will enter the 3-dimensional realm and make some cool stuff with ThreeJS.

Do you think there is anything else I could learn? Do let me know! And of course, feedback on the solution will be highly appreciated!

P.S.: On to working on all the HTML and accessibility issues!!! God help me

Community feedback

Fayaz• 380

@fayax555

Posted

Good job on the project. One thing I noticed was the cart is buggy because you used unstable value prev.length for your id which was used as the key prop. Instead generate random ids using a library like nanoid

1

Syed Ali Mansoor• 460

@syedalimansoor

Posted

@fayax555 Oh okay I didn't know about that, thanks!

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