DevTerms - That word everyone keeps saying

Look it up before the standup ends. A minimal, production-ready web app for learning developer terminology in seconds. No bloat, no nonsense-just the terms your team throws around without explaining.

🔗 Live Demo | 📖 Read the Docs

✨ Features

• Random Term Display - One click, one fresh term every time
• Instant Search - SEO-optimized pages for every term (/term/sprint, /term/monorepo, etc.)
• Rich Metadata - Category, subcategory, type, meaning, real-world examples, and related terms
• Share as Image - Export any term as a 1080×1080 JPG for social media or Slack
• Copy Permalink - One-click link copying with visual feedback
• Responsive Design - Looks perfect on desktop, tablet, and mobile
• Dark Mode First - Beautiful gradient UI inspired by modern developer tools
• Zero Dependencies - Hosted on Vercel free tier, zero additional costs

🚀 Quick Start

Prerequisites

• Node.js 18+ and npm
• A Google Sheet with terms organized in columns (see Sheet Structure below)
• Google Service Account credentials (see Setup)

Setup

1. Clone the repo:

   git clone https://github.com/sakib963/dev-terms.git
   cd dev-terms

2. Install dependencies:

   npm install

3. Configure environment variables:

   cp .env.example .env.local

   Fill in .env.local:

   GOOGLE_SPREADSHEET_ID=your-spreadsheet-id-here
   GOOGLE_SERVICE_ACCOUNT_EMAIL=your-service-account@your-project.iam.gserviceaccount.com
   GOOGLE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----\n"
   NEXT_PUBLIC_BASE_URL=https://your-app.vercel.app
   REFRESH_SECRET=generate-with-openssl-rand-hex-24

4. Run locally:

   npm run dev

   Open http://localhost:3000

5. Build for production:

   npm run build
   npm start

📊 Sheet Structure

Create a Google Sheet named "db" with these columns (A-L):

Column	Name	Example
A	ID	001
B	Term	monorepo
C	Meaning	A single repository containing multiple projects
D	Category	Architecture
E	Subcategory	Monolithic
F	Type	Pattern
G	Confidence	High
H	Source	https://example.com
I	Date Added	2024-04-01
J	Example	"Our frontend and backend live in the same monorepo"
K	Related Terms	polyrepo, dependency-hell, nx
L	Notes/Reference	https://monorepo.guide

Key requirements:

• Share the sheet with your Service Account email (Viewer role is enough)
• All URLs in column L are auto-detected and made clickable
• Columns B (Term) and C (Meaning) are required; others are optional

🔐 Google Service Account Setup

1. Go to Google Cloud Console
2. Create a new project
3. Enable the Google Sheets API
4. Create a Service Account:
   • Go to Service Accounts → Create Service Account
   • Name it something like "DevTerms"
   • Copy the email address
5. Create a JSON key:
   • Click the service account you just created
   • Go to Keys → Add Key → Create new key → JSON
   • Extract client_email and private_key values
6. Share your Google Sheet with the service account email (Viewer access)

🚀 Deploy to Vercel

1. Push your repo to GitHub
2. Go to Vercel and import your repository
3. Add environment variables from .env.example
4. Deploy in one click

Cost: $0 (Vercel free tier)

🔄 Cache & Invalidation

Terms are cached for 7 days to minimize API calls to Google Sheets.

To force a refresh:

curl "https://your-app.vercel.app/api/refresh?key=$REFRESH_SECRET"

Returns { revalidated: true, now: <timestamp> }

📱 API Endpoints

GET /api/random

Returns a random term.

{
  "id": "001",
  "term": "monorepo",
  "slug": "monorepo",
  "meaning": "A single repository containing multiple projects",
  "category": "Architecture",
  "subcategory": "Monolithic",
  "type": "Pattern",
  "example": "Our frontend and backend live in the same monorepo",
  "relatedTerms": ["polyrepo", "dependency-hell"],
  "notes": "https://monorepo.guide"
}

GET /api/refresh?key=<REFRESH_SECRET>

Invalidates the 7-day cache immediately. Requires REFRESH_SECRET env var.

🛡️ Security

• ✅ No credentials in frontend code
• ✅ Service Account JWT auth only (read-only access)
• ✅ Database never exposed via public API
• ✅ Cache prevents rate-limit abuse
• ✅ Vercel DDoS protection included

♿ Accessibility

• ✅ Respects prefers-reduced-motion for smooth animations
• ✅ Semantic HTML with proper ARIA labels
• ✅ Keyboard navigation support
• ✅ High contrast dark-mode design

📄 SEO

• Auto-generated sitemap (/sitemap.xml)
• Per-term Open Graph tags for social sharing
• Dynamic meta descriptions
• Search engine friendly URL structure (/term/[slug])

🎨 Tech Stack

• Framework: Next.js 16.2.3 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• Database: Google Sheets (via Service Account JWT)
• Caching: Next.js built-in cache components (7-day TTL)
• Hosting: Vercel
• Canvas: Browser Canvas API for image export

📈 Performance

• Static pre-rendering: 1s response time for /term/[slug] pages
• 7-day cache: Minimal API calls to Google Sheets
• Lightweight: No client-side JavaScript bloat
• Mobile optimized: Responsive design, tested on all screen sizes

🤝 Contributing

Found a bug or want to add a feature? Issues and PRs welcome!

1. Fork the repo
2. Create a feature branch: git checkout -b feature/my-term
3. Commit changes: git commit -am 'Add my term'
4. Push: git push origin feature/my-term
5. Open a Pull Request

📝 License

MIT License - see LICENSE for details

---

Built with ♥ by Sakib

Questions? Open an issue or reach out on GitHub.