Skip to main content
Vocab Vault organizes vocabulary into 24 themed categories, each with a unique color scheme and icon. Categories help you focus your learning on specific topics.

​
All 24 Categories

Foundation

Core Concepts - PRD, MVP, Frontend, Backend, Deploy

APIs

Endpoints - API, Authentication, OAuth, Tokens

Code

Files - Repository, Commits, Branches, Dependencies

Development

Environment - IDE, Terminal, Debug, Console

Git

Version Control - Clone, Push, Pull, Merge

Cloud

Services - Firestore, Collections, Hosting

UI/UX

Design - Hero, Navbar, Cards, Modals

CSS

Styling - Selectors, Flexbox, Grid, Media Queries

AI

Prompts - LLMs, Temperature, RAG, Embeddings

No-Code

Tools - Webhooks, Automations, Workflows

Money

Business - Revenue, Conversion, SaaS concepts

Tools

Platforms - VSCode, GitHub, Figma

Shortcuts

Keys & CLI - Terminal commands, keyboard shortcuts

Security

Protection - Encryption, HTTPS, Tokens

Debugging

Fix Bugs - Stack traces, console logs, breakpoints

Analytics

Growth - Metrics, KPIs, A/B testing

Mobile

App Dev - Native, hybrid, responsive design

Data

Storage - Databases, queries, schemas

SEO

Visibility - Meta tags, keywords, crawling

Testing

QA - Unit tests, integration tests, E2E

Architecture

Systems - Microservices, monoliths, patterns

Hosting

Deploy - Vercel, Netlify, cloud platforms

AI Tools

Assistants - ChatGPT, Claude, Gemini, Cursor

Package

Build - npm, dependencies, bundlers

​
Category Card Design

Each category card displays:

​
Visual Elements

  • Number: Zero-padded category number (01-24)
  • Name: Category name (e.g., “Foundation”, “APIs”)
  • Subtitle: Short descriptor (e.g., “Core Concepts”, “Endpoints”)
  • Icon: Material icon representing the category
  • Abbreviation: Large background text (e.g., “FDN”, “API”)
  • Color: Unique background color from Tailwind custom palette

​
Progress Indicators

  • Progress Bar: Visual bar showing percentage of terms marked as “known”
  • Percentage: Numeric percentage (or “Start →” if 0%)
  • Due Count Badge: Shows number of cards due for review (SRS mode)
<CategoryCard
  index={0}
  name="Foundation"
  subtitle="Core Concepts"
  icon="architecture"
  abbrev="FDN"
  colorClass="bg-category-yellow"
  progress={45}
  dueCount={3}
  onClick={() => navigateToCategory('foundation')}
/>

​
Category Color Palette

Each category has a custom Tailwind color class: 
/* Example colors from the palette */
bg-category-yellow   /* Foundation - Warm yellow */
bg-category-gray     /* APIs - Neutral gray */
bg-category-pink     /* Code - Bright pink */
bg-category-blue     /* Development - Sky blue */
bg-category-olive    /* Git - Olive green */
bg-category-teal     /* Cloud - Teal */
bg-category-purple   /* UI/UX - Purple */
Colors are carefully chosen to:
  • Be visually distinct from each other
  • Maintain good contrast with text
  • Create memorable associations with topics

​
Category Progress Tracking

Progress is calculated per category: 
const getCategoryProgress = (categoryId: string) => {
  const categoryTerms = getTermsByCategory(categoryId);
  const knownCount = categoryTerms.filter(term => 
    progress[term.id] === 'known'
  ).length;
  const total = categoryTerms.length;
  const percentage = Math.round((knownCount / total) * 100);
  
  return { knownCount, total, percentage };
};
Example output: 
{
  "knownCount": 7,
  "total": 10,
  "percentage": 70
}

​
Spaced Repetition (SRS) Integration

When using SRS mode, category cards show additional information:

​
Due Count Badge

  • Displays number of cards due for review today
  • Animated pulse effect to draw attention
  • Only shows if count > 0
{dueCount > 0 && (
  <span className="px-1.5 py-0.5 text-[10px] font-bold bg-amber-500 text-white rounded-full animate-pulse">
    {dueCount} due
  </span>
)}

​
Study Queue

Clicking a category with due cards prioritizes:
  1. Due cards first (cards scheduled for review today)
  2. New cards second (up to daily limit, default 10)
See Progress Tracking for more on SRS mode.

​
Category Data Structure

export const categories = [
  {
    id: "foundation",
    name: "Foundation",
    subtitle: "Core Concepts",
    icon: "architecture",
    abbrev: "FDN",
    colorClass: "bg-category-yellow"
  },
  {
    id: "api",
    name: "APIs",
    subtitle: "Endpoints",
    icon: "integration_instructions",
    abbrev: "API",
    colorClass: "bg-category-gray"
  },
  // ... 22 more categories
] as const;

​
View Modes

Categories can be displayed in two layouts:

​
Grid View

  • Compact card grid
  • Shows 2-3 cards per row (responsive)
  • Fixed height cards (32-36px)
  • Rounded corners (rounded-2xl)

​
List View

  • Full-width cards stacked vertically
  • Variable height based on content
  • Border bottom instead of rounded corners
  • Default view
className={isGridView
  ? 'rounded-2xl border-2 h-32 sm:h-36'
  : 'min-h-32 border-b-2'
}

​
Click/Tap

Clicking a category card navigates to that category’s study view with all terms loaded.

​
Hover Effects

  • Slight scale up (scale: 1.03)
  • Lift effect (y: -2)
  • Icon scales slightly (scale-110)
  • Shadow increases for depth

​
Focus States

Accessible focus ring for keyboard navigation: 
focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2

​
Accessibility

  • role="button" for semantic meaning
  • tabIndex={0} for keyboard navigation
  • aria-label with full context: “Study Foundation - Core Concepts. Progress: 45%”
  • onKeyDown handler for Enter/Space activation

​
Animation

Category cards use Framer Motion for polish: 
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ delay: index * 0.03, duration: 0.2 }}
  whileHover={{ scale: 1.03, y: -2 }}
  whileTap={{ scale: 0.98 }}
/>
  • Staggered entrance: Each card animates in with a small delay
  • Hover lift: Cards rise slightly on hover
  • Tap feedback: Subtle scale down on click

​
Tips

Start with Foundation and Development categories. These cover essential concepts that appear across all other categories.
Focus on one category at a time until you reach 80%+ progress before moving to the next. This ensures solid retention.
Use the due count badges in SRS mode to prioritize your daily study. Cards due for review are your most efficient learning opportunity.

Build docs developers (and LLMs) love

Get started for freeTalk to us