Skip to content

Add learning progress tracker for tutorial series #5023

Description

@anshul23102

Problem

Readers following a multi-part tutorial series have no way to track which parts they have completed. When they return to the site, they must remember where they left off manually.

Proposed Solution

Implement a client-side progress tracker using localStorage:

const STORAGE_KEY = 'codeharborhub_progress';

function markPageAsRead(pageId) {
  const progress = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
  progress[pageId] = { completedAt: Date.now() };
  localStorage.setItem(STORAGE_KEY, JSON.stringify(progress));
  updateSeriesProgressBar();
}

Display a progress bar at the top of each series index page showing X of N parts completed. Add a checkmark badge to completed parts in the table of contents sidebar.

Additional Context

Level 2 feature. Progress is per-browser only and resets on cache clear — a known limitation to document. An optional "Export progress" button lets users back up their data.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions