How to Build a Price Comparison App Using Spreadsheets and Jsonsheets

Price comparison tools drive purchasing decisions. Whether you're comparing SaaS plans, electronics, insurance quotes, or grocery prices, people want to see options side by side before they buy.

Building one usually means setting up a database, writing a scraping pipeline, and maintaining an admin panel. But for many use cases, a Google Sheet is all the backend you need.

Here's how to build a working price comparison app using Google Sheets as your data source and Jsonsheets as your API layer.

Why a Spreadsheet Works for Price Comparison

Think about what a price comparison app actually needs:

• A table of products with prices from different sources

• The ability to filter by category, brand, or feature

• Someone updating prices regularly

That's a spreadsheet. Your team can research prices, paste them into rows, and your app pulls the latest data through an API. No scraping. No complex pipelines. Just organized data served as JSON.

Step 1: Design Your Spreadsheet

Create a Google Sheet with tabs organized by product category.

Tab: "laptops"

Tab: "phones"

Tab: "features" (for spec comparisons)

Each tab becomes its own API endpoint automatically when you connect the sheet.

Step 2: Connect to Jsonsheets

1. Sign in at jsonsheets.com

2. Select your price comparison spreadsheet from Google Drive

3. Grab your API key from the dashboard

Your endpoints:

GET /api/v1/price-compare/laptops
GET /api/v1/price-compare/phones
GET /api/v1/price-compare/features

Step 3: Build the Price Comparison Frontend

Here's a complete React component that fetches prices and displays them grouped by product:

import { useState, useEffect } from "react";

const API_KEY = "js_your_api_key_here";
const BASE = "https://jsonsheets.com/api/v1/price-compare";

