Keep tasks, notes, a focus timer, and useful links together—and shape the workspace around your day.
简体中文 · English
Live Demo · Development Notes · Release Checklist
My Workbench is a local-first personal dashboard built with HTML, CSS, and vanilla JavaScript. It requires no account or app installation: open the page to manage tasks, capture notes, run a focus timer, and keep frequently used links close at hand.
The project started as a learning and daily todo list. It evolved through three stages into a configuration-driven dashboard with four built-in widgets. Its intentionally static architecture makes it easy to deploy on GitHub Pages while providing practical experience with frontend fundamentals, state management, data migration, and testing.
| Widget | What it does |
|---|---|
| Todo list | Track study and daily tasks, set priorities and due dates, combine search with filters, and view completion and overdue states. |
| Quick notes | Autosave short notes, display save status and character count, and confirm before clearing content. |
| Focus timer | Use 25-minute focus, 5-minute break, or custom 1–180 minute sessions with pause, resume, and refresh recovery. |
| Quick links | Add, edit, and delete HTTP(S) links, then open them safely in a new tab. |
Workspace customization includes:
- A custom workspace title.
- Violet, blue, green, and orange accent presets.
- Light and dark themes.
- Widget visibility and ordering controls.
- Small, medium, and large widget sizes.
- A default-layout reset that preserves widget content.
- Full JSON backup export and validated, confirmed restore.
- Responsive layouts for desktop, tablet, and mobile browsers.
View the mobile preview
Open the GitHub Pages deployment: https://nza5.github.io/my-workbench/
No account is required. The four widgets start with a default layout, and later changes are saved in the current browser.
A browser is enough to use the app. Node.js 20 or newer is required only for the automated tests.
git clone https://github.com/NZa5/my-workbench.git
Set-Location my-workbench
python -m http.server 4173 --bind 127.0.0.1Then open http://127.0.0.1:4173/.
Run the test suite:
npm testThe project has no third-party runtime dependencies, so npm install is not required.
All content is stored in the current browser's localStorage. There is no account system, backend service, or remote database.
- Data normally survives page refreshes and browser restarts.
- Phone and desktop data do not sync automatically.
- Clearing site data also removes local workspace content.
- A JSON export can be moved to another device and imported manually.
- Import replaces the current workspace, so exporting a backup first is recommended.
- Backup files contain no account credentials, passwords, or server secrets.
Before importing, the app validates the format, version, and every supported field. It writes data only after confirmation and attempts to roll back all changes if any write fails. A running timer exports only its selected duration, not a temporary countdown state.
- Vanilla ES Modules separate dashboard configuration, widget registration, backup logic, and the four widget implementations.
- Configuration-driven rendering stores widget order, visibility, and constrained sizes in one array.
- Versioned local data repairs malformed configuration and migrates legacy task and theme data.
- Target-time timer state recalculates remaining time after refresh and limits drift caused by background throttling.
- Atomic-import approach validates everything first, writes the full dataset second, and rolls back on failure.
- Responsive twelve-column grid supports combined desktop layouts, fewer tablet columns, and a single mobile column at 390px.
index.html Workbench shell and customization panel
style.css Themes, widget cards, and responsive layout
src/app.js App startup, theme, and backup interactions
src/dashboard-store.js Dashboard configuration and migration
src/widget-registry.js Registry for the four trusted built-in widgets
src/backup-service.js Backup creation, validation, restore, and rollback
src/task-store.js Task data, filters, search, and statistics
src/widgets/ UI and data logic for all four widgets
tests/ Automated tests and browser release checklist
docs/ Designs, implementation plans, notes, and screenshots
The project currently has 52 automated tests covering:
- Default dashboard configuration, persistence, movement, visibility, reset, and malformed-data repair.
- Happy paths and error boundaries for todos, notes, the timer, and quick links.
- Legacy task and theme migrations.
- Timer start, pause, resume, refresh recovery, and completion calculations.
- Backup shape, unsafe-data rejection, validation-before-write, and rollback on failure.
Pre-release validation also exercised all four widgets, customization controls, keyboard focus, backup download and restore, and 1280px, 768px, and 390px viewports in a real browser. See the browser release checklist for the recorded results.
- Stage 1: Minimum viable todo app — add, complete, delete, filter, and persist tasks.
- Stage 2: Practical todo enhancements — priorities, due dates, search, statistics, overdue labels, and dark mode.
- Stage 3: Personal workbench refactor — configuration model, widget registry, notes, links, timer, customization, and backup/restore.
Each feature group was committed separately, making the history easier to review, debug, and explain in an interview. Detailed engineering decisions and interview talking points are available in the development notes (Chinese).
- No accounts, cloud database, or automatic cross-device sync.
- No third-party plugins, free-form drag-and-drop layout, or collaboration.
- No system notification or sound when a timer completes.
- The widget system runs trusted built-in modules only; it does not execute user code.
This repository does not currently include an open-source license. Until one is added, all rights are reserved by default: the code may be viewed and studied, but permission to copy, modify, or redistribute it should not be assumed.