hmm-api Showcase

A powerful, flexible API client for modern web applications

User Profile

Loading user data...

Products

Loading products...

Error Response from server

null

Hmm-api Configuration

import { toast } from "@/hooks/use-toast"; // import shadcn toast
import ApiClient from "hmm-api"; // import hmm-api
export const api = new ApiClient({
  baseUrl: "https://hmm-api-on21.vercel.app",
  showGlobalToast: false,
  parseErrorResponse: (err) => {
    toast({
      variant: "destructive",
      title: err?.title || "Fetch failed",
      description: err?.desc || "Page not found",
    });
    return err;
  },
});

Add Product Function using hmm-api

const createProduct = async () => {
    const newProduct = {
      name: "New Tech Gadget",
      price: 299.99,
      description: "Cutting-edge innovation",
    };

    const response = await api.post<Product>("/products", newProduct);

    if (response.success) {
      fetchProducts(); // Refresh product list
    }
  };

Add Product Function using fetch

const createProduct = async () => {
    const newProduct = {
      name: "New Tech Gadget",
      price: 299.99,
      description: "Cutting-edge innovation",
    };

    const response = await fetch("https://hmm-api-on21.vercel.app/products", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(newProduct),
    });

    const data = await response.json();

    if (response.ok) {
      fetchProducts(); // Refresh product list after successful creation
    } else {
      toast({
        variant: "destructive",
        title: data.title,
        description:
          data?.desc || "Something went wrong. Please try again later.",
      });
    }
  };

Key Features

Robust Error Handling

Comprehensive error management with customizable toast notifications

TypeScript Support

Full type safety with generic response handling

Flexible Configuration

Easily configure base URLs, headers, and authentication