Documentation
Documentation
Section titled “Documentation”Introduction
Section titled “Introduction”Documentation is the guidebook for your codebase. It answers questions before they’re asked, reduces onboarding time, and helps everyone understand why decisions were made. But documentation doesn’t need to be overwhelming — a few strategic documents go a long way.
Why Do We Need This?
Section titled “Why Do We Need This?”- Reduces interruptions: Well-documented projects get fewer “how does this work?” questions
- Preserves knowledge: Team members leave, but documentation stays
- Speeds up onboarding: New developers can ramp up faster
- Prevents mistakes: Clear setup docs reduce configuration errors
Real World Analogy
Section titled “Real World Analogy”Documentation is like a recipe book. You don’t need a novel for every dish — just clear steps, accurate measurements, and a photo of the finished result. The best recipes are the ones that work the first time.
What to Document
Section titled “What to Document”1. README (Essential)
Section titled “1. README (Essential)”Every project needs a README. Keep it short and focused.
# Project Name
Brief description of what the project does.
## Tech Stack
- Next.js 14 (App Router)- TypeScript- Prisma (PostgreSQL)- Auth.js
## Getting Started
\`\`\`bashgit clone https://github.com/org/projectcd projectnpm installcp .env.example .envnpm run dev\`\`\`
## Project Structure
A quick overview of the main directories.2. Setup Guide
Section titled “2. Setup Guide”Document environment setup for new developers.
## Environment Setup
1. Copy \`.env.example\` to \`.env\`2. Get API keys from: - Database: [Vercel Postgres Dashboard](https://vercel.com/dashboard) - Auth: [GitHub OAuth App](https://github.com/settings/developers)3. Run database migrations: \`npx prisma migrate dev\`4. Seed sample data: \`npx prisma db seed\`3. Architecture Decision Records (ADRs)
Section titled “3. Architecture Decision Records (ADRs)”For significant decisions, document why you chose one approach over another.
# ADR-001: Use Auth.js for Authentication
## ContextWe needed authentication with Google and GitHub login, session management, and middleware route protection.
## DecisionUse Auth.js (next-auth) because:- Built-in support for OAuth providers- Works with Server Components and Middleware- Active maintenance and community
## Alternatives Considered- Clerk: Excellent DX but vendor lock-in- Supabase Auth: Good if already using Supabase- Custom Auth: Too much maintenance for our team size
## StatusAccepted4. Component Documentation
Section titled “4. Component Documentation”For reusable components, document props and usage.
/** * Avatar component with fallback initials. * * @example * <Avatar name="John Doe" image="/photos/john.jpg" size="lg" /> * * @param {string} name - Display name (initials shown when no image) * @param {string} [image] - Optional image URL * @param {'sm' | 'md' | 'lg'} [size='md'] - Avatar size */export function Avatar({ name, image, size = 'md' }: AvatarProps) { // ...}5. Runbook
Section titled “5. Runbook”Document common operational tasks.
## Runbook
### Deploy a hotfix1. Create a branch from main2. Fix the issue3. Get a code review4. Merge and deploy
### Roll back a deployment1. Go to Vercel dashboard2. Select the deployment3. Click "Promote to Production" on the previous version
### Clear Redis cache\`\`\`bashredis-cli FLUSHALL\`\`\`Documentation Tools
Section titled “Documentation Tools”| Tool | Purpose | When to Use |
|---|---|---|
| README | Project overview | Always |
| JSDoc/TSDoc | Code-level docs | For reusable functions and components |
| Storybook | Component library | For shared UI components |
| Wiki (GitHub/GitBook) | Team guides | For processes and runbooks |
Best Practices
Section titled “Best Practices”- Keep documentation close to the code (in the same repo)
- Update docs when you make changes — stale docs are worse than no docs
- Use examples over long explanations
- Write for the newest team member — they’ll thank you
- Use
// TODO: update docsas a reminder when you skip documentation in a PR - Document why, not what — the code already shows what
Common Mistakes
Section titled “Common Mistakes”- Documentation rot: Not updating docs when code changes
- Over-documenting: Writing a novel for a simple utility function
- Assuming knowledge: Skipping basics that new team members need
- Scattered docs: Information spread across README, wiki, Notion, and Slack with no single source of truth
Summary
Section titled “Summary”Good documentation doesn’t need to be comprehensive — it needs to be accurate, findable, and maintained. A short README, component-level comments, and a few ADRs for major decisions will cover 90% of what your team needs.