Dogfooding Projex: My Own Library Broke on the First New Feature I Tried

I wanted to add my dev.to profile to my projects page. Simple enough. Projex, my own library, has a devto type built in. I wrote the code. Added it to projex.config.ts. Checked the page.

No stats. Nothing. Just an empty project card staring back at me.

The Setup

Projex supports nine project types. GitHub, npm, Product Hunt, dev.to, and a few others. Each type fetches data from a different API and normalises it into a standard format. Stats, links, descriptions.

I'd tested GitHub and hybrid (GitHub + npm) types extensively. Those are what I use for my other projects. The dev.to type had been sitting there since I shipped it. Never actually used it.

So I added this to my config:

{
  id: 'devto',
  name: 'dev.to/manningworks',
  type: 'devto',
  username: 'manningworks',
  status: 'active',
  // ... background, timeline, all the usual fields
}

Hit the projects page. The card rendered fine. Name, description, timeline, all good. But the stats section was completely empty. No articles. No views. No reactions.

My first thought was that the API call was failing silently. Maybe a network error I wasn't catching, or the username was wrong somehow. I checked the npm run dev console logs. Nothing. The fetch had run fine. One article, valid JSON. The data was there.

So the fetch was working. Something else was wrong.

Layer One: Wrong API Field Names

I opened the API response side by side with the Projex source code. That's when I saw it.

Here's what Projex's fetchDevToUser was doing:

const totalViews = data.reduce(
  (sum, article) => sum + article.page_views_count, 0
);
const totalReactions = data.reduce(
  (sum, article) => sum + article.positive_reactions_count, 0
);

And here's what the live API response actually contained: public_reactions_count and no page_views_count at all.

Two problems.

page_views_count is only returned on authenticated requests. The public API doesn't include it. So it was undefined, and 0 + undefined = NaN.

positive_reactions_count was deprecated by dev.to in favour of public_reactions_count. The public response returns public_reactions_count, not positive_reactions_count.

So both values were NaN. The stats existed but were garbage. The component saw NaN !== undefined as true, tried to render them, and... nothing rendered properly.

Classic. I'd written code against API docs without actually checking what the live response looks like.

Raised an issue on my own repo. Fixed the field names. Shipped Projex 1.2.0.

Then I updated my site to 1.2.0, reloaded the page, and... still no stats. Different reason this time, but same empty card.

Layer Two: Missing Render Block

But that wasn't the only problem. Even if the stats had been correct from the start, they still wouldn't have shown up.

I started digging through ProjectDetail.tsx, the component that renders project cards. It had render blocks for GitHub stats (stars, forks), npm stats (downloads, version), and Product Hunt stats (upvotes, comments).

No dev.to block. At all.

The component knew about three stat types. Projex supported nine project types. I'd never added the render logic for the newer ones because I'd never needed it. The data was there, normalised and everything. The component just had no idea what to do with it.

So I added a dev.to section:

{project.stats.articleCount !== undefined || /* ... */ ? (
  <div className="mb-4">
    <span className="text-xs text-terminal-dim">dev.to: </span>
    <div className="flex flex-wrap gap-2 mt-2">
      {/* articles, views, reactions */}
    </div>
  </div>
) : null}

Same pattern as the other stat blocks. Nothing clever.

Saved it. Reloaded. Articles showed up. Views showed 0. Reactions were still missing. Of course they were.

Layer Three: Renamed Property

The 1.2.0 release renamed averageReactions to totalReactions (separate fix, separate issue). But my component was still checking for averageReactions. TypeScript caught it immediately — red squiggle, clear error. Which was nice, but still. Three separate issues stacked on top of each other.

Fixed the property name in the component. Reactions showed up. 0 reactions, which is accurate since I'd just published my first post.

Layer Four: Views Need an API Key

Views were showing 0. The dev.to public API doesn't return page_views_count. The 1.2.0 fix added support for DEV_TO_API_KEY as an environment variable. If set, the library sends it as an api-key header, and dev.to returns view counts.

I have a dev.to API key. Just need to add it to .env.local.

That's a config step, not a code fix. But it's another thing I wouldn't have known about without actually trying to use the feature.

Tests Passed. Nothing Worked.

Projex has tests. It has Zod schema validation. The types all check out. None of that caught any of this.

The dev.to integration passed validation because the schema was correct. The types were correct. The API call was going to the right endpoint. The code was doing exactly what it was written to do. It was just written against the wrong field names and the component had no way to display the results.

Four separate issues. All invisible until I actually used the thing.

I wrote a retrospective about shipping this library. Published it on npm. And the first time I tried to use a feature I hadn't personally tested, it fell apart immediately.

That's dogfooding. Not the fun kind where your product works great and you feel smug. The kind where you realise your test coverage gave you false confidence and the only way to find real problems is to actually run the software yourself.

Projex 1.2.0 is out now. Dev.to integration works. I know because I'm using it.

The four issues, if you're keeping score:

page_views_count not in public API response (needs auth)
positive_reactions_count deprecated, should be public_reactions_count
No render block in the component for dev.to stats
averageReactions renamed to totalReactions, component not updated

All found by trying to add one project to my own site.