Back to Challenges

E-commerce Product Page

Intermediate

Create a fully functional e-commerce product page with image gallery, cart functionality, and dynamic pricing updates.

Expected Duration: 1-2 weeks

Requirements

  • Product image gallery
  • Add to cart functionality
  • Size/color selection
  • Price calculations
  • Shopping cart preview

Prerequisites

  • Next.js experience
  • React knowledge
  • CSS Modules understanding
  • State management concepts

Challenge Steps

1

Project Setup

Set up Next.js project with required dependencies

2

Product Display

Create product image gallery and details section

3

Shopping Cart

Implement cart functionality and state management

4

Styling

Style components using CSS Modules

5

Testing

Add unit tests and perform UI testing