Free
1 - Beginner
Product Card Component
Card component with product details and purchase button
š Overview
Create a clean and functional product card component, ideal for e-commerce sites.
This beginner-friendly challenge focuses on building a card with:
ā¢ A product image, title, price, and clamped description.
ā¢ An interactive quantity selector with -/+ buttons and input.
ā¢ An 'Add' button for adding the product to a cart.
You'll practice key front-end skills such as layout design, component structure, and interactivity with JavaScript/React. šāØ
š Learnings
- š Creating reusable components using props.
- āļø Working with typography for product details and readability.
- š¢ Managing state for updating the product quantity.
- š¼ļø Styling images to accommodate multiple sizes and aspect ratios.
- šØ Styling a visually appealing UI with CSS or Tailwind.
ā
Project Checklist
Card displays product image, title, price, and description.
Description is clamped to 4 lines.
Quantity section includes -/+ buttons and an input field.
'Add' button is positioned on the bottom right of the card.
Buttons and input are fully functional for quantity adjustment.
All fields in the component are taken in as props.
š Learnings
- š Creating reusable components using props.
- āļø Working with typography for product details and readability.
- š¢ Managing state for updating the product quantity.
- š¼ļø Styling images to accommodate multiple sizes and aspect ratios.
- šØ Styling a visually appealing UI with CSS or Tailwind.
š Bonus Features
Implement a dark mode version of the product card.
Use Storybook to showcase the product card component.
Add validation/error messages for the quantity input.
Disable the 'Add' button when the quantity is 0.
Animate the 'Add' button on hover.
š ļø Instructions
- Click on the 'Download Design' button to get the .fig file.
- Upload the .fig file to your Figma account using these steps. You can now open the design and see what you have to make.
- Export assets from Figma by pressing Ctrl+Shift+E (or Cmd+Shift+E on Mac) while nothing is selected and then clicking the 'Export' button that shows up.
- Implement the design using your preferred language or framework (aim for pixel-perfect accuracy).
- Deploy your solution for free using GitHub Pages, Netlify, or Vercel.
- Submit your solution link here and try to get a perfect score!
š Check out the FAQ page for any questions regarding challenges and solutions.