Enhancement: Add Interactive Visual Performance Charts using Recharts on the Student Dashboard

[shivani11jadhav]

Description

The frontend at https://vidya-setu-pi.vercel.app/ has recently introduced an interactive Quiz History modal to view past responses. To further elevate the UI/UX and give students a tangible sense of growth, the main Student Dashboard should feature an analytical dashboard widget showing their score trends over time.

Proposed Solution

• Install recharts (a lightweight, composable charting library for React) if not already present.
• Create an AnalyticsChart component in src/components/dashboard/ or the appropriate modules directory.
• Build a responsive Line Chart or Area Chart that maps Quiz Date on the X-axis and Score (%) on the Y-axis.
• Use the existing Next.js + Tailwind configuration to apply a beautiful, glassmorphic UI style consistent with the recent layout upgrades.

Expected Outcome

• A highly professional, data-driven visual dashboard for students to track their preparation progress seamlessly.

Please assign this issue to me so I can start working on the UI/UX enhancement!

[shivani11jadhav]

/assign

[supriyasoni468]

Hi @MRIARC-08,

I would like to work on this issue as an NSoC '26 Contributor.

I am interested in enhancing the Student Dashboard by adding interactive performance analytics using Recharts.

I plan to contribute by:

• Creating a reusable AnalyticsChart component
• Implementing responsive score trend visualizations
• Integrating the chart with existing dashboard data
• Ensuring the design matches the current Next.js + Tailwind UI style
• Improving the overall student learning progress experience

This feature will help students better understand their performance trends and track their improvement over time.

Please assign this issue to me if available.

Thank you!

[Rishabh-Yadav777]

Hi @shivani11jadhav, I'd like to work on this issue as part of GSSoC. Please assign it to me. Thanks!