DevCache is a developer knowledge hub for organizing, tagging, and quickly retrieving your most-used code snippets, links, files, and notes. Think of it as a bookmarks manager and snippet library built specifically for developers.
- Collections — Group related items into custom collections for quick access
- Custom Item Types — Create your own categories (e.g., React hooks, API endpoints, CSS tricks) with icons and colors
- Tags — Add tags to items for flexible cross-cutting organization
- Favorites & Pins — Mark frequently used items as favorites or pin them to the top
- File Uploads — Upload and store files (images, PDFs, etc.) with R2/S3-compatible storage
- Code Editor — Built-in Monaco editor with syntax highlighting for code snippets
- AI-Powered — OpenRouter integration for AI-assisted features
- Authentication — Secure auth via NextAuth with GitHub OAuth and email/password support
- Pro Subscriptions — Stripe-powered billing for premium features
- Rate Limiting — Redis-backed rate limiting to protect API endpoints
- Dark Mode — Beautiful dark UI with Tailwind CSS v4
- Framework:Next.js 16 (App Router)
- Frontend: React 19, Tailwind CSS v4, Radix UI, shadcn/ui components
- Database: PostgreSQL with Prisma 7 ORM
- Auth: NextAuth v5 (beta)
- Storage: Cloudflare R2 (AWS S3-compatible)
- Email Verification: Resend
- Payments: Stripe
- Rate Limiting: Upstash Redis
- AI: OpenRouter API
- Testing: Vitest
This project was built using an AI-assisted development workflow — not vibe coding, but a structured process where AI acts as a collaborator at every stage: planning, architecture, implementation, and code review.
The workflow includes:
- Context engineering — maintaining CLAUDE.md, feature specs, and coding standards as persistent AI context
- Claude Code as the primary development interface (plan mode, custom commands, subagents)
- MCP integrations — Neon (database), Playwright (E2E tests), Context7 (docs lookup)
- Custom subagents for targeted tasks (code audits, UI review)
- Human-in-the-loop review on all generated code — architecture decisions remain intentional, not accidental
- Node.js 20+ with npm package manager
- PostgreSQL database (local or cloud e.g. Neon)
- GitHub OAuth App (for authentication)
git clone https://github.com/technowizard/devcache.git
cd devcache
npm installCopy the example environment file and fill in your values:
cp .env.example .envRequired for basic local development:
| Variable | Description |
|---|---|
DATABASE_URL | PostgreSQL connection string (use pooled connection for serverless) |
AUTH_SECRET | Random secret for NextAuth — generate with npx auth secret |
AUTH_GITHUB_ID | GitHub OAuth App Client ID |
AUTH_GITHUB_SECRET | GitHub OAuth App Client Secret |
Optional:
| Variable | Description |
|---|---|
EMAIL_VERIFICATION_ENABLED | Set to "true" to require email verification |
RESEND_API_KEY | For transactional emails (verification, password reset) |
UPSTASH_REDIS_REST_URL / UPSTASH_REDIS_REST_TOKEN | Rate limiting (fail-open if unset) |
R2_* | Cloudflare R2 credentials for file uploads |
STRIPE_* | Stripe keys for subscriptions |
OPENROUTER_API_KEY | For AI features |
IS_PRO_ENABLED | Set to "true" to enable Pro feature gating |
# Generate Prisma client
npm run db:generate
# Run migrations
npm run db:migrate
# (Optional) Seed the database
npm run db:seednpm run devOpen http://localhost:3000 in your browser.
| Command | Description |
|---|---|
npm run dev | Start development server |
npm run build | Build for production |
npm run start | Start production server |
npm run lint | Run ESLint |
npm run db:migrate | Run Prisma migrations in development |
npm run db:deploy | Deploy migrations in production |
npm run db:generate | Generate Prisma client |
npm run db:seed | Seed the database |
npm run db:studio | Open Prisma Studio (database GUI) |
npm run test | Run tests once |
npm run test:watch | Run tests in watch mode |
npm run test:coverage | Run tests with coverage report |
devcache/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── (marketing)/ # Public landing page
│ │ ├── (auth)/ # Sign in, register, password reset
│ │ ├── (dashboard)/ # App dashboard, collections, settings
│ │ └── api/ # API routes (auth, items, upload, stripe)
│ ├── components/ # React components
│ ├── lib/ # Utilities, Prisma client, auth config
│ └── generated/prisma/ # Auto-generated Prisma client
├── prisma/
│ └── schema.prisma # Database schema
├── scripts/ # Utility scripts
└── public/ # Static assets
The app uses PostgreSQL with the following main entities:
- User — accounts with optional Pro subscription
- Item — the core entity (snippets, links, files, text) with metadata
- ItemType — custom categories per user (e.g., "React Hook", "API Endpoint")
- Collection — user-defined groups of items
- Tag — shared tags across items
DevCache supports two authentication methods:
- GitHub OAuth — One-click sign in
- Email/Password — Registration with optional email verification
Configure your GitHub OAuth app callback URL as:
http://localhost:3000/api/auth/callback/github
The scripts/ folder contains utility scripts for local development:
| Script | Command | Description |
|---|---|---|
test-db.ts | npm run db:test | Verifies the database connection, lists item types, demo user, collections, and total item count. Useful for quickly checking that your local database is seeded and healthy. |
purge-users.ts | npm run db:purge-users | Deletes all users except the demo user (demo@devcache.app). Useful for cleaning up test accounts during development. |
Run any script directly with:
npx tsx scripts/<script-name>.tsThe easiest way to deploy is on Netlify:
- Push your code to GitHub
- Import the project on Netlify and select your repository
- Add your environment variables in the Netlify dashboard (Site settings > Environment variables)
- Deploy
Make sure to set your production DATABASE_URL and AUTH_SECRET before deploying.
Note: If you are using Next.js 16, ensure your Netlify build settings use the latest build image and Node.js 20+.
This project uses an AI-assisted development workflow powered by specialized agents, skills, and contextual documentation. The workflow is designed to maintain consistency, quality, and traceability across AI-assisted coding sessions.
Agents are specialized AI personas for specific audit and review tasks:
| Agent | Purpose |
|---|---|
| auth-auditor | Audits authentication and authorization code for security issues (password hashing, rate limiting, token entropy, email verification, password reset flows, session validation) |
| code-scanner | Performs thorough codebase audits for security vulnerabilities, performance bottlenecks, code quality issues, and oversized files that need splitting |
| refactor-scanner | Scans specific folders for duplicate code, repeated patterns, and refactoring opportunities (utilities, components, hooks, constants) |
| ui-reviewer | Reviews UI for visual issues, responsiveness (mobile/tablet/desktop), accessibility, and marketing page effectiveness using Playwright |
Trigger these agents after completing features, before releases, or on demand for periodic reviews.
Skills are reusable workflow automation tools:
| Skill | Purpose |
|---|---|
| cleanup | Housekeeping tasks — checks for console.logs, unused imports, stale TODOs, orphaned files, stale @ts-ignore comments, and .env consistency. Use check to report only, or run to execute fixes. |
| feature | Manages the full feature lifecycle from spec to merge. Tracks progress in @context/current-feature.md with actions: load, start, review, test, explain, complete. |
| list-components | Lists all React components in the project, optionally filtered by subdirectory. Useful for navigation and code exploration. |
| research | Executes research tasks from prompt files (@context/research/<prompt-name>.md) and writes findings to @docs/. Produces documentation only — no code changes. |
The context/ directory stores all AI workflow state and project context:
| File/Folder | Purpose |
|---|---|
ai-interaction.md | Guidelines for how AI assistants should interact with the codebase |
coding-standards.md | Project-specific coding conventions and standards |
current-feature.md | Active feature tracking — status, goals, notes, and history |
features/ | Feature specifications and breakdowns |
project-overview.md | High-level project architecture and decisions |
research/ | Research prompt templates for the research skill |
screenshots/ | Visual references and UI screenshots |
The docs/ directory contains research results, architecture decisions, and audit reports:
| File/Folder | Purpose |
|---|---|
ai-integration-plan.md | Plan for AI feature integration |
audit-results/ | Security and code quality audit reports generated by agents |
item-crud-architecture.md | Architecture documentation for item CRUD operations |
item-types.md | Documentation for the item type system |
stripe-integration-plan.md | Plan for Stripe payment integration |