This is a solution to the E-commerce product page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- Open a lightbox gallery by clicking on the large product image
- Switch the large product image by clicking on the small thumbnail images
- Add items to the cart
- View the cart and remove items from it
- Live Site URL: E-commerce at Vercel
- Semantic HTML5 markup
- CSS custom properties
- Mobile-first workflow
- React - JS library
- TypeScript - Programming language
- CSS Modules - For styles
Media query for responsive layout.
@media (min-width: 800px) {
.main {
margin-top: 2rem;
padding-top: 5rem;
border-top: 1px solid hsl(220, 14%, 75%);
}
.pictures {
display: inline-block;
width: 49%;
vertical-align: middle;
}
.product-info {
vertical-align: middle;
display: inline-block;
width: 49%;
}
}
Hook to control screen size.
const useScreen = () => {
const [screenWidth, setScreenWidth] = useState(window.innerWidth);
const [isMobileScreen, setIsMobileScreen] = useState(
screenWidth < mobileScreenSize
);
useEffect(() => {
const resizeHandler = () => {
setScreenWidth(window.innerWidth);
};
window.addEventListener('resize', resizeHandler);
return () => window.removeEventListener('resize', resizeHandler);
}, []);
useEffect(() => {
setIsMobileScreen(screenWidth < mobileScreenSize);
}, [screenWidth]);
return { screenWidth: screenWidth, isMobileScreen: isMobileScreen };
};
Using React Portals to show backdrop and dialog.
<Backdrop onClick={props.close} />;
{
ReactDom.createPortal(
view,
document.getElementById('overlay-root') as HTMLElement
);
}
I need to explore more of responsive projects in React, to build less complex components. Use other CSS features is also importante, to make the project more beautiful and maintainable.
- Responsive Navbar Repo - This helped me building the responsive navbar using React.
- CSS - The Complete Guide 2023 - This is an amazing CSS course that I'm doing to improve my skills.
- React - The Complete Guide - This is an amazing React course that I'm doing to improve my skills.
- LinkedIn - Winstein Martins
- Frontend Mentor - @winstein27