feat: Add progress dashboard with ML-based topic categorization #359
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add dashboard page at /dashboard with user progress analytics - Implement TopicTable component with progress bars and category indicators - Implement TopicCharts component with bar and pie charts using Recharts - Add ML-based clustering algorithm to categorize topics as Strong/Moderate/Weak - Update navigation to include dashboard link in user dropdown - Fix TypeScript configuration and import issues - Dashboard provides insights for DSA learning progress and focus areas
|
@Gupta-02 is attempting to deploy a commit to the saumyayadav213-gmailcom's projects Team on Vercel. A member of the Team first needs to authorize it. |
Thanks for creating a PR for your Issue!
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
I guess when you create a PR, a template is there, so it would be better if you create PR in that format only as it helps the PA to see linked issues and changes done in PR. template was created for a reason only.. |
|
Okay so sorry |
|
please add screenshots of before vs after so that i can see your work |
saumyayadav25
added
invalid
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Feature Overview
Add a comprehensive progress dashboard that provides users with detailed insights into their DSA learning journey through ML-powered topic analysis and visual analytics.
Key Features Implemented
Authentication-protected route with user-specific progress analytics
Responsive design with full dark mode support
Animated components using Framer Motion for smooth UX
Intelligent clustering algorithm that categorizes topics as:
Strong (top 33% performers)
Moderate (middle 33% performers)
Weak (bottom 33% performers)
Percentile-based thresholds that adapt to individual user performance
Frontend-only ML logic - no backend processing required
TopicTable Component: Progress bars, category indicators, solved/total counts
TopicCharts Component:
Bar chart showing top 10 topics by completion percentage
Pie chart displaying category distribution
Built with Recharts library for smooth animations
Dashboard link added to user profile dropdown menu
Available on both desktop and mobile interfaces
Technical Implementation
Files Created/Modified:
Key Technologies:
Next.js 15 with App Router
React 19 with TypeScript
Recharts for data visualization
Framer Motion for animations
Tailwind CSS for styling
Algorithm Details:
User Experience
Before: Users had to manually check progress across different topics After: One-click access to comprehensive progress analytics with:
Visual progress indicators
ML-powered performance insights
Clear focus areas for improvement
Beautiful, responsive interface
Impact
Enhanced User Engagement: Quick insights instead of manual counting
Improved Learning Outcomes: Clear identification of weak areas
Better UX: Visual analytics make progress tracking enjoyable
Lightweight Solution: All ML logic runs on frontend, no backend overhead
Testing
Build Verification: Next.js build passes successfully
Type Safety: Full TypeScript implementation
Responsive Design: Works on all screen sizes
Authentication: Proper user session handling
Usage
User logs in and clicks profile avatar
Selects "Dashboard" from dropdown menu
Views personalized progress analytics with:
Topic-wise completion percentages
ML-categorized performance levels
Interactive charts and tables
Closes
Addresses the need for better progress visualization
Implements ML-based topic categorization as requested
Provides comprehensive dashboard solution for DSA tracking