Skip to content

technowizard/devcache

BranchesTags

Repository files navigation

DevCache

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.

Features

  • 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

Tech Stack

  • 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

Development Approach

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

Prerequisites

  • Node.js 20+ with npm package manager
  • PostgreSQL database (local or cloud e.g. Neon)
  • GitHub OAuth App (for authentication)

Getting Started

1. Clone & Install

git clone https://github.com/technowizard/devcache.git
cd devcache
npm install

2. Environment Variables

Copy the example environment file and fill in your values:

cp .env.example .env

Required 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

3. Database Setup

# Generate Prisma client
npm run db:generate

# Run migrations
npm run db:migrate

# (Optional) Seed the database
npm run db:seed

4. Run Development Server

npm run dev

Open http://localhost:3000 in your browser.

Available Scripts

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

Project Structure

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

Database Schema

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

Authentication

DevCache supports two authentication methods:

  1. GitHub OAuth — One-click sign in
  2. Email/Password — Registration with optional email verification

Configure your GitHub OAuth app callback URL as: http://localhost:3000/api/auth/callback/github

Development Scripts

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>.ts

Deployment

The easiest way to deploy is on Netlify:

  1. Push your code to GitHub
  2. Import the project on Netlify and select your repository
  3. Add your environment variables in the Netlify dashboard (Site settings > Environment variables)
  4. 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+.

AI-Assisted Development Workflow

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

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

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.

Context

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

Documentation

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

License

MIT

About

A developer knowledge hub for fast retrieval of stored things such as snippets, prompts, etc.

devcache.netlify.app

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages