Skip to main content
Vocab Vault features a comprehensive achievement system with over 30 unlockable achievements that reward your learning journey.

Achievement Categories

Achievements are organized into several categories:

Category Mastery

Complete all terms in a category to unlock its achievement:

Foundation Setter

Master all Foundation category terms

API Wizard

Master all API category terms

Code Warrior

Master all Code category terms

Cloud Commander

Master all Cloud/Development terms

Design Guru

Master all UI/UX category terms

Money Maker

Master all Business category terms

QA Engineer

Master all Testing category terms

System Architect

Master all Architecture terms

Growth Hacker

Master all SEO category terms

Data Scientist

Master all Analytics terms

White Hat

Master all Security category terms

App Developer

Master all Mobile category terms

Citizen Developer

Master all No-Code category terms

Streak Achievements

Build consistent study habits and unlock streak achievements:

Heating Up

Reach a 3-day study streak

On Fire

Reach a 7-day study streak

Monthly Master

Reach a 30-day study streak

Vocabulary Milestones

Celebrate your growing knowledge:

Hello World

Master your very first term. Your journey begins!

The Polyglot

Master at least 1 term from 5 different categories

Vocab Viking

Know 100 terms total

Vibe Coding God

Know 500 terms total. You are legendary.
The “Vibe Coding God” achievement requires 500 terms, but the current vocabulary database contains 483 terms. This achievement is currently unattainable and may be adjusted in a future update.

Hidden Achievements

Discover secret achievements by exploring the app:
Spoilers ahead! Hidden achievements won’t appear in your trophy room until unlocked.
Click the logo 5 times to find the secret vibe switch
Click the logo 50 times. Are you okay?
Know 550 terms. You have transmuted code into gold.
Study between 5AM - 8AM. Dedication!
Study way past bedtime (12AM - 4AM)
Study on a Saturday or Sunday
Study on a Friday. Brave soul.
View 50 cards but master ZERO. Just looking?
Master 10 AI terms. Are you even human?

Easter Egg Achievements

Extra hidden achievements with playful references:
  • Trap’s Ambush: Master 10 Security terms
  • Harlem’s Shake: Master 10 CSS terms (master of style)
  • Nita’s Library: Master 10 Data terms
  • Petra’s Pillow: Master 10 Architecture terms (so stable you can sleep on it)
  • Donna’s Empire: Master 10 Business terms (business mogul)

How Achievements Work

Achievements are checked dynamically based on your user statistics:
export interface UserStats {
  totalCardsViewed: number;
  unlockedAchievements: string[];
  categoryProgress: Record<string, number>;
  streak: number;
  logoClicks?: number;
  lastStudyTime?: number;
}
Each achievement has a condition function:
{
  id: 'streak_7',
  title: 'On Fire',
  description: 'Reach a 7-day study streak',
  icon: 'whatshot',
  condition: (stats) => stats.streak >= 7
}

Trophy Room

View all achievements in the Trophy Room:
  • Unlocked achievements appear in full color with vibrant gradients
  • Locked achievements appear grayed out and partially visible
  • Hidden achievements show as ”???” until unlocked
  • Track your completion percentage
Unlocked achievements are sorted to the top of the list so you can admire your collection!

Dynamic Thresholds

Category mastery achievements adapt to the actual term count:
function catSize(id: CategoryId): number {
  return getTermsByCategory(id).length;
}

{
  id: 'master_foundation',
  title: 'Foundation Setter',
  description: 'Master all terms in the Foundation category',
  icon: 'architecture',
  category: 'foundation',
  condition: (stats) => (stats.categoryProgress['foundation'] || 0) >= catSize('foundation')
}
This means achievements automatically adjust if vocabulary is added or removed.

Achievement Notifications

When you unlock a new achievement:
  1. A celebration notification appears
  2. The achievement is saved to your profile
  3. Your Trophy Room updates
  4. The achievement appears with its unique icon and description
Achievement unlock notification

Implementation Details

Achievements are defined in /src/data/achievements.ts:
export interface Achievement {
  id: string;
  title: string;
  description: string;
  icon: string;
  category?: CategoryId;
  isHidden?: boolean;
  condition: (stats: UserStats) => boolean;
}
The useProgress hook checks achievements automatically:
// Check achievements after marking a term
const checkAchievements = useCallback(async (
  currentProgress: Progress,
  currentStreak: number,
  currentViews: number,
  currentClicks: number,
  currentUnlocked: string[]
) => {
  const stats = getCurrentStats(currentProgress, currentStreak, currentViews, currentClicks, currentUnlocked);
  const newUnlocked: string[] = [];
  
  ACHIEVEMENTS.forEach(achievement => {
    if (!currentUnlocked.includes(achievement.id)) {
      if (achievement.condition(stats)) {
        newUnlocked.push(achievement.id);
      }
    }
  });
  
  if (newUnlocked.length > 0) {
    // Save and notify user
  }
}, [getCurrentStats]);

Tips for Completionists

Study at different times

Unlock time-based achievements by studying at various hours

Explore all categories

Don’t focus on just one—spread your learning across categories

Click everything

Hidden achievements often reward curiosity and exploration

Build long streaks

Consistency unlocks the most prestigious achievements

Streaks

Build daily practice streaks

Daily Goals

Set and track daily study targets

Spaced Repetition

Learn about the SRS algorithm

Build docs developers (and LLMs) love