Code-ing in a Tree: Adding Auto-Save to freeCodeCamp

Source: Dev.to

Background

After my next gig’s start date was set about two weeks away, I finally had some free time. I opened VS Code, poured a cup of coffee, and started looking for “help wanted” issues on GitHub. I returned to the freeCodeCamp repository and selected an issue that caught my eye.

The Issue

Original issue on GitHub

FreeCodeCamp does not autosave code to localStorage. Users must manually press Ctrl + S, but this requirement is not clearly communicated. As a result, many users lose their work when they navigate away from the page.

Proposed Solution

Add an autosave feature similar to those used by LeetCode and GreatFrontend. The implementation includes:

• Persistence to localStorage, triggered by debounced onChange, onBlur, component unmount, and beforeunload events.
• A timestamp that updates every five seconds and resets cleanly on navigation, avoiding stale “Saved 20 m ago” messages.
• A visual indicator in the toolbar (ActionRow) using a FontAwesome checkmark and a brief status text.
• Use of a shared utility function and a custom hook to keep the code DRY.
• A prominent download button for manual saves.

Implementation Details

The work was done after forking the repository and creating a new branch. The relevant component was located quickly thanks to an intuitive folder structure and descriptive function names.

Key technical choices

• State management: Primarily React’s Context API, with Zustand for local state. Redux was explored with guidance from Claude.
• State variable: lastSavedTime tracks the time elapsed since the last autosave.
• Auto‑save behavior: Updated code-storage-epic.js to suppress flash messages for automatic saves while keeping explicit confirmations for manual saves.

Testing

Unit Tests

The unit test in completion-modal.test.tsx failed because the refactored logic was moved to a utility function without updating the test. The fix involved adjusting the test to import the new utility.

End‑to‑End Tests

Two e2e tests in multifile-cert-projects.spec.ts also failed. Using Playwright (similar to Cypress) helped identify the issue quickly. The resolution involved ensuring that autosave actions remain silent and do not interfere with test expectations.

Outcome

• Days spent: 2
• Result: Autosave now works silently, updating the timestamp without disruptive flash messages. Manual saves still provide explicit confirmation.

The pull request is ready for review. I’m now waiting for feedback and, perhaps, a shower.