npm install -g genezio

genezio create fullstack --backend=ts --frontend=react-ts  --name=my-online-store --region=us-east-1

server/shoppingCartService.ts

import { GenezioDeploy } from "@genezio/types";
import Redis from "ioredis";

export type CartItem = {
  title: string;
  count: string;
};

@GenezioDeploy()
export class ShoppingCartService {
  client: Redis;

  constructor() {
    if (!process.env.UPSTASH_REDIS_URL) {
      throw new Error(
        "It seems that UPSTASH_REDIS_URL is not set in the `.env` file."
      );
    }
    this.client = new Redis(process.env.UPSTASH_REDIS_URL);
  }

  async addItemToCart(sessionId: string, item: string): Promise<string> {
    // increment item count by 1 for a given item corresponding to the sessionId
    await this.client.hincrby("cart:" + sessionId, item, 1).catch((err) => {
      throw new Error(err);
    });

    return "success";
  }

  async getCart(sessionId: string): Promise<CartItem[]> {
    // get all items from the hashmap corresponding to the sessionId
    const cart = await this.client.hgetall("cart:" + sessionId).catch((err) => {
      throw new Error(err);
    });
    // check if the cart is empty
    if (Object.keys(cart).length === 0) {
      console.error("Cart is empty");
      return [];
    }

    // map cart items to an array of CartItem objects
    const cartItems: CartItem[] = [];
    for (const key in cart) {
      const item = {
        title: key,
        count: cart[key]
      };
      cartItems.push(item);
    }

    return cartItems;
  }
}

npm install ioredis
npm --save-dev install @types/node

genezio deploy

genezio local

server/shoppingCartService.ts

  async removeItemFromCart(sessionId: string, item: string): Promise<string> {
    // check if the item exists in the hashmap
    const itemExists = await this.client.hexists('cart:' + sessionId, item).catch((err) => {
      throw new Error(err);
    });
    if (!itemExists) {
      throw new Error("Item does not exist");
    }

    // decrement item count by 1 for a given item corresponding to the sessionId
    await this.client.hincrby('cart:' + sessionId, item, -1).catch((err) => {
      throw new Error(err);
    });

    // check if the item count is 0 for a specific item, if so delete the entry from the hashmap
    const itemCount = await this.client.hget('cart:' + sessionId, item).catch((err) => {
      throw new Error(err);
    });
    if (itemCount && parseInt(itemCount) === 0) {
      await this.client.hdel('cart:' + sessionId, item).catch((err) => {
        throw new Error(err);
      });
    }
    return "success";
  }

  async deleteCart(sessionId: string): Promise<string> {
    // check if the cart exists
    const cartExists = await this.client.exists('cart:' + sessionId).catch((err) => {
      throw new Error(err);
    });
    if (!cartExists) {
      throw new Error("Cart does not exist");
    }

    // delete the cart corresponding to the sessionId
    await this.client.del('cart:' + sessionId).catch((err) => {
      throw new Error(err);
    });

    return "success";
  }

npm install axios reactstrap bootstrap

import "bootstrap/dist/css/bootstrap.min.css";

client/src/models.tsx

// The fields declared for the dummy data
export interface Product {
  id: number;
  title: string;
  description: string;
  price: number;
  rating: number;
  thumbnail: string;
}

// Information needed for a cart item
export interface CartItem {
  title: string;
  count: string;
}

client/src/App.tsx

  // Toggle the cart modal
  const toggleCartModal = (e: any) => {
    e.preventDefault();
    setIsCartVisible(!isCartVisible);
  };

    <div className="App">
      <div className="bg-dark text-light p-3">
        <div className="container">
          <div className="row align-items-center">
            <div className="col">
              <h1>Product List</h1>
            </div>
            <div className="col text-right">
              <Button color="primary" onClick={(e) => toggleCartModal(e)}>
                <FaShoppingCart />
                {purchasedQuantity > 0 && (
                  <span className="m-2">{purchasedQuantity}</span>
                )}
              </Button>
            </div>
          </div>
        </div>
      </div>

client/src/App.tsx

const [isCartVisible, setIsCartVisible] = useState(false);

// Toggle the cart modal
const toggleCartModal = (e: any) => {
  e.preventDefault();
  setIsCartVisible(!isCartVisible);
};

client/src/App.tsx

<Container className="my-4">
  <Row className="justify-content-around">
    {productData.products.map((product) => (
      <Col key={product.id} md="4" className="mb-4">
        <div className="product-card">
          <img src={product.thumbnail} alt={product.title} />
          <h2>{product.title}</h2>
          <p>{product.description}</p>
          <p>Price: ${product.price}</p>
          <p>Rating: {product.rating}</p>
          <Button
            color="primary"
            onClick={(e) => handleBuyClick(e, product)}
            disabled={addItemLoading[product.id]}
          >
            {addItemLoading[product.id] ? (
              <Spinner size="sm" color="light" />
            ) : (
              "Buy Now"
            )}
          </Button>
        </div>
      </Col>
    ))}
  </Row>
