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([
      { 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("list", []);
export const useCartSlice = () => cartSlice("list", []);

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 productItems = products.useState() as ProductType[];
  const cartItems = cart.useState() as CartType[];

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

  return (
    <div>
      <h2>🛍️ Products</h2>
      <ul>
        {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 cartItems = cart.useState() as CartType[];

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

  return (
    <div>
      <h2>🛒 Cart</h2>
      <ul>
        {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