WebGem is a curated directory for practical web tools. It focuses on tools that solve real work: debugging APIs, cleaning PDFs, checking privacy, planning research, building interfaces, automating tasks, and moving data around.
The project is built with Next.js, React, TypeScript, and Tailwind CSS. The catalog is stored as JSON so the site can stay fast, easy to review, and simple to deploy.
- 196 active vetted tools from a 210-item catalog
- 16 workflow collections
- Search, category filters, pricing filters, difficulty filters, and verified-link filters
- Tool detail pages with use cases, tradeoffs, quality signals, and verification metadata
- Data validation scripts for schema checks, duplicates, and catalog health
- Responsive homepage and directory views tuned for desktop, tablet, and mobile
- Next.js 15 App Router
- React 19
- TypeScript
- Tailwind CSS 4
- Lucide icons
- JSON-backed catalog data
npm install
npm run devThe local site runs at:
http://localhost:3000
npm run lint
npm run build
npm run data:check
npm run data:duplicates
npm run verifynpm run verify runs the data checks, lint, and production build. Use it before pushing changes.
src/app/ App Router pages and layouts
src/components/ Shared UI components
src/data/ Tool catalog, collections, and schema types
src/lib/ Data loading and search helpers
scripts/ Catalog validation and maintenance scripts
public/ Static assets, including the WebGem logo
Keep entries specific and useful. A good tool entry should explain what the tool does, who it is best for, why it is worth listing, and any tradeoffs a user should know before opening it.
Before adding or changing catalog data, run:
npm run data:checkMIT