Skip to main content

​
Overview

The DSA Tracker is a dedicated component for logging Data Structures and Algorithms problems you solve each day. It helps you maintain accountability and track your coding practice alongside your workout routine.
The DSA Tracker component exists in the codebase (DsaTrackerTab.jsx) but is currently not integrated into the main navigation. This documentation covers its design and intended functionality.

​
Component Structure

The DSA Tracker features a clean, focused interface:
  • Header card - Shows solved problem count for today
  • Input section - For logging new problems
  • Solved list - Displays all problems logged today
  • Clear function - Reset today’s DSA progress

​
Header Design

From DsaTrackerTab.jsx:12-22: 
<Card className="border-0 bg-gradient-to-br from-emerald-500 via-cyan-500 to-blue-600 text-white shadow-[0_20px_42px_-22px_rgba(6,182,212,0.85)]">
  <CardHeader>
    <CardTitle className="flex items-center gap-2 text-xl">
      <Code2 className="h-5 w-5" />
      DSA Tracker
    </CardTitle>
    <CardDescription className="text-cyan-50/90">
      Solved today: {solvedProblems.length}
    </CardDescription>
  </CardHeader>
</Card>

Gradient Design

Uses an emerald-to-blue gradient to distinguish it from workout tracking.

Live Counter

Shows the number of problems solved today in real-time.

​
Logging Problems

To log a DSA problem you’ve solved:
1

Enter problem name

Type the problem name or number in the input field (e.g., “347. Top K Frequent Elements”).
2

Click Add

Click the Add button to log the problem.
3

View in list

The problem appears in the “Today’s Solved List” section below.

​
Implementation Details

From DsaTrackerTab.jsx:30-49: 
<div className="flex items-center gap-2">
  <Input
    value={problemName}
    onChange={(event) => setProblemName(event.target.value)}
    placeholder="e.g. 347. Top K Frequent Elements"
  />
  <Button
    type="button"
    onClick={() => {
      const trimmed = problemName.trim();
      if (!trimmed) {
        return;
      }
      onAddProblem(trimmed);
      setProblemName("");
    }}
  >
    Add
  </Button>
</div>
The input field automatically trims whitespace and clears after adding a problem, making it easy to log multiple problems in succession.

​
Viewing Solved Problems

The solved list displays all problems you’ve logged today:
  • Gradient cards - Each problem appears in a white-to-emerald gradient card
  • Problem name - The full problem text you entered
  • Remove button - Trash icon to delete incorrectly logged problems
  • Empty state - Shows “No problems logged yet” when the list is empty

​
List Implementation

From DsaTrackerTab.jsx:63-92: 
<Card>
  <CardHeader>
    <CardTitle>Today&apos;s Solved List</CardTitle>
  </CardHeader>
  <CardContent>
    {solvedProblems.length === 0 ? (
      <p className="text-sm text-slate-500 dark:text-zinc-300">No problems logged yet.</p>
    ) : (
      <ul className="space-y-2">
        {solvedProblems.map((problem, index) => (
          <li
            key={`${problem}-${index}`}
            className="flex items-center justify-between gap-2 rounded-xl border border-slate-200 bg-gradient-to-r from-white to-emerald-50/60 p-3 text-sm"
          >
            <span className="text-slate-800 dark:text-zinc-100">{problem}</span>
            <Button
              type="button"
              size="icon"
              variant="ghost"
              onClick={() => onRemoveProblem(index)}
              aria-label={`Remove ${problem}`}
            >
              <Trash2 className="h-4 w-4 text-slate-500 dark:text-zinc-300" />
            </Button>
          </li>
        ))}
      </ul>
    )}
  </CardContent>
</Card>
The key uses both problem and index because users might solve the same problem multiple times in a day (e.g., different approaches). Using only the problem name would cause React key conflicts.

​
Removing Problems

To remove a problem from today’s list:
  1. Click the trash icon next to the problem name
  2. The problem is immediately removed from the list
  3. The counter in the header updates automatically
Use the remove function to correct typos or accidental entries without clearing your entire day’s progress.

​
Clearing Today’s List

To reset all DSA problems for today:
1

Click Clear Today

Click the Clear Today button below the problem input.
2

Confirm reset

The entire list is cleared (implementation may include confirmation dialog).
From DsaTrackerTab.jsx:51-59: 
<Button
  type="button"
  variant="outline"
  disabled={solvedProblems.length === 0}
  onClick={onClearToday}
  className="w-full"
>
  Clear Today
</Button>
The Clear Today button is disabled when no problems are logged, preventing accidental clicks.

​
Data Management

The DSA Tracker expects these props: 
interface DsaTrackerTabProps {
  solvedProblems: string[];           // Array of problem names
  onAddProblem: (problem: string) => void;     // Add a new problem
  onRemoveProblem: (index: number) => void;    // Remove problem by index
  onClearToday: () => void;                     // Clear all problems for today
}

{
  "dsaProblems": {
    "2026-03-07": [
      "347. Top K Frequent Elements",
      "42. Trapping Rain Water",
      "1. Two Sum"
    ],
    "2026-03-06": [
      "200. Number of Islands",
      "139. Word Break"
    ]
  }
}
Store DSA problems in localStorage with date keys, similar to workout tracking. This allows for historical tracking and streak calculations.

​
Integration Guide

To integrate the DSA Tracker into the main app:
1

Add state management

const [dsaProblems, setDsaProblems] = useLocalStorage("dsaProblems", {});
const todayProblems = dsaProblems[dateKey] || [];
2

Implement handlers

const addProblem = (problem) => {
  setDsaProblems(prev => ({
    ...prev,
    [dateKey]: [...(prev[dateKey] || []), problem]
  }));
};

const removeProblem = (index) => {
  setDsaProblems(prev => ({
    ...prev,
    [dateKey]: prev[dateKey].filter((_, i) => i !== index)
  }));
};

const clearToday = () => {
  setDsaProblems(prev => {
    const updated = {...prev};
    delete updated[dateKey];
    return updated;
  });
};
3

Add to navigation

Add a tab to BottomNav.jsx:
{ id: "dsa", label: "DSA", icon: Code2 }
4

Render in App

{activeTab === "dsa" && (
  <DsaTrackerTab
    solvedProblems={todayProblems}
    onAddProblem={addProblem}
    onRemoveProblem={removeProblem}
    onClearToday={clearToday}
  />
)}

​
Dark Mode Support

The DSA Tracker is fully compatible with dark mode:
  • Gradient header - Adjusts from emerald-cyan-blue to deeper tones
  • Problem cards - Transitions to zinc-based backgrounds
  • Text colors - Uses zinc palette for optimal readability
  • Icons - Maintains visibility with adjusted opacity

​
Potential Enhancements

Difficulty Tags

Add Easy/Medium/Hard tags to track problem difficulty distribution.

Platform Links

Auto-detect LeetCode numbers and add direct links to problems.

Time Tracking

Log how long each problem took to solve.

Streak Counter

Track consecutive days of solving at least one problem.
Consider adding categories like “Array”, “Graph”, “DP” to help users track which topics they’re practicing most.

Build docs developers (and LLMs) love

Get started for freeTalk to us