A lightweight, browser-based project management tool for planning, tracking, and reporting on tasks and milestones. Built entirely client-side — no backend, no install, no account required. Designed around RAG (Red / Amber / Green) status tracking with views suited to both working teams and executive stakeholders.
- Dashboard — KPI cards, interactive RAG and status charts, workload breakdown by owner, milestone tracker, and a recent activity feed with drill-down into filtered task lists
- Tasks — Full task table with Team View (all items) and Summary View (milestones and Red/Amber items only, suited for steering committee reporting)
- Gantt Chart — Visual timeline with dependency links, RAG colour coding, and Week / Month / Quarter zoom levels
- RAID Log — Dedicated view for all tasks flagged with risks or issues, with quick edit access
- Team — Add and manage team members; assignments cascade automatically when members are removed
No installation required. Open index.html directly in any modern browser:
open index.html
The app loads with sample seed data on first launch so you can explore all views immediately.
- Adding tasks — use the "Add Task" button in the Tasks view; milestones automatically sync their end date to their start date
- Assigning owners — team members must be added in the Team view before they can be assigned to tasks
- Tracking progress — each task supports a progress percentage, status, RAG flag, priority, effort (person-days), and timestamped progress notes
- RAID flagging — tick the risk/issue checkbox on any task to surface it in the RAID Log
- Export / Import — use the toolbar buttons to download all data as a timestamped JSON file or restore from a previous export; useful for backup or sharing a snapshot
- Summary View — switch to Summary View in the Tasks tab to see a filtered executive-ready list of milestones and Red/Amber items only
| Library | Version | Purpose |
|---|---|---|
| Bootstrap | 5.3.3 | UI framework and layout |
| Bootstrap Icons | 1.11.3 | Icon set |
| Chart.js | 4.4.3 | Dashboard doughnut and bar charts |
| frappe-gantt | 0.6.1 | Gantt chart visualisation |
All dependencies are loaded via CDN. Data is persisted in browser localStorage — no server required.
Project Planner - Prototype/
├── index.html # App shell and navigation
├── css/
│ └── app.css # Custom styles
└── js/
├── app.js # Main controller, tab switching, export/import
├── data.js # CRUD layer and seed data
├── dashboard.js # Dashboard metrics and chart rendering
├── task-form.js # Task modal and form handling
├── gantt-view.js # Gantt chart initialisation
├── raid.js # RAID log rendering
├── team.js # Team member management
└── filters.js # Filter state and application logic
This is a proof of concept. Please read before use:
- Local storage only — all data is stored in the browser; it is not shared between devices or users and will be lost if browser data is cleared
- No authentication — there is no login or access control
- Single-user — not designed for concurrent or collaborative editing
- Limited browser testing — tested in Chrome; behaviour in other browsers is not guaranteed
- No automated tests — the codebase has not been covered by a test suite
This project is not open source. See LICENSE for full terms. In summary: you may view and study the source code for personal educational purposes only. Commercial use, redistribution, and modification are not permitted without prior written permission.