WebGem

WebGem is a curated directory of high-utility tools for creators, operators, and developers.

What is live now

• 166 curated tools with practical use-case metadata
• 16 categories including new lanes like security, automation, analytics, research, writing, and no-code
• Multi-filter discovery (search, category, pricing, difficulty, sort)
• Saved tools (favorites) with local persistence
• Recently viewed section for faster return workflows
• Curated collections expanded to 21 stacks
• SEO upgrades (route-level metadata + JSON-LD)

Tech stack

• Next.js 15 (App Router)
• React 19
• TypeScript
• Tailwind CSS

Local setup

npm install
npm run dev

Open http://localhost:3000.

Quality commands

npm run data:check
npm run lint
npm run build
npm run verify

data:check validates:

• no duplicate tools by id/name/domain
• required schema fields for each tool
• collection references only valid tool IDs

Runtime cache fix (important)

If you see errors like Cannot find module './611.js' from .next/server/*, it is usually a stale Next build cache issue.

Use:

npm run clean:cache
npm run dev

predev and prebuild now clear .next automatically to prevent this.

Project structure

• src/data/tools.json - main tool dataset
• src/data/collections.json - curated stacks
• src/components/ToolDirectory.tsx - filtering and sorting UX
• src/components/ToolCard.tsx - card rendering + favorites
• src/components/RecentlyViewedSection.tsx - retention loop on homepage
• validate-data.js - data integrity guardrail