JavaScript Productivity Dashboard

Ship tasks, notes, search, an API widget, persistence, analytics, accessibility, and tests — the course capstone.

The problem

The capstone combines every major skill from the course into one deployed, portfolio-ready product: state, DOM, async, testing, accessibility, and shipping.

User stories

As a user, I want a unified dashboard combining tasks, notes, and a live API widget, so everything I need is in one place.
As a user, I want my data to persist reliably across sessions, so I never lose my work.
As a returning visitor, I want the app to be fast, accessible, and free of console errors, so it feels professional.

Planning checklist

Write a one-paragraph product brief and a rough architecture diagram
List every module the app needs and its public API
Define the full persisted data shape up front, with a migration plan for later changes

Suggested data structure

const appState = {
  tasks: [],
  notes: [],
  widget: { status: "idle", data: null },
  ui: { search: "", activeView: "tasks" },
};

UI requirements

A responsive application shell with navigation between views
Task management, note-taking, and an API-backed widget
A global, keyboard-accessible search across tasks and notes

Milestones

Check off each milestone as you complete it — saved to this device.

…

Testing checklist

Every module's core logic has at least one automated test
The full add-task → search → complete-task flow works end-to-end
The app recovers gracefully from corrupted localStorage data

Final checklist

…

Progressive support

RequirementsPlanningStarterHintsReference Solution

Bonus features

Add data export/import
Add light/dark theme with a persisted preference
Add a command palette (Ctrl/Cmd+K) for quick actions

Once every milestone and the final checklist are complete, add this project to your portfolio.

Portfolio readiness guide