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

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions