Student Dashboard:

A React-based student dashboard that tracks reading activity and visualizes reading time per category using Chart.js.

Features:

* Display total articles read.

* Visualize reading time per category with a Pie chart.

* Show reading history in a table.

* Expand individual articles to view highlights and content.

* Fallback sample data for new users (shows percentages like Math 30%, Science 50%).

Tech Stack

* Frontend: React, Chart.js, Tailwind CSS

* Backend API: Axios (assumes endpoints exist for /analytics/student/dashboard and /articles/:id)

* Charting: Chart.js Pie chart

Installation

Clone the repository:

git clone <repo-url>
cd student-dashboard


Install dependencies:

npm install


Start the development server:

npm run dev


Make sure your backend API is running on http://localhost:5000/api.

API Endpoints

GET /analytics/student/dashboard
Returns:

{
  "totalArticlesRead": 5,
  "readingTimePerCategory": { "Math": 30, "Science": 50 },
  "readArticlesSummary": [
    {
      "articleId": "1",
      "title": "Introduction to Science",
      "category": "Science",
      "duration": 45,
      "highlightCount": 3
    }
  ]
}


GET /articles/:id
Returns full article content with blocks like text, image, video, 3d_object.

Usage:

Open the dashboard.

See total articles read and reading time distribution.

Click Read More on any article to expand content.

Pie chart shows percentage of time spent per category.

Customization

Chart Colors: Update colors array in StudentDashboard.js.

Fallback Data: Modify sample categories and percentages for new users.

Styling: Tailwind CSS classes can be updated in JSX.