# Learning Progress Tracker A web-based goal and learning progress tracker with subtask management, due dates, drag-and-drop reordering, task archiving, and persistent server-side storage. ## Features - **Goal Management** — Create, edit, and delete learning goals with titles, descriptions, sizes, due dates, and optional rewards. - **Due Dates** — Set deadlines on tasks and subtasks. Color-coded badges show time remaining: green (plenty of time), amber (7 days or less), red (overdue/today). Completed tasks show a strikethrough date. - **Subtasks** — Break goals into smaller subtasks. Drag any task onto another to nest it, or promote subtasks back to top-level goals via right-click. - **Progress Tracking** — Automatic weighted progress calculation (Small 10%, Medium 25%, Large 50%). - **Archive** — Completed tasks show an "Archive" button. Switch to the Archive view to restore, edit, or permanently delete archived tasks. - **Drag & Drop** — Reorder tasks and subtasks. Hold over a task to reveal its drop zone for nesting. - **Context Menus** — Right-click for edit, delete, promote, archive, or restore actions. - **Double-Click to Edit** — Double-click any task or subtask card to open the editor. - **Expandable Descriptions** — Toggle "Show full description" per task to expand beyond the default 2-line clamp. - **Rewards** — Hidden rewards revealed only upon completion. - **Custom Background** — Place a `background.jpg` or `background.png` in `public/img/` to set a custom background image. The UI uses frosted glass (glassmorphism) over the image. - **Persistent Storage** — SQLite database with automatic schema migration. ## Project Structure ``` ├── public/ │ ├── img/ # Place background.jpg or background.png here │ ├── index.html │ ├── styles.css │ └── app.js ├── server/ │ └── server.js ├── data/ # SQLite database (auto-created) ├── package.json ├── dockerfile └── README.md ``` ## Getting Started ### Prerequisites - [Node.js](https://nodejs.org/) v18 or later ### Installation ```bash cd learning-progress-tracker npm install npm start ``` Available at **http://localhost:3000**. For development with auto-reload: ```bash npm run dev ``` ### Custom Background Place your image at `public/img/background.jpg` (or `.png`). The CSS references `img/background.jpg` — rename or edit the CSS path as needed. Without an image, the app falls back to a soft gradient. ### Docker ```bash docker build -t learning-tracker . docker run -d -p 3000:3000 -v tracker-data:/app/data learning-tracker ``` ## API Endpoints | Method | Endpoint | Description | |--------|----------|-------------| | `GET` | `/api/tasks` | Fetch active tasks (`?archived=1` for archived) | | `POST` | `/api/tasks` | Create a new task | | `PUT` | `/api/tasks/:id` | Update a task | | `PUT` | `/api/tasks/:id/archive` | Archive a task | | `PUT` | `/api/tasks/:id/unarchive` | Restore an archived task | | `DELETE` | `/api/tasks/:id` | Permanently delete a task | | `POST` | `/api/tasks/reorder` | Reorder tasks (array of IDs) | ## Usage - **+ New Goal** to create a task with optional due date. - **Right-click** for context menu actions. - **Double-click** a card to edit it. - **Drag** to reorder or nest tasks. - **Archive** completed tasks, then switch views with the Active/Archive toggle. ## Tech Stack - **Frontend:** Vanilla JavaScript, HTML, CSS (glassmorphism, CSS variables) - **Backend:** Node.js, Express - **Database:** SQLite3 - **Containerization:** Docker ## License MIT