Ecommerce App

In this tutorial, we'll create a simple ecommerce application with the following features:

• Add products to cart
• Listing products in cart
• Remove products from cart

🔹 Step 1: Setup App in root project folder (src/App.tsx):

src/App.tsx

import { ProductList } from "./components/ProductList";
import { Cart } from "./components/Cart";
import { useEcommerceStore } from "./store";
import { useEffect } from "react";

function App() {
  const store: any = useEcommerceStore();

  useEffect(() => {
    // Load initial products
    store.products.set({
      items: [
        { name: "Laptop", price: 999 },
        { name: "Phone", price: 599 },
        { name: "Tablet", price: 399 },
      ]
    });
  }, []);

  return (
    <div>
      <h1>🛒 E-Commerce Store</h1>
      <ProductList />
      <Cart />
    </div>
  );
}

export default App;

Create Store

🔹 Step 2: Setup store in src/store/index.ts:

src/store/index.ts

import { useStore } from "state-jet";
import { useProductSlice, useCartSlice } from "./slices";

const initializer: any = () => ({
  products: useProductSlice(),
  cart: useCartSlice()
});

export const useEcommerceStore = () =>  useStore(initializer);

Create Slices

🔹 Step 3: Setup slices in src/store/slices.ts:

src/store/slices.ts

import { useSlice } from "state-jet";

const productSlice = useSlice("products");
const cartSlice = useSlice("cart");

export const useProductSlice = () => productSlice("productState", {});
export const useCartSlice = () => cartSlice("cartState", {});

Create components

🔹 Step 4: Setup components (src/components):

Create a file at src/components/ProductList.tsx:

src/components/ProductList.tsx

import { useEcommerceStore } from "../store";

type ProductType = {
    name: string,
    price: number
}
  
type CartType = {
  name: string,
  price: number,
  count: number
}

export const ProductList = () => {
  const store = useEcommerceStore();
  const products: any = store.products;
  const cart: any = store.cart;
  const productSliceData: any = products.useState();
  const cartSliceData: any = cart.useState();
  const productItems: Array<ProductType> = productSliceData?.items || [];
  const cartItems: Array<CartType> = cartSliceData?.items || [];

  const addToCart = (product: ProductType) => {
    if (cartItems.some((cartItem: CartType) => cartItem.name === product.name)) {
      cart.set((cartVal: any)=> ({
        ...cartVal,
        items: cartItems.map((cartItem: CartType) => {
          if (cartItem.name === product.name) {
            return { ...cartItem, count: (cartItem.count || 0) + 1 };
          }
          return cartItem;
        })
      }));
    } else {
      cart.set((cartVal: any)=> ({
        ...cartVal,
        items: [...cartItems, { ...product, count: 1 }]
      }));
    }
  };

  return (
    <div>
      <h2>🛍️ Products</h2>
      <ul>
        {productItems && productItems.map((productItem: ProductType, index: number) => (
          <li key={index}>
            {productItem.name} - ${productItem.price}{" "}
            <button onClick={() => addToCart(productItem)}>Add to Cart</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

Create a file at src/components/Cart.tsx:

src/components/Cart.tsx

import { useEcommerceStore } from "../store";

type CartType = {
  name: string,
  price: number,
  count: number
};

export const Cart = () => {
  const store = useEcommerceStore();
  const cart: any = store.cart;
  const cartSliceData: any = cart.useState();
  const cartItems: Array<CartType> = cartSliceData?.items || [];

  const removeFromCart = (cartObj: CartType) => {
    cart.set((cartVal: any) => ({
      ...cartVal,
      items: cartItems.filter((cartItem: CartType) => cartItem.name !== cartObj.name)
    }));
  };

  return (
    <div>
      <h2>🛒 Cart</h2>
      <ul>
        {cartItems && cartItems.map((item: CartType, index: number) => (
          <li key={index}>
            {item.name} - ${item.price} - {item.count} {" "}
            <button onClick={() => removeFromCart(item)}>Remove from Cart</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

For the complete code and demo, refer to the Codesandbox example below.

📦 CodeSandbox

CodeSandbox is an online code editor and development environment that allows developers to create, share and collaborate on web development projects in a browser-based environment

Try it now!

JavaScriptTypeScript