I added category filtering to my blog. Not because I had too much free time, but because I thought my content will get messy - mixing actual thoughts with "hey, I just learned this" posts.

The Problem

My blog was suffering from what I call "digital hoarding syndrome" - everything was just... there. No way to filter between my actual thoughts and my dev experiments.

The Solution

I split content into two categories:

• Writeups: My actual thoughts and experiences
• Dev Stories: The "I just built this thing" posts

Smart Search

There was a small issue where if I was in the Writeups tab and searched for a dev story post, it would show no posts. I fixed this by adding a smart search feature that automatically switches to the tab containing the results.

const autoSwitchCategory = useMemo(() => {
  if (!searchQuery.trim()) return selectedCategory;
  
  let blogMatches = 0;
  let devMatches = 0;
  
  // Count matches in each category
  Object.values(postsByYear).flat().forEach(post => {
    const matches = post.title.toLowerCase().includes(query) ||
                   post.description.toLowerCase().includes(query);
    if (matches) {
      if (post.blogtype === 'blog') blogMatches++;
      if (post.blogtype === 'dev') devMatches++;
    }
  });
  
  // Auto-switch to the category with matches
  if (blogMatches > 0 && devMatches === 0) return 'blog';
  if (devMatches > 0 && blogMatches === 0) return 'dev';
  
  return selectedCategory;
}, [searchQuery, postsByYear, selectedCategory]);

The Technical Bits

Schema Update

schema: (z) => ({
  title: z.string(),
  description: z.string(),
  date: z.coerce.date(),
  image: z.string().optional(),
  blogtype: z.enum(['blog', 'dev']).default('blog'),
}),

Smart Filtering

The filtering handles two scenarios:

1. With search: Ignores categories, searches everything
2. Without search: Uses selected category filter

The Design Choice

I made everything rectangular (tabs and cards) for visual consistency. The container and individual elements are all rectangular to match the blog post cards.

Results

• Better UX: Easy category switching with smart search
• Cleaner Design: Consistent rectangular elements
• Easy Management: Just add blogtype: 'dev' to frontmatter

P.S. - If you're reading this, the search probably auto-switched you to the "Dev Stories" tab. See? It works! 🎉