Card Compare
Card Compare

Comparing Canadian credit cards side by side.

Topic

Tools & Plugins

Tags

  • Fintech
  • AI

Built with

Card Compare

You know that moment right before you pay for something?

Every single time, I'm standing there thinking, wait, which card is actually the best one for this? They all have their own rewards. Points on this one. Cash back on that one. Extra at the grocery store on another one. Like, which card is giving me the most value here?

So you go look it up. And imagine this. Every bank website hides the annual fee somewhere new. One puts it in a footnote. One hides it behind "See details". And every single card is the best card in Canada. According to itself.

I got tired of it. So I made a table. Literally. That's the origin story.

On May 3 I had my cards lined up in a text file. Fees, rewards, insurance, the lot. It was super useful. It was also clearly a spreadsheet wearing a trench coat. So that same day I started a project and asked Claude to help me turn it into a real tool.

And then I did nothing with it for twelve weeks.

I'd love to say that was strategy. It wasn't. On July 25 I came back, and the whole thing got built and put online in one day. How it started vs how it's going, I guess.

The design is a table. That's it.

Here's my thinking. Like, what does comparing cards actually mean? It means reading across a row. Fee next to fee. Rewards next to rewards. So that's the whole design. Cards across the top, the things you care about down the side.

Card Compare now has 24 cards from 12 issuers. The big banks, American Express, Wealthsimple, PC Financial, Tangerine, Rogers and more. You pick up to five and read across these rows.

  • Annual fee, and whether you can get it waived

  • Welcome bonus

  • Rewards on groceries, gas, dining and travel

  • Travel and purchase insurance

  • Lounge access and other perks

  • Foreign transaction fee

  • The income you need to qualify

You can also filter by what you're after (travel, cash back, groceries, no fee) or by bank.

Why five? Because with six the columns get too skinny to read. Also, nobody is seriously choosing between six cards. That's not comparing, that's procrastinating. I respect it. I'm not designing for it.

Sometimes the answer really is just a table, and the job is to not ruin it.

Day one, I broke it twice

Okay so here's the fun part. The first time I tried to put it online, it failed. Then it failed again.

Fail number one. Every card has tags, like "travel" or "grocery". And there's a strict list of the tags that are allowed. This was the list.

type Category =
  | "cashback" | "travel" | "grocery" | "no-fee"
  | "business" | "student" | "rewards" | "premium"
type Category =
  | "cashback" | "travel" | "grocery" | "no-fee"
  | "business" | "student" | "rewards" | "premium"
type Category =
  | "cashback" | "travel" | "grocery" | "no-fee"
  | "business" | "student" | "rewards" | "premium"

See what's missing? One of the cards was tagged "dining". And "dining" wasn't on the list. On my laptop everything looked fine. The build said absolutely not, and refused to publish a restaurant card it had never heard of. The fix was adding ONE word. Finding out that was the problem took... longer than one word.

Fail number two was even better. The project had quietly picked up a helper that only exists for Macs. I build on a Mac. The computer that publishes the site does not run on a Mac. So it worked perfectly for me, and for literally nobody else. The oldest story in software, and I finally got to star in it.

What I took from that is something I already half knew from design systems. Constraints are a kindness. A strict list of allowed words feels fussy, right up until it stops you from publishing nonsense. It's like a component library, but for data.

Part

What I used

The app

Next.js and React

Styling

Tailwind CSS

The card data

One file. No database.

Hosting

GitHub Pages

One honest warning. The numbers live in a file that a human (me) has to update. And banks change their offers whenever they feel like it. So use this to narrow things down, then check the details with the bank before you apply. It compares cards. It is not financial advice.

Okay, real talk, the title wasn't a joke. I built this, used it to make my decision, and then pretty much forgot it even existed. It did its job.

Maybe one day I'll come back and make something of it. If I do, I already know what I'd want. Numbers that stay fresh without me retyping bank websites. And a way to plug in your own monthly spending, so the table can tell you what each card is actually worth to YOU. Do I know how to build that yet? Nope. I'll figure it out as I go.

Keep reading

Tools & Plugins
Lens Effect

Building a sneaky glitch lens in Framer.

Oct 9, 2026
Tools & Plugins
Lens Effect

Building a sneaky glitch lens in Framer.

Oct 9, 2026
Data & APIs
FPL Dashboard

My Fantasy Premier League dashboard.

Oct 1, 2026
Data & APIs
FPL Dashboard

My Fantasy Premier League dashboard.

Oct 1, 2026

© 2026 · Maarib Shah

© 2026 · Maarib Shah

© 2026 · Maarib Shah