L
← Financial Ideas
Financial Ideas 2026-07-05

Credit Card Category Optimizer

A browser app that tells you which card in your wallet earns the most for each spending category — and how much extra you're leaving on the table by not optimizing.

Credit Card Category Optimizer

Credit Card Reward Optimizer

A browser app that tells you which card in your wallet earns the most for each spending category — and how much extra you're leaving on the table by not optimizing.

Date: 2026-07-05 Type: App Theme: Rewards Status: Idea

What it is

A single-page web app you open in any browser (no login, no account linking, no API keys). You check the credit cards you carry, dial in your monthly spending by category, and the optimizer instantly shows you the best card to use for each purchase type — groceries, dining, gas, travel, streaming, online shopping, and everything else. A live bar chart and annual summary show your projected net rewards, net of annual fees, versus the baseline of just using a flat 2% card for everything.

Who it serves

Anyone with two or more credit cards who suspects they're not maximizing their rewards — the person who reflexively uses one card for everything, the points enthusiast building a multi-card stack for the first time, or a household trying to decide whether a premium card's annual fee is actually worth it at their specific spending level.

The money problem it addresses

Most people with multiple cards use the same one for every purchase out of habit, leaving significant rewards on the table. A household spending $500/month on groceries earns $10/month (2%) on a flat-rate card but $40/month (8% effective via Amex Gold points) or $30/month (6% on Amex Blue Cash Preferred) by routing that one category to the right card — a $240–$360/year difference on groceries alone. The friction is knowing which card wins which category without memorizing a spreadsheet. This app makes the answer visible in under a minute.

How it works

  1. Select your cards: Check each card in your wallet. Six popular cards are pre-loaded with accurate category rates as of July 2026.
  2. Set monthly spending: Adjust sliders or type dollar amounts for each of the 7 spending categories. Defaults use a typical U.S. household profile.
  3. Read the table: The optimizer runs instantly and shows — for each category — which card gives the highest effective cash-back rate and the monthly dollar earn.
  4. Check the summary: Annual gross rewards, net annual fees (with credit offsets), and net rewards appear in a breakdown by card. The "Optimizer Boost" box shows the gain vs. just using a flat 2% card.
  5. Experiment: Toggle cards on and off to model your actual wallet, or evaluate whether adding a premium card would pay off at your spend level.

The Citi Custom Cash is handled correctly: its 5% bonus applies only to your single highest-spend category (up to $500/month), 1% everywhere else — the optimizer auto-detects your top category.

