Back to Blog

Visualizing Student Progress in Real Time with Recharts and Supabase

Posted on May 4, 2025 · Tags: Data Analytics, EdTech, Visualization

I built an Admin Dashboard to help visualize how students are progressing across subjects — including XP earned, performance trends, and subject mastery. This is critical for evaluating where students are thriving and where they may need help.

Using Supabase for data storage and Recharts for rendering, I implemented multiple charts that reflect:

• Total XP and Level by Subject
• XP Earned from Freeform Prompts
• Average XP per Attempt
• Attempt Volume per Subject
• XP Growth Over Time

One of my favorite parts was building the XP-over-time line chart, which helps visualize skill growth. Here’s a snippet of how I gathered and processed that data:

// Fetch and group XP history by date and subject
const { data, error } = await supabase
  .from("user_prompt_attempts")
  .select("subject_id, xp_earned, timestamp")
  .order("timestamp", { ascending: true });

const subjectMap = {
  1: "Math",
  2: "Reading",
  3: "Spelling",
  4: "Exploration",
};

const grouped = {};
data.forEach((entry) => {
  const date = new Date(entry.timestamp).toISOString().split("T")[0];
  const subject = subjectMap[entry.subject_id] || "Unknown";
  if (!grouped[date]) grouped[date] = {};
  grouped[date][subject] = (grouped[date][subject] || 0) + entry.xp_earned;
});

// Build cumulative XP chart data
const cumulative = [];
const totals = { Math: 0, Reading: 0, Spelling: 0, Exploration: 0 };
for (const date of Object.keys(grouped).sort()) {
  for (const subject of Object.keys(totals)) {
    totals[subject] += grouped[date][subject] || 0;
  }
  cumulative.push({ date, ...totals });
}

By grouping XP earned by date and subject, I could generate cumulative learning progress that updates in real time as students interact with the AI assistant. Teachers or parents viewing the dashboard see a clear visual story of engagement and growth.

This analytics foundation not only supports performance tracking, but also lays the groundwork for adaptive learning features — such as personalized goals, trend alerts, and difficulty calibration.