Mini Project – Ecommerce UI

Build a complete product catalog with shopping cart, filters, and checkout flow using React components and state management.

The DataFlow team wants to branch into ecommerce analytics. They need a demo store to track customer behavior and purchase patterns. Think Amazon's product grid meets clean modern design.

Building an ecommerce interface teaches you real-world React patterns. Product cards are components. Cart items are state. Filters trigger re-renders. Everything clicks together.

Project Requirements

Your ecommerce UI needs five main sections. Product grid displays items with images and prices. Filter sidebar lets users narrow results by category and price. Shopping cart shows selected items. Search bar finds products by name. Checkout form collects shipping details.

Product Components

ProductCard, ProductGrid, ProductDetails with props for price, image, description

Cart Logic

Add/remove items, quantity updates, total calculation with useState

Filter System

Category dropdown, price range slider, search input with instant results

State Management

Global cart state, filter state, product data with multiple useState hooks

Building the Product Grid

Start with mock product data. Real ecommerce sites pull from APIs, but hardcoded data works for prototyping. Each product needs an id, name, price, category, and image placeholder.

// Mock product data - realistic analytics software products
const products = [
  {
    id: 1,
    name: "DataFlow Pro Analytics",
    price: 299,
    category: "software",
    image: "/api/placeholder/300/200",
    rating: 4.8
  },
  {
    id: 2,
    name: "Business Intelligence Suite", 
    price: 499,
    category: "software",
    image: "/api/placeholder/300/200",
    rating: 4.6
  },
  {
    id: 3,
    name: "Customer Insights Dashboard",
    price: 199,
    category: "templates", 
    image: "/api/placeholder/300/200",
    rating: 4.9
  }
];

What just happened?

React mapped over the product array and rendered each item as a card. The key prop helps React track which products changed. Try this: Add more products to the array and watch the grid expand automatically.

Shopping Cart State

Shopping carts are pure React state. Each item needs quantity tracking. Adding the same product twice should increment quantity, not duplicate entries. Remove items by filtering them out.

function ShoppingCart() {
  const [cartItems, setCartItems] = useState([]);
  
  const addToCart = (product) => {
    setCartItems(prev => {
      const existing = prev.find(item => item.id === product.id);
      if (existing) {
        return prev.map(item => 
          item.id === product.id 
            ? {...item, quantity: item.quantity + 1}
            : item
        );
      }
      return [...prev, {...product, quantity: 1}];
    });
  };
}

What just happened?

The cart state updates intelligently - existing products increment quantity instead of duplicating. Click "Add to Cart" multiple times on the same product to see the quantity increase. The total recalculates automatically using reduce().

Product Filtering

Filters transform your product array without mutating the original. Use filter() and includes() to match categories and search terms. Multiple filters combine with logical AND.

function ProductFilter() {
  const [searchTerm, setSearchTerm] = useState("");
  const [selectedCategory, setSelectedCategory] = useState("all");
  const [priceRange, setPriceRange] = useState([0, 1000]);
  
  const filteredProducts = products.filter(product => {
    const matchesSearch = product.name.toLowerCase()
      .includes(searchTerm.toLowerCase());
    const matchesCategory = selectedCategory === "all" || 
      product.category === selectedCategory;
    const matchesPrice = product.price >= priceRange[0] && 
      product.price <= priceRange[1];
    
    return matchesSearch && matchesCategory && matchesPrice;
  });
}

What just happened?

The filter function runs every render, creating a new filtered array based on current search and category state. Type in the search box or change categories to see instant results. React re-renders the product grid automatically when state changes.

Complete Ecommerce Store

Now combine everything into one cohesive store. Products, cart, filters, and checkout all working together. Real ecommerce apps add payment processing, user authentication, and inventory management.

function EcommerceStore() {
  const [products] = useState([
    {id: 1, name: "DataFlow Pro", price: 299, category: "software"},
    {id: 2, name: "BI Dashboard", price: 199, category: "templates"},
    {id: 3, name: "Analytics Training", price: 599, category: "courses"}
  ]);
  
  const [cart, setCart] = useState([]);
  const [filters, setFilters] = useState({
    search: "", category: "all", minPrice: 0
  });
  
  return (
    <div className="store-layout">
      <FilterSidebar filters={filters} setFilters={setFilters} />
      <ProductGrid products={products} filters={filters} addToCart={addToCart} />
      <ShoppingCart cart={cart} updateCart={setCart} />
    </div>
  );
}

What just happened?

A complete ecommerce interface with working search, category filters, cart management, and responsive layout. All state stays in sync - add products, search for items, remove from cart. This is the foundation for real online stores.

Next Steps

Your ecommerce UI handles the essential interactions. Add user authentication with login forms. Integrate payment processing using Stripe. Store product data in a database. Implement inventory tracking and order management.

Real-World Extensions

Production ecommerce sites add product reviews, wishlist functionality, related product suggestions, and abandoned cart recovery. Netflix uses similar patterns for their content catalog - search, filters, and personalized recommendations all built with React components.

Quiz

Up Next: Mini Project – API Integration

Connect your React components to real backend APIs with fetch requests, loading states, and error handling patterns.

← Previous Course Index Next →