[GOOD FIRST ISSUE] Add streak milestone badges to StreakTracker

[Priyanshu-byte-coder]

What needs to be done

Add milestone badge(s) to the StreakTracker component that appear when the user's current streak hits a milestone (3, 7, 14, or 30 days).

Why this matters

Milestone badges reward consistency and give users a reason to maintain their streak — similar to Duolingo or GitHub's achievement system.

Exact file to edit

src/components/StreakTracker.tsx

Add below the stats grid (around line 85, after the closing </div> of the grid):

const MILESTONES = [
  { days: 30, label: "30-day streak!", emoji: "🏅" },
  { days: 14, label: "2-week streak!", emoji: "⭐" },
  { days: 7,  label: "7-day streak!",  emoji: "🔥" },
  { days: 3,  label: "3-day streak!",  emoji: "✨" },
];

// Find the highest milestone reached
const badge = MILESTONES.find(m => (data?.current ?? 0) >= m.days);

// Render below stats grid, only if badge exists
{badge && (
  <div className="mt-3 flex items-center gap-2 bg-indigo-500/10 border border-indigo-500/30 rounded-lg px-3 py-2">
    <span>{badge.emoji}</span>
    <span className="text-indigo-300 text-sm font-medium">{badge.label}</span>
  </div>
)}

Acceptance criteria

• Badge appears only when current streak >= milestone
• Shows only the highest milestone (e.g. 14-day streak unlocked → show 14-day badge, not 3 or 7)
• Badge matches existing indigo/slate color theme
• No layout shift when badge appears/disappears
• npm run lint and npm run type-check pass

Setup

See DEVELOPMENT.md to get running locally.

Mentorship

Comment "I'd like to work on this" to get assigned.

[Tannuu18]

HI @Priyanshu-byte-coder
I would like to work on this issue as part of GSSoC 2026.

Please assign me this issue.

[Shravani-36]

Hi I am interested to work on this issue