function PriceComparisonApp() {
  const [category, setCategory] = useState("laptops");
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true);
    fetch(`${BASE}/${category}?in_stock=true`, {
      headers: { Authorization: `Bearer ${API_KEY}` },
    })
      .then(res => res.json())
      .then(json => {
        setProducts(json.data);
        setLoading(false);
      });
  }, [category]);

  // Group by product name to show price comparisons
  const grouped = products.reduce((acc, item) => {
    if (!acc[item.name]) acc[item.name] = [];
    acc[item.name].push(item);
    return acc;
  }, {});

  // Sort each group by price (lowest first)
  Object.values(grouped).forEach(group =>
    group.sort((a, b) => parseFloat(a.price) - parseFloat(b.price))
  );

  return (
    <div>
      <h1>Price Comparison</h1>

      <div className="category-tabs">
        {["laptops", "phones"].map(cat => (
          <button
            key={cat}
            onClick={() => setCategory(cat)}
            className={category === cat ? "active" : ""}
          >
            {cat.charAt(0).toUpperCase() + cat.slice(1)}
          </button>
        ))}
      </div>

      {loading ? (
        <p>Loading prices...</p>
      ) : (
        Object.entries(grouped).map(([name, retailers]) => (
          <div key={name} className="product-card">
            <h2>{name}</h2>
            <span className="brand">{retailers[0].brand}</span>
            <span className="rating">{retailers[0].rating}/5</span>

            <table>
              <thead>
                <tr>
                  <th>Retailer</th>
                  <th>Price</th>
                  <th>Savings</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                {retailers.map((item, i) => {
                  const savings = item.original_price - item.price;
                  return (
                    <tr key={i} className={i === 0 ? "best-price" : ""}>
                      <td>{item.retailer}</td>
                      <td>
                        ${item.price}
                        {i === 0 && <span className="badge">Best Price</span>}
                      </td>
                      <td>
                        {savings > 0
                          ? `Save $${savings}`
                          : "Full price"}
                      </td>
                      <td>
                        <a href={item.url} target="_blank" rel="noopener">
                          View Deal
                        </a>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>

            <p className="updated">
              Last updated: {retailers[0].last_updated}
            </p>
          </div>
        ))
      )}
    </div>
  );
}

Step 4: Add Search and Filtering

Use Jsonsheets query parameters to filter server-side instead of fetching everything:

Search by brand:

GET /api/v1/price-compare/laptops?brand=Apple

Filter in-stock items only:

GET /api/v1/price-compare/laptops?in_stock=true

Get prices from a specific retailer:

GET /api/v1/price-compare/laptops?retailer=Amazon

Limit results for pagination:

GET /api/v1/price-compare/laptops?limit=10&start=1&end=10

Here's a search component:

function SearchBar({ onSearch }) {
  const [query, setQuery] = useState("");
  const [brand, setBrand] = useState("");

  const handleSearch = () => {
    const params = new URLSearchParams();
    if (brand) params.set("brand", brand);
    onSearch(params.toString());
  };

  return (
    <div className="search-bar">
      <select value={brand} onChange={e => setBrand(e.target.value)}>
        <option value="">All Brands</option>
        <option value="Apple">Apple</option>
        <option value="Lenovo">Lenovo</option>
        <option value="Dell">Dell</option>
        <option value="Google">Google</option>
      </select>
      <button onClick={handleSearch}>Search</button>
    </div>
  );
}

Step 5: Add a Spec Comparison View

Pull from the "features" tab to show side-by-side specs:

function SpecComparison({ productNames }) {
  const [specs, setSpecs] = useState([]);

  useEffect(() => {
    fetch(`${BASE}/features`, {
      headers: { Authorization: `Bearer ${API_KEY}` },
    })
      .then(res => res.json())
      .then(json => {
        const filtered = json.data.filter(s =>
          productNames.includes(s.product_name)
        );
        setSpecs(filtered);
      });
  }, [productNames]);

  if (specs.length === 0) return null;

  const specKeys = ["screen_size", "ram", "storage", "battery", "weight"];

  return (
    <table className="spec-table">
      <thead>
        <tr>
          <th>Spec</th>
          {specs.map(s => (
            <th key={s.product_name}>{s.product_name}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {specKeys.map(key => (
          <tr key={key}>
            <td>{key.replace("_", " ")}</td>
            {specs.map(s => (
              <td key={s.product_name}>{s[key]}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

Keeping Prices Updated

The best part of a spreadsheet-powered approach is how simple updates are:

• Manual updates — Your team checks retailer websites and updates the price column

• Scheduled checks — Set a weekly reminder to review and update prices

• Crowdsourced updates — Let users submit price tips through a form that writes to another tab (using the POST endpoint)

• Google Sheets add-ons — Use IMPORTXML or IMPORTHTML formulas to pull prices from public product pages directly into your sheet

Example Google Sheets formula to pull a price from a webpage:

=IMPORTXML("https://example.com/product-page", "//span[@class='price']")

Adding Price History

Create a "price_history" tab to track how prices change over time:

Fetch history for a specific product:

GET /api/v1/price-compare/price_history?product_name=MacBook Air M3&retailer=Amazon

Use this data to render a price trend chart showing whether prices are going up or down.

Monetization Ideas

Price comparison apps have clear paths to revenue:

• Affiliate links — Use retailer affiliate URLs in the url column to earn commission on purchases

• Featured listings — Charge retailers to appear at the top of comparisons

• Price alerts — Build an email notification system that checks the API for price drops

• Premium access — Gate certain categories or historical data behind a subscription

Use Cases for Spreadsheet-Powered Price Comparison

• Niche product comparisons — Cameras, headphones, running shoes, supplements

• SaaS pricing pages — Compare software tools in your industry

• Local service pricing — Compare quotes from contractors, cleaners, or tutors

• Travel deals — Track flight and hotel prices across booking sites

• Grocery price tracking — Compare prices across local supermarkets

• Insurance quotes — Side-by-side plan comparisons

Get Started

You can have a working price comparison app in under 30 minutes:

1. Organize your price data in Google Sheets

2. Connect the sheet at jsonsheets.com

3. Build a frontend that fetches and displays grouped prices

4. Let your team keep prices updated from the spreadsheet

No web scraping infrastructure. No database to manage. No admin panel to build. Just a spreadsheet, an API, and a frontend.

Start building your price comparison app at jsonsheets.com