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.
Note: Delete this note and update the table of contents based on what sections you keep.
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
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- React - JS library
- Tailwind - CSS framework
The advantages of using Vite over Create React App
- Faster build times: Vite is built with performance in mind, and it is optimized for faster build times compared to CRA
- Lighter setup: Vite has a more lightweight setup process compared to CRA, which can make it easier for developers to get started with a new project.
- Faster HMR(hot module replacement), since the entire application does not need to be recompiled every time a change is made thus improved development experinece.
You can use @apply keyword to add existing tailwind utility classes into your own custom CSS.
nav a {
@apply font-bold text-gray-800 cursor-pointer flex;
}
I learned how to create reusable button components with different styles applied to them
const buttons = {
SolidButton: function SolidButton({children}){
return(
<button className='flex items-center bg-orange-500 hover:bg-orange-400 text-white shadow py-2 lg:py-0 px-4 mt-3 lg:mt-0 rounded-lg justify-center w-full lg:w-1/2'>{children}</button>
)
},
OutlineButton: function OutlineButton({children}){
return(
<button className='flex items-center bg-gray-200 hover:bg-orange-100 text-orange-500 py-2 rounded-lg justify-evenly mr-3 w-full lg:w-1/2'>{children}</button>
)
}
}
export default buttons;
- Implement Add to Cart and Delete from Cart functionality
- Add a lightbox
- Vite - This helped me to set up the project. I really liked this pattern and will use it going forward.
- Example resource 2 - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.