How to Build a Real-Time Price Comparison App for Quick Commerce in India

import { useState } from "react";

interface Product {
  name: string;
  price: number;
  mrp: number;
  offer_price: number | null;
  image: string;
  in_stock: boolean;
  quantity: string;
  brand: string;
}

interface GroupSearchResponse {
  query: string;
  platforms: Record<string, { status: string; products: Product[] }>;
  credits_used: number;
}

const PLATFORMS = ["blinkit", "zepto", "swiggy", "bigbasket"];

export default function PriceComparison() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState<GroupSearchResponse | null>(null);
  const [loading, setLoading] = useState(false);

  const search = async () => {
    setLoading(true);
    try {
      const res = await fetch(
        `https://api.quickcommerceapi.com/api/v1/groupsearch?query=${encodeURIComponent(query)}&platforms=${PLATFORMS.join(",")}`,
        { headers: { "X-API-Key": process.env.NEXT_PUBLIC_QC_API_KEY! } }
      );
      const data = await res.json();
      setResults(data);
    } catch (err) {
      console.error("Search failed:", err);
    } finally {
      setLoading(false);
    }
  };

  const getBestPrice = () => {
    if (!results) return null;
    let best = { platform: "", price: Infinity };
    for (const [platform, data] of Object.entries(results.platforms)) {
      if (data.products?.[0]?.price < best.price) {
        best = { platform, price: data.products[0].price };
      }
    }
    return best;
  };

  return (
    <div className="max-w-2xl mx-auto p-6">
      <h1 className="text-2xl font-bold mb-4">Quick Commerce Price Compare</h1>
      <div className="flex gap-2 mb-6">
        <input
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder="Search for a product (e.g. Amul Butter 500g)"
          className="flex-1 border rounded-lg px-4 py-2"
          onKeyDown={(e) => e.key === "Enter" && search()}
        />
        <button onClick={search} disabled={loading}
          className="bg-violet-600 text-white px-6 py-2 rounded-lg disabled:opacity-50">
          {loading ? "Searching..." : "Compare"}
        </button>
      </div>

      {results && (
        <div className="space-y-4">
          {getBestPrice() && (
            <div className="bg-green-50 border border-green-200 rounded-lg p-3 text-sm">
              Best price: <strong>Rs {getBestPrice()!.price}</strong> on{" "}
              <strong>{getBestPrice()!.platform}</strong>
            </div>
          )}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            {Object.entries(results.platforms).map(([platform, data]) => (
              <div key={platform} className="border rounded-xl p-4">
                <h3 className="font-semibold capitalize mb-2">{platform}</h3>
                {data.products?.[0] ? (
                  <div className="flex gap-3">
                    <img src={data.products[0].image} alt="" className="w-16 h-16 rounded" />
                    <div>
                      <p className="text-sm">{data.products[0].name}</p>
                      <p className="text-lg font-bold">Rs {data.products[0].price}</p>
                      {data.products[0].offer_price && (
                        <p className="text-xs text-green-600">
                          Offer: Rs {data.products[0].offer_price}
                        </p>
                      )}
                    </div>
                  </div>
                ) : (
                  <p className="text-sm text-gray-500">No results found</p>
                )}
              </div>
            ))}
          </div>
          <p className="text-xs text-gray-400 text-right">
            Credits used: {results.credits_used}
          </p>
        </div>
      )}
    </div>
  );
}

// Get user's coordinates from browser
async function getUserPincode(): Promise<string> {
  return new Promise((resolve, reject) => {
    navigator.geolocation.getCurrentPosition(
      async (position) => {
        const { latitude, longitude } = position.coords;
        // Reverse geocode to get pincode (using Google Maps or similar)
        const res = await fetch(
          `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&key=YOUR_GOOGLE_KEY`
        );
        const data = await res.json();
        const pincode = data.results?.[0]?.address_components
          ?.find((c: any) => c.types.includes("postal_code"))?.long_name;
        resolve(pincode || "560001"); // Default to Bangalore
      },
      (err) => reject(err)
    );
  });
}

// Use pincode in API call
const pincode = await getUserPincode();
const res = await fetch(
  "https://api.quickcommerceapi.com/api/v1/groupsearch?query=Amul+Butter&platforms=blinkit,zepto,dmart,jiomart",
  {
    headers: {
      "X-API-Key": "YOUR_API_KEY",
      "x-geolocation-pincode": pincode,
    },
  }
);