Project: Persistent Learning Tracker

MODULE 03 · LESSON 3.5

Combine rendering, events, validation, storage and error handling in a complete browser application.

Practice-firstBeginner-friendlyProduction-aware

From mental model to working change

Treat Project: Persistent Learning Tracker as an engineering decision with consequences for the user, the next layer and the person debugging it later. This lesson sits at the browser boundary, where structure, state and user input become observable behavior.

Here, that decision supports a specific checkpoint: Build a persistent learning tracker that loads and saves data safely. A reviewable result should include a browser inspection, keyboard test and a recorded expected-versus-actual result rather than a claim that the feature simply works.

Project: Persistent Learning Tracker workflowA four-step visual showing single source of truth, localStorage, progressive enhancement, manual test cases.Project: Persistent Learning Tracker workflow1Single Source OfTruth2LocalStorage3ProgressiveEnhancement4Manual Test Cases

Project: Persistent Learning Tracker workflow

  1. 1Single Source Of Truth
  2. 2LocalStorage
  3. 3Progressive Enhancement
  4. 4Manual Test Cases
Project: Persistent Learning Tracker workflow: a practical sequence used in this lesson.

A practical model for project: persistent learning tracker

Combine rendering, events, validation, storage and error handling in a complete browser application. The useful unit of understanding is the boundary: who owns the decision, which input crosses it, what result is visible and how a failure is reported.

  • Single Source Of Truth: Locate this responsibility in CourseFlow and defend the boundary you chose.
  • LocalStorage: Implement one behavior that another learner can reproduce without reading your mind.
  • Progressive Enhancement: Compare the simplest correct approach with one credible alternative.
  • Manual Test Cases: State the assumption this concept relies on and show how the system behaves when it is false.

Follow the data through the example

Do not copy the sample yet. First explain why single source of truth is handled at this boundary and what would break if it moved.

JAVASCRIPT
const saved = JSON.parse(localStorage.getItem('courseflow:progress') ?? '{}');
localStorage.setItem('courseflow:progress', JSON.stringify(saved));
Keep the boundary visible

Point to the exact line or command where localStorage enters the example and where its result becomes observable.

Ship a reviewable increment

  1. 1
    Single Source Of Truth

    Name the caller and the owner of this behavior before changing the implementation.

  2. 2
    LocalStorage

    Compare expected and actual output before editing; the difference tells you where to investigate.

  3. 3
    Progressive Enhancement

    Keep names tied to the product rule so a reviewer can follow the change without decoding abbreviations.

  4. 4
    Manual Test Cases

    Add a regression check close to the boundary where this behavior can fail.

Risks to catch during review

  • Treating single source of truth as vocabulary instead of defining the behavior it must produce.
  • Testing the expected path while ignoring an empty, invalid, repeated or unauthorized case around localStorage.
  • Allowing progressive enhancement to cross a boundary without an explicit contract or useful error.
  • Changing several layers before capturing the first piece of evidence, which makes the original cause harder to see.

A repeatable investigation sequence

  1. Reduce the problem to the smallest failing Project: Persistent Learning Tracker case.
  2. Capture the actual input and output at the single source of truth boundary.
  3. Read the first relevant error, request, trace or query rather than the loudest downstream symptom.
  4. Test one explanation for the failure in localStorage; avoid changing two variables together.
  5. Keep a regression check that would expose the same defect if it returned.

Security decision

Keep untrusted content separate from executable markup or script, preserve native browser protections, and validate again when data reaches the server.

Performance decision

Use DevTools to measure the rendered result. Prefer semantic markup and the smallest necessary CSS or JavaScript before adding a dependency.

PRACTICE

Build something you can inspect

Ship the tracker with add, complete, filter and reset flows plus an empty state.

Stretch challenge

Build a second implementation of single source of truth, compare it with the first, and defend the choice you would ship.

Definition of done

  • The behavior around single source of truth works with realistic input.
  • A failure involving localStorage is handled clearly and without leaking sensitive detail.
  • The implementation remains keyboard-usable when it produces an interface.
  • Your evidence directly supports the claim made in the exercise.
  • The README records the important trade-off without pretending the solution is universal.

Check your reasoning

What data should never be stored in localStorage?

Answer by naming the expected single source of truth behavior, the layer responsible for it and the evidence that would confirm your explanation.

Where would you investigate the first failure?

Start where localStorage crosses a boundary. Compare the actual input and output there before following downstream symptoms.

What would make this work reviewable?

Show the focused change, repeatable steps, the result of your check and one honest trade-off connected to progressive enhancement.

What to carry into the next lesson

  • Combine rendering, events, validation, storage and error handling in a complete browser application.
  • Keep single source of truth visible at the boundary where it can be tested.
  • Use evidence from localStorage before widening the implementation.

References and related reading

Progress is stored only in this browser.

Share this page

Share this page with the people who will use it next.

X Facebook LinkedIn WhatsApp Email

Discussion

No comments yet. Add the first useful question or observation.