Building a Headless CMS for Numismatic Enthusiasts: A Case Study in API-First Design

Let me tell you about building a headless CMS for coin collectors. It’s been one of my most rewarding projects lately, and I want to share what worked (and what didn’t). This case study walks through creating an API-first system for numismatic enthusiasts – folks who care deeply about every mint mark, die variety, and historical detail.

Why Headless Makes Sense for Coin Collectors

Most CMS platforms feel like trying to fit a rare Morgan dollar into a modern vending machine. They’re clunky, rigid, and just don’t handle the unique needs of specialized content.

With a headless CMS, we separate the content from how it’s displayed. Think of it like preserving a coin’s pristine condition in a vault (the backend) while letting collectors view it through any loupe they prefer (the frontend). This separation gives us:

Benefits of a Headless CMS

• Scalability: One content source feeds websites, apps, and even future tech we haven’t imagined yet.
• Performance: Global CDN distribution means load times that won’t test a collector’s patience.
• Flexibility: Pick the perfect frontend for the job – no backend handcuffs.
• Future-Proofing: When the next great coin collecting app arrives, our content will be ready.

For numismatics, this matters. When you’re showcasing a 1913 Liberty Head nickel, every detail counts. Collectors need to zoom, pan, compare – all without the site getting sluggish.

Which Platform to Build On?

After testing options, I focused on three platforms that handle specialized content well:

Contentful

• Pros: Reliable API, great content modeling, instant CDN. Their ecosystem is solid.

<

• Cons: Gets pricey fast if you’re managing thousands of coin entries with high-res images.

Strapi

• Pros: Self-hosted, open source, and adaptable. I modified it to handle die variety classifications.

<

• Cons: You’ll spend time configuring what others give you out of the box.

Sanity.io

• Pros: Real-time updates, flexible schemas, and tools that handle complex relationships between coins and their metadata.

<

• Cons: The customization requires some developer patience – worth it though.

For this project, Sanity.io won because it handles the tangled web of coin details, images, and references naturally. When a collector needs to link a doubled die to a specific mint year with related auction records, Sanity makes it smooth.

How the Pieces Fit Together

Here’s the tech stack that brought our coin database to life:

• Content Management: Sanity.io – our coin vault where all details live.
• Frontend: Next.js for interactive features like search and user collections.
• Static Content: Gatsby for lightning-fast reference pages and galleries.
• Data Fetching: GraphQL to get exactly what’s needed, no more.
• Images: Cloudinary for crisp, fast-loading coin photos with zoom.

Structuring Coin Data in Sanity

Sanity lets us model content like you’d organize a coin collection:

<
• Coin: Year, mint mark, denomination – the basics every collector checks first.
• Image: High-res photos with lens details, lighting info, and other capture metadata.
• Error Description: Space for detailed die variety notes like repunched mint marks or rotated reverses.
• References: Links to authentication sources, price guides, and auction records.

Here’s how a coin entry looks in Sanity’s schema:

export default {
  name: 'coin',
  title: 'Coin',
  type: 'document',
  fields: [
    {
      name: 'year',
      title: 'Year',
      type: 'number',
    },
    {
      name: 'mint',
      title: 'Mint',
      type: 'string',
    },
    {
      name: 'denomination',
      title: 'Denomination',
      type: 'string',
    },
    {
      name: 'images',
      title: 'Images',
      type: 'array',
      of: [{ type: 'image' }],
    },
    {
      name: 'errorDescription',
      title: 'Error Description',
      type: 'array',
      of: [{ type: 'block' }],
    },
    {
      name: 'references',
      title: 'References',
      type: 'array',
      of: [{ type: 'url' }],
    },
  ],
};

Building the Frontend with Jamstack

Jamstack is great for content-heavy sites. It keeps things fast and secure by separating content from presentation.

Next.js for Interactive Features

Next.js handles dynamic content like search and user-submitted coin finds. Here’s fetching our coin data:

import { request } from 'graphql-request';

const query = `{
  allCoin {
    year
    mint
    denomination
    images {
      asset {
        url
      }
    }
  }
}`;

export async function getStaticProps() {
  const data = await request('https://.api.sanity.io/v1/graphql/production/default', query);
  return { props: { coins: data.allCoin } };
}

Gatsby for Static Pages

For reference guides and gallery pages, Gatsby shines. Its image handling is perfect for numismatic content. The config:

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-sanity',
      options: {
        projectId: '',
        dataset: 'production',
      },
    },
    'gatsby-plugin-image',
    'gatsby-plugin-sharp',
    'gatsby-transformer-sharp',
  ],
};

Delivering Content Through APIs

Headless CMS means everything comes through APIs. This lets collectors access data however they want – web, mobile, or future platforms.

GraphQL vs REST

• GraphQL: Gets exactly what you request in one go. Great when you need a coin with all its details and images.
• REST: Simpler but often means multiple calls to get what you need.

We went with GraphQL. Here’s fetching a single coin record:

{
  Coin(id: "") {
    year
    mint
    denomination
    images {
      asset {
        url
      }
    }
    errorDescription
    references
  }
}

Optimizing Coin Images with Cloudinary

Sharp images are non-negotiable for coin collectors. Cloudinary handles this well:

1. Images go to Cloudinary through Sanity’s upload system.
2. URL parameters handle resizing on the fly for thumbnails or zoomed views.

Example of a high-res coin image URL with optimization:

https://res.cloudinary.com//image/upload/w_1600,h_1600,c_limit,q_auto:best,f_auto/coins/2021-denver-shield-cent.jpg

Key Lessons From the Project

Building a CMS for numismatists taught me a lot about balancing technical needs with community expectations:

• Sanity.io works well for handling complex relationships between coins, varieties, and references.
• Next.js and Gatsby complement each other – use the right tool for each job.
• GraphQL makes content delivery efficient when every API call counts.
• Cloudinary is a must for any site where image quality determines success.
• Model content with collectors in mind – they’ll notice if the data structure doesn’t match their mental model.

This approach works for any niche with detailed visual content. Whether it’s coins, art, or vintage tools, separating content from display while keeping the data rich creates something that feels right to the people who love it most.

Related Resources

You might also find these related articles helpful:

• How I Built a High-Converting B2B Tech Lead Funnel Using Data Scarcity & Developer-Driven Tactics – Let me share a secret: I built my highest-converting B2B tech lead funnel by studying coin collectors. The Hidden Opport…
• Building a MarTech Tool: Lessons in Precision, Data Validation, and Scalable Integration from a Rare Coin Hunting Analogy – Building marketing tech tools? Let me share what I’ve learned from both the code trenches and my hobby of rare coi…
• How Doubled Die Analysis Techniques Can Revolutionize InsureTech Claims & Underwriting – Insurance is changing fast. I’ve spent time exploring how a surprising source—coin analysis—can help InsureTech startups…