About this project
Productivity Tracker Capstone — CMPA4404
Where it started
This app grew out of a project I built in CMPA4403 called
productivity-tracker-ui — a fully client-side habit and task tracker
written in plain HTML, CSS, and vanilla JavaScript with no dependencies or frameworks.
Everything lived in the browser using localStorage, which meant data
disappeared the moment you switched devices.
That project taught me how to manage UI state without a framework, keep the DOM in sync with an underlying data array through category filtering and re-renders, and build a polished design system from scratch using CSS Custom Properties. It became something I actually used day-to-day — which made me want to take it further.
The capstone version (CMPA4404) keeps the same design language and zero-dependency frontend philosophy, but adds a real backend with user accounts, a hosted database, and cross-device sync so your data follows you everywhere.
Original vs Capstone
| Feature | Original (CMPA4403) | Capstone (CMPA4404) |
|---|---|---|
| Data storage | localStorage only | PostgreSQL via Neon |
| Cross-device sync | ✕ | ✓ via user account |
| User accounts | ✕ | ✓ register & login |
| Calendar view | ✕ | ✓ monthly grid + day panel |
| Habit tracking | Basic | Per-habit streaks & toggles |
| Day streak | ✕ | ✓ global completion streak |
| Due dates | ✕ | ✓ overdue highlighting |
| Backend API | ✕ | ✓ REST API on Render |
| Guest mode | Always | ✓ opt-in localStorage fallback |
| Hosting | GitHub Pages | GitHub Pages + Render + Neon |
Features in depth
Dashboard
Your home base. Shows today's tasks, four live stats (total tasks, done today, remaining, day streak), a daily progress bar, and your habit list — all in one view. Tasks are grouped by due date and color-coded by category. Filter down to School, Work, Personal, or Health with a single click.
Calendar
A full monthly grid where each day shows colored dots representing your task load. Click any day to open a side panel showing that day's tasks and an add-task form pre-filled with that date. Navigate months with the arrow buttons. Days with all tasks complete show green dots; incomplete days show accent-colored dots.
Habit Tracker
Add recurring daily habits separate from tasks. Each habit has its own streak counter that increments for every consecutive day you mark it complete. Miss a day and the streak resets to zero. Habits are also category-tagged and color-coded so you can see at a glance which area of your life each one covers.
Stats & Streaks
The dashboard tracks four numbers in real time: all tasks ever created, tasks completed today, tasks remaining, and your current day streak. The day streak counts consecutive calendar days where you completed at least one task — a simple but effective motivator to stay consistent.
Due Dates & Overdue
Every task can be assigned a due date when you add it, or left undated. Tasks past their due date that are still incomplete are highlighted in red so nothing slips through. The calendar view maps all dated tasks so you can see your workload spread across the month.
Dark Mode
A full dark theme built with CSS Custom Properties that swaps every color in the design system at once. Your preference is saved to localStorage and applied before the first paint using an inline script — the same anti-flash technique from the original project — so there is never a white flash on load.
Accounts & cross-device sync
When you create an account your data is stored in a PostgreSQL database hosted on Neon — a serverless cloud database that persists permanently regardless of server restarts. Logging in from any device or browser gives you access to the same tasks, habits, and streaks.
Guest mode
Don't want an account? Click Continue without account on the
login page. Guest mode stores everything in your browser's localStorage
— tasks and habits are fully functional but tied to that one browser only.
Guest data is not synced across devices. Clearing your browser data or switching browsers will lose it. On Apple devices using Safari with iCloud Keychain, localStorage is synced between your Mac and iPhone automatically by the OS — this is browser behaviour outside the app's control.
To switch from guest mode to an account, click Sign in in the nav bar and register. Your existing guest data will remain in that browser's localStorage, but new data will be saved to the backend.
Tech stack
Frontend
Backend
Infrastructure
Design philosophy
Existing tools like Habitica are feature-rich but overwhelming; Todoist is powerful but complex; Streaks is Apple-only. This project aims for the middle ground — a focused, fast, distraction-free tool that does tasks, habits, and planning well without asking you to learn a new system.
The frontend is intentionally built without frameworks. No React, no Vue, no bundler. Every interaction is written in plain JavaScript against the DOM. This keeps the codebase readable, the bundle size at zero, and the load time near-instant — while still delivering a polished, responsive experience on any device.
The backend follows the same principle: one file (server.js), one
database, one clear responsibility per route. The goal was to build something
genuinely useful while keeping every layer of the stack understandable.