What's in this folder

  • index.html — app shell; loads Chart.js (CDN) and the two local files below
  • style.css — dark-mode UI with a money/trust palette (deep green, emerald, gold, slate)
  • script.js — all optimizer logic, card catalog (inlined for file:// compatibility), and live UI rendering
  • sample-data.json — machine-readable card catalog, category definitions, and sample spending profile (reference companion to the inlined data in script.js)
  • requirements.md — functional and non-functional specs for implementing or extending this idea
  • cover-image.png — card cover image

How to run / read it

Open index.html in any modern browser. No build step, no server, no account required. Works from a local file path (file://). Requires an internet connection only to load Chart.js from the jsDelivr CDN (the rest is local).

Estimated impact

With the default spending profile ($1,400/month total across 7 categories):

Scenario Annual net rewards
Flat 2% card (Active Cash, no fee) ~$336/yr
Optimized 3-card stack (Savor + Custom Cash + Active Cash, all no-fee) ~$570/yr
Optimized 5-card stack (adds Amex BCP + Amex Gold) ~$700–$750/yr net of fees

Switching from a single flat-rate card to a no-fee 3-card optimized stack is worth roughly +$230/year with zero annual fee cost. Adding premium cards (Amex Gold at ~$125 net fee, Chase CSR at ~$250 net fee) starts paying off once travel spend exceeds ~$150–200/month.

Assumption: 8% effective rate on Amex Gold uses The Points Guy's 2¢/point valuation for Membership Rewards (a widely cited midpoint; actual redemption value varies by transfer partner).

Good to know

This is an educational organizer and estimator — not personalized financial, investment, or tax advice. Credit card terms, reward rates, category definitions, annual fees, and welcome bonus offers change frequently; always verify current details directly with each card issuer before making application or spending decisions. Point valuations (2¢/pt for Amex MR and Chase UR) are estimates — your actual redemption value may be higher (business class transfers) or lower (cash back). The optimizer assumes all spending in a category qualifies for the stated rate, which may not hold at every merchant (e.g., Amex BCP's 6% applies at U.S. supermarkets, not warehouse clubs or Walmart Supercenter).

Sources

Requirements

Requirements — Credit Card Reward Optimizer

Purpose

A single-page browser app that, given the user's monthly spending by category and the credit cards they carry, identifies the optimal card to use for each spending category and projects annual net cash-back or reward-equivalent earnings.

Functional requirements

Card catalog

  • Pre-load 6 real credit cards with their accurate category rates (as of July 2026):
    • Amex Blue Cash Preferred (6% groceries w/cap, 3% gas & streaming, $95/yr fee)
    • Amex Gold (8% effective dining & groceries via 4x MR @ 2¢/pt, 6% flights, $325 fee with $200 credit offset)
    • Chase Sapphire Reserve (10% Chase Travel, 6% dining/gas/streaming via 3x UR @ 2¢/pt, $550 fee with $300 offset)
    • Capital One Savor (3% dining/groceries/streaming, no fee)
    • Citi Custom Cash (5% on top spend category up to $500/mo, 1% other, no fee)
    • Wells Fargo Active Cash (flat 2% on all purchases, no fee)
  • Each card must be individually enable/disable-able via a checkbox UI control.

Spending inputs

  • Support 7 spending categories: Groceries, Dining & Takeout, Gas & EV Charging, Travel, Streaming & Subscriptions, Online Shopping, Everything Else.
  • Each category has both a range slider (0–$2,000) and a numeric text input; they must stay in sync.
  • Default values reflect a typical U.S. household profile (see sample-data.json).
  • Display total monthly spend (sum of all categories).

Optimizer logic

  • For each category, identify the enabled card that yields the highest monthly cash-back dollar amount.
  • Handle monthly spending caps correctly (e.g., Amex BCP groceries capped at $500/mo; earn overCap rate above cap).
  • Citi Custom Cash special case: automatically assign the 5% rate only to the single highest-spend category; all other categories on that card earn 1%.
  • Tie-break equal earn amounts by choosing the higher stated percentage rate.
  • Output the winning card, its effective rate, and the monthly dollar earn per category.

Annual rewards summary

  • Annual gross rewards = sum of (monthly earn × 12) for each used card.
  • Net annual rewards = annual gross − net annual fees. Net annual fee = max(0, annual_fee − credit_offset).
  • Only subtract fees for cards that are actually assigned at least one category.
  • Display per-card breakdown (gross/yr + fee line).

Boost calculation

  • Baseline: total monthly spend × 2% × 12 (what a flat 2% card would earn, no annual fee).
  • Optimizer boost = net annual rewards − baseline.
  • Display with sign, colored green (positive) or red (negative).
  • Include an explanatory note ("Try disabling high-fee cards" when negative).

Chart

  • Horizontal bar chart (Chart.js 4.x from CDN) showing annual gross rewards per used card.
  • Each card bar uses the card's brand color.
  • Chart updates in real time with slider/input changes.

Non-functional requirements

  • Runs from file:// in any modern browser with no build step, no backend, no API keys.
  • All math uses floating-point arithmetic rounded to 2 decimal places for display; no binary-float currency bugs for amounts within the expected range.
  • Chart.js loaded from https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js.
  • No other CDN dependencies; all logic is in script.js.
  • Card data inlined in script.js (mirrors sample-data.json) to avoid file:// CORS issues.
  • App must remain usable with only 1 card enabled.
  • All rate, fee, and credit figures must match real issuer terms as of July 2026 and cite sources.

Files

File Description
index.html App shell; loads Chart.js CDN + style.css + script.js
style.css Dark-mode UI; money/trust palette (deep green, emerald, gold, slate)
script.js All optimizer logic, card catalog (inlined), and UI rendering
sample-data.json Machine-readable card catalog + category definitions + sample spending profile (reference)

Data sources (rates verified July 2026)

More from Financial Ideas

Quarterly Tax Estimator
Quarterly Tax Estimator
2026-07-21
Debt Payoff Strategy Comparator
Debt Payoff Strategy Comparator
2026-07-14
Schwab Portfolio Drift Alert
Schwab Portfolio Drift Alert
2026-07-08
Monthly Cash Flow Report
Monthly Cash Flow Report
2026-07-07
Cd Ladder Planner
Cd Ladder Planner
2026-07-06