DevStash

A unified hub for developer knowledge & resources

Developers keep their essentials scattered across VS Code snippets, browser bookmarks, chat histories, bash history, and random folders. DevStash brings everything into one fast, searchable, AI-enhanced hub.

This project is part of the Coding With AI course by Brad Traversy.

The docs, spec files, and other resources for this project are available in the course resources repo.

The code exactly as it stood at the end of the course is preserved at the course-final tag, also packaged as the Course version release. Everything after that tag on main is post-course development.

Features

Core

• Save code snippets, AI prompts, terminal commands, notes, and links
• Upload files and images (Pro)
• Organize items into collections with many-to-many relationships
• Pin, favorite, and tag items for quick access
• Monaco code editor with syntax highlighting for 30+ languages
• Markdown editor with GitHub Flavored Markdown preview
• Global search / command palette (Cmd+K)
• Dark mode by default, light mode optional

• Auto-tag suggestions
• Description generator
• Code explanation
• Prompt optimizer

• Email/password and GitHub OAuth authentication
• Email verification and password reset flows
• Rate limiting on auth endpoints
• Stripe subscriptions (Free / Pro tiers)
• File uploads via Cloudflare R2
• Import/export data (JSON free, ZIP with files for Pro)
• Pagination, sorting, and filtering
• Responsive design (desktop, tablet, mobile)

Tech Stack

| Category | Technology | | -------------- | ------------------------------ | | Framework | Next.js 16 / React 19 | | Language | TypeScript 5 | | Database | Neon PostgreSQL | | ORM | Prisma 7 | | Auth | NextAuth v5 (JWT) | | Styling | Tailwind CSS v4 + shadcn/ui | | AI | OpenAI | | Payments | Stripe | | File Storage | Cloudflare R2 | | Rate Limiting | Upstash Redis | | Email | Resend | | Testing | Vitest |

Getting Started

Prerequisites

• Node.js 18+
• npm
• A Neon PostgreSQL database

Installation

git clone https://github.com/bradtraversy/devstash.git
cd devstash
npm install

Environment Variables

Copy the example env file and fill in your values:

cp .env.example .env

| Variable | Description | | -------- | ----------- | | NEXT_PUBLIC_APP_URL | App URL (default: http://localhost:3000) | | DATABASE_URL | Neon PostgreSQL connection string | | AUTH_SECRET | NextAuth secret (generate with npx auth secret) | | AUTH_GITHUB_ID | GitHub OAuth app ID | | AUTH_GITHUB_SECRET | GitHub OAuth app secret | | RESEND_API_KEY | Resend API key for emails | | SKIP_EMAIL_VERIFICATION | Set to true to skip email verification in dev | | UPSTASH_REDIS_REST_URL | Upstash Redis URL for rate limiting | | UPSTASH_REDIS_REST_TOKEN | Upstash Redis token | | R2_ACCOUNT_ID | Cloudflare R2 account ID | | R2_ACCESS_KEY_ID | R2 access key | | R2_SECRET_ACCESS_KEY | R2 secret key | | R2_BUCKET_NAME | R2 bucket name | | R2_PUBLIC_URL | R2 public URL | | OPENAI_API_KEY | OpenAI API key for AI features | | STRIPE_SECRET_KEY | Stripe secret key | | STRIPE_PUBLISHABLE_KEY | Stripe publishable key | | STRIPE_WEBHOOK_SECRET | Stripe webhook signing secret | | STRIPE_PRICE_ID_MONTHLY | Stripe monthly price ID | | STRIPE_PRICE_ID_YEARLY | Stripe yearly price ID |

Database Setup

# Run migrations
npx prisma migrate dev
Seed system item types (snippet, prompt, command, note, file, image, link)
npm run db:seed

Run

npm run dev

Open http://localhost:3000.

Scripts

| Command | Description | | ------- | ----------- | | npm run dev | Start dev server | | npm run build | Build for production | | npm run start | Start production server | | npm run lint | Run ESLint | | npm run test | Run tests (single run) | | npm run test:watch | Run tests (watch mode) | | npm run db:migrate | Create and run migrations | | npm run db:seed | Seed system item types | | npm run db:studio | Open Prisma Studio |

Quality Gate

npm run verify runs the typecheck, lint, unit tests, and production build in one command. A pre-push hook (installed automatically by npm install through the prepare script) refuses any push that fails it, and the GitHub Actions workflow in .github/workflows/ci.yml runs the identical command on every push and pull request.

Project Structure

src/
├── app/
│   ├── (auth)/          # Sign-in, register, verify, password reset
│   ├── api/             # API routes (upload, download, stripe, auth)
│   ├── collections/     # Collections list and detail pages
│   ├── dashboard/       # Main dashboard
│   ├── favorites/       # Favorites page
│   ├── items/           # Items list by type (/items/snippets, etc.)
│   ├── profile/         # User profile
│   ├── settings/        # Settings (editor prefs, billing, account)
│   └── page.tsx         # Marketing homepage
├── actions/             # Server actions (items, collections, ai, etc.)
├── components/
│   ├── ui/              # shadcn/ui components
│   ├── items/           # Item cards, drawer, dialogs
│   ├── collections/     # Collection cards, dialogs
│   ├── layout/          # Sidebar, top bar, user menu
│   ├── homepage/        # Marketing page components
│   └── shared/          # Reusable components
├── lib/
│   ├── db/              # Prisma queries (items, collections)
│   ├── prisma.ts        # Prisma client
│   ├── auth.ts          # NextAuth config
│   ├── stripe.ts        # Stripe client
│   ├── openai.ts        # OpenAI client
│   └── r2.ts            # Cloudflare R2 utilities
├── hooks/               # Custom React hooks
└── types/               # TypeScript type definitions

License

This project is licensed under the MIT License.