E-commerce product page using React, Typescript, Mobx and Sass
Design comparison
Solution retrospective
π Hi, everyone!
Here is my solution to the E-commerce product page π
I wanted to practice using Mobx, so the only problem I encountered was the "store" structure. I guess I'll try to refactor it later and create several instead of one π€.
So to sum up I used:
- [x] Typescript
- [x] React
- [x] Sass
- [x] Mobx
π€ Happy to hear any feedback and advice.
Community feedback
- @sahand-masolehPosted about 2 years ago
Hey there!
I just completed the same challenge! Your solution is very nice, I wasn't expecting strong competition so soon. :D
Here's a few things I noticed:
- The lightbox modal doesn't cover the page all the way to the bottom, it kind of gives the feeling that some information is supposed to be there.
- For the borders around the thumbnails, I suggest using
outline
instead ofborder
to avoid shifting the element, if that's unintended. - If you open the lightbox modal while the cart is open, the cart says on top of the lightbox. Should be an easy fix with
z-index
.
Marked as helpful1@JaneMorozPosted about 2 years agoHi @sahand-masoleh!
I haven't noticed this z-index problem π. I'll look into it and other things. The lightbox modal was kinda tough.
Thank you!
1@sahand-masolehPosted about 2 years ago@JaneMoroz No problem!
For modals you can use the built-in portals of React to make your life easier.
Marked as helpful2
Please log in to post a comment
Log in with GitHubJoin 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