</Container>

client/src/App.tsx

{
  isCartVisible && (
    <div
      className="cart-overlay d-flex justify-content-center align-items-center position-fixed top-0 left-0 w-100 h-100"
      style={{ background: "rgba(0, 0, 0, 0.7)" }}
    >
      <div className="cart-modal bg-white p-4 rounded shadow-lg">
        <h2 className="mb-4 center">Shopping Cart</h2>
        <ul className="list-unstyled">
          {cartData.length > 0 ? (
            cartData.map((cartItem, index) => (
              <li key={index} className="mb-3">
                <div>
                  <span>{cartItem.title}</span>
                  <span className="m-2">Quantity: {cartItem.count}</span>
                  <Button color="danger" size="sm" className="m-2">
                    {" "}
                    <FaTrash />{" "}
                  </Button>
                </div>
              </li>
            ))
          ) : (
            <li className="empty-cart">Your cart is empty</li>
          )}
        </ul>
        {cartData.length > 0 ? (
          <Button color="primary" className="m-2">
            {" "}
            'Clear Cart'{" "}
          </Button>
        ) : null}
        <Button color="primary" className="m-2">
          {" "}
          'Close'{" "}
        </Button>
      </div>
    </div>
  );
}

client/src/App.tsx

// Check if the token is set in localStorage
let token = localStorage.getItem("token") as string;

// If token is not set, generate a 32-character token
if (!token || token === "" || token === "undefined") {
  token = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
  localStorage.setItem("token", token);
}

client/src/App.tsx

const handleBuyClick = async (e: any, product: Product) => {
  e.preventDefault();

  // You can implement your buy logic here, e.g., add the product to a cart
  await ShoppingCartService.addItemToCart(token, product.title);
};

client/src/App.tsx

// Fetch the cart contents when the cart modal is visible
useEffect(() => {
  if (isCartVisible) {
    const fetchCartData = async () => {
      try {
        // Call your ShoppingCartService.getCart method to the contents of the cart
        const cart = await ShoppingCartService.getCart(token);
        setCartData(cart);
      } catch (error) {
        console.error("Error fetching or parsing cart data:", error);
      }
    };

    fetchCartData();
  }
}, [isCartVisible, token]);

client/src/App.tsx

const handleDeleteItem = async (e: any, cartItem: CartItem) => {
  e.preventDefault();

  await ShoppingCartService.removeItemFromCart(token, cartItem.title);

  // You can implement your delete logic here
  const updatedCartData = await ShoppingCartService.getCart(token);
  setCartData(updatedCartData);
};

client/src/App.tsx

const handleClearCart = async (e: any) => {
  e.preventDefault();

  // You can implement your clear cart logic here
  await ShoppingCartService.deleteCart(token);

  // Update the cart data
  const updatedCartData = await ShoppingCartService.getCart(token);
  setCartData(updatedCartData);
};

client/src/App.css

#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.App {
  text-align: center;
}

.product-card {
  text-align: center;
  display: flex;
  flex-direction: column; /* Arrange content vertically */
  justify-content: space-between; /* Push content to the top and bottom */
  height: 100%; /* Allow the card to take full height */
}

.product-card img {
  max-width: 100%;
  height: 200px; /* Adjust the height to your desired consistent height */
  object-fit: cover; /* Maintain aspect ratio and cover the container */
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

genezio deploy

client/src/App.tsx

const [purchasedQuantity, setPurchasedQuantity] = useState(0);

const handleBuyClick = async (e: any, product: Product) => {
  // ...

  // Update the local state to reflect the purchased quantity
  setPurchasedQuantity((prevQuantity) => prevQuantity + 1);

  // ...
};

const handleDeleteItem = async (e: any, cartItem: CartItem) => {
  // ...

  // Update the local state to reflect the purchased quantity
  setPurchasedQuantity((prevQuantity) => prevQuantity - 1);

  // ...
};

const handleClearCart = async (e: any) => {
  // ...

  // Update the local state to reflect the purchased quantity
  setPurchasedQuantity(0);

  // ...
};

return (
  <Button color="primary" onClick={(e) => toggleCartModal(e)}>
    <FaShoppingCart />
    {purchasedQuantity > 0 && <span className="m-2">{purchasedQuantity}</span>}
  </Button>
);

client/src/App.tsx

const [addItemLoading, setAddItemLoading] = useState<{
  [key: number]: boolean;
}>({});

const handleBuyClick = async (e: any, product: Product) => {
  // Set loading state to true to show the spinner
  setAddItemLoading((prevStates) => ({ ...prevStates, [product.id]: true }));

  // ...

  // Set loading state to false to hide the spinner
  setAddItemLoading((prevStates) => ({ ...prevStates, [product.id]: false }));
};

return (
  <Button
    color="primary"
    onClick={(e) => handleBuyClick(e, product)}
    disabled={addItemLoading[product.id]}
  >
    {addItemLoading[product.id] ? (
      <Spinner size="sm" color="light" />
    ) : (
      "Buy Now"
    )}
  </Button>
);