Create Client Side Shopping Cart

Why Build a Client-Side Shopping Cart

Client-side shopping carts have become the standard for modern e-commerce applications due to their responsiveness and user experience benefits. When users add items to their cart, they expect immediate visual feedback without waiting for server round-trips. A client-side cart fulfills this expectation by maintaining cart state in browser memory, providing instant updates as users browse and modify their selections.

The architectural advantages extend beyond user experience. By handling cart operations client-side, you reduce server load and API calls, which translates to lower infrastructure costs and better scalability. Users can continue building their cart even with intermittent network connectivity, with changes synchronized when connection is restored. This offline-first approach is particularly valuable for mobile users who may experience unstable connections.

Modern browsers provide robust storage mechanisms that make client-side cart implementation practical and reliable. The Web Storage API offers simple key-value storage that persists across sessions, while React's state management patterns combine with these browser features to enable sophisticated cart implementations that rival native application experiences. Our web development services team specializes in building high-performance e-commerce solutions that leverage these modern browser capabilities.

This guide explores building a shopping cart using React with TypeScript, combining type safety with component-based architecture. React's virtual DOM ensures efficient updates when cart state changes, while TypeScript catches potential errors during development rather than runtime. We cover everything from basic cart operations to advanced patterns like localStorage persistence and performance optimization.

Project Structure

A well-organized project structure is essential for maintainable shopping cart development. The component-based architecture of React naturally supports separating concerns and creating reusable modules.

src/
├── components/
│ ├── Cart/
│ │ ├── index.ts
│ │ ├── Cart.tsx
│ │ └── Cart.module.scss
│ ├── Products/
│ │ ├── index.ts
│ │ ├── Products.tsx
│ │ └── Products.module.scss
│ ├── Quantifier/
│ │ ├── index.ts
│ │ ├── Quantifier.tsx
│ │ └── Quantifier.module.scss
│ └── CartWidget/
│ ├── index.ts
│ ├── CartWidget.tsx
│ └── CartWidget.module.scss
├── hooks/
│ └── useCart.ts
├── types/
│ └── cart.ts
└── App.tsx

Each component folder contains its own index.ts file that exports the component using named exports, following React best practices for module organization. This structure also facilitates team collaboration by establishing clear conventions for where different types of code should live.

For larger e-commerce applications, consider separating your cart logic into dedicated hooks that can be reused across components. Our guide on Node.js API development with Express covers similar architectural patterns for backend API design that complement this frontend implementation.

Type Definitions

TypeScript provides type safety across all cart operations, catching potential errors during development rather than runtime.

export type Product = {
 id: number;
 title: string;
 price: number;
 thumbnail: string;
 image: string;
 quantity: number;
}

export interface CartProps {
 [productId: string]: Product;
}

Using a dictionary structure for cart items, keyed by product ID, enables O(1) lookup and manipulation operations. This structure handles duplicate product additions by incrementing quantity rather than creating duplicate entries. The TypeScript interface documents expected data shapes and enables IDE autocomplete for cart operations throughout the application.

For more on building type-safe React applications, explore our comprehensive guide on server-side rendering with React and Node.js, which covers similar TypeScript patterns in a full-stack context.

Products Listing Component

The products listing component fetches product data from an API and renders it in a responsive grid layout. Each product displays a thumbnail image, title, price, and add-to-cart button.

import { FunctionComponent, useEffect, useState } from 'react';
import useLocalStorageState from 'use-local-storage-state';

const API_URL = 'https://dummyjson.com/products';

export const Products: FunctionComponent = () => {
 const [isLoading, setIsLoading] = useState(true);
 const [products, setProducts] = useState<Product[]>([]);
 const [error, setError] = useState(false);
 const [cart, setCart] = useLocalStorageState<CartProps>('cart', {});

 useEffect(() => {
 fetchData(API_URL);
 }, []);

 async function fetchData(url: string) {
 try {
 const response = await fetch(url);
 if (response.ok) {
 const data = await response.json();
 setProducts(data.products);
 setIsLoading(false);
 } else {
 setError(true);
 setIsLoading(false);
 }
 } catch (error) {
 setError(true);
 setIsLoading(false);
 }
 }

 const addToCart = (product: Product): void => {
 product.quantity = 1;
 setCart((prevCart) => ({
 ...prevCart,
 [product.id]: product,
 }));
 };

 const isInCart = (productId: number): boolean => 
 Object.keys(cart || {}).includes(productId.toString());

 if (error) {
 return <h3 className={classes.error}>
 An error occurred when fetching data.
 </h3>;
 }

 if (isLoading) {
 return <Loader />;
 }

 return (
 <section className={classes.productPage}>
 <h1>Products</h1>
 <div className={classes.container}>
 {products.map(product => (
 <div className={classes.product} key={product.id}>
 <img src={product.thumbnail} alt={product.title} />
 <h3>{product.title}</h3>
 <p>Price: <CurrencyFormatter amount={product.price} /></p>
 <button 
 disabled={isInCart(product.id)} 
 onClick={() => addToCart(product)}
 >
 Add to Cart
 </button>
 </div>
 ))}
 </div>
 </section>
 );
};

The component handles loading states, error conditions, and the logic for determining whether a product is already in the cart. Using React's useEffect hook with an empty dependency array ensures products load once when the component mounts, avoiding unnecessary API calls. The responsive grid uses CSS to adjust column counts based on viewport width, ensuring readability across devices.

For applications requiring advanced API integration and data management, consider exploring our AI automation services that can enhance e-commerce functionality with intelligent product recommendations and inventory optimization.

Cart State Management with localStorage

Persisting cart state across browser sessions requires careful integration between React state management and browser storage mechanisms.

const [cart, setCart] = useLocalStorageState<CartProps>('cart', {});

The useLocalStorageState hook returns a cart state object and a setter function that automatically synchronizes changes to localStorage. This persistence ensures users find their cart contents intact when returning to the application.

Reading cart data follows a simple pattern:

const getProducts = () => Object.values(cart || {});

This conversion enables standard array methods like map for rendering cart items, while maintaining the O(1) lookup benefits of the object structure. The initial value of an empty object ensures graceful handling of new users or cleared storage.

For applications requiring more complex offline capabilities, consider combining localStorage with IndexedDB. Our guide on CSS container style queries demonstrates similar progressive enhancement patterns for responsive design.

Cart Page Implementation

The cart page displays items the user has selected, enabling quantity adjustments and removal operations.

export const Cart: FunctionComponent = () => {
 const [cart, setCart] = useLocalStorageState<CartProps>('cart', {});

 const handleRemoveProduct = (productId: number): void => {
 setCart((prevCart) => {
 const updatedCart = { ...prevCart };
 delete updatedCart[productId];
 return updatedCart;
 });
 };

 const handleUpdateQuantity = (productId: number, operation: Operation) => {
 setCart((prevCart) => {
 const updatedCart = { ...prevCart };
 if (updatedCart[productId]) {
 if (operation === 'increase') {
 updatedCart[productId] = {
 ...updatedCart[productId],
 quantity: updatedCart[productId].quantity + 1
 };
 } else {
 updatedCart[productId] = {
 ...updatedCart[productId],
 quantity: updatedCart[productId].quantity - 1
 };
 }
 }
 return updatedCart;
 });
 };

 const getProducts = () => Object.values(cart || {});
 const totalPrice = getProducts().reduce(
 (accumulator, product) => 
 accumulator + (product.price * product.quantity),
 0
 );

 return (
 <section className={classes.cart}>
 <h1>Cart</h1>
 <div className={classes.container}>
 {getProducts().map(product => (
 <div className={classes.product} key={product.id}>
 <img src={product.thumbnail} alt={product.title} />
 <h3>{product.title}</h3>
 <Quantifier
 removeProductCallback={() => handleRemoveProduct(product.id)}
 productId={product.id}
 handleUpdateQuantity={handleUpdateQuantity}
 />
 </div>
 ))}
 </div>
 <TotalPrice amount={totalPrice} />
 </section>
 );
};

The cart component delegates quantity manipulation to a Quantifier sub-component, maintaining separation of concerns. The Quantifier handles the UI for incrementing, decrementing, and removing items, while the cart component manages the actual cart state and calculations. This modular approach makes it easy to maintain and extend cart functionality as your e-commerce platform grows.

To optimize your cart for search engines and improve discoverability, implementing proper SEO services ensures that your product pages and cart pages rank well in search results, driving more qualified traffic to your e-commerce platform.

Performance Optimization Strategies

Lazy Loading and Code Splitting

React.lazy and Suspense enable loading cart components on demand rather than including them in the initial bundle:

const Products = React.lazy(() => import('./components/Products'));
const Cart = React.lazy(() => import('./components/Cart'));

Image Optimization

• Use lazy loading for product images
• Implement responsive images with srcset
• Consider modern formats like WebP for better compression

State Update Batching

React 18's automatic batching groups multiple state updates into a single render pass, improving performance during rapid cart operations. When users rapidly add multiple items to cart, React batches the resulting state updates, preventing intermediate renders that would cause visual flicker and waste computational resources.

These optimization strategies ensure cart operations remain snappy even with extensive product data. Code splitting loads cart-related JavaScript only when needed, reducing initial page load times. Memoization prevents unnecessary re-renders when cart state changes, focusing updates on affected components rather than the entire application tree.

For additional performance insights, explore our guide on Masonry CSS and modern grid layouts which covers similar front-end optimization patterns.

Sources

1. Angular Minds: How to Make a ReactJS Ecommerce Website - Comprehensive guide covering React e-commerce development, state management, and performance optimization strategies.

2. Mihail Gaberov: How to Build a Shopping Cart with React and TypeScript - Detailed step-by-step implementation with code examples, localStorage integration, and component architecture patterns.

3. DummyJSON Products API - Reliable product data source for testing shopping cart implementations.