Side Project Zero Dependencies PWA

TaskFlow

Zero-dependency PWA task manager with real-time analytics dashboard — circular SVG progress ring, weekly activity charts, dark mode, and 4 responsive breakpoints. No npm. No build step.

The Challenge

Most task management apps require npm installs, complex build toolchains, or heavyweight frameworks. I wanted to prove that a fully-featured productivity tool could be built with zero dependencies — just HTML, CSS, and vanilla JavaScript.

The goal: create a PWA that works offline, adapts to any screen size, and provides real-time analytics — all without a single npm package.

Key Features

Circular SVG Progress Ring — Real-time visual feedback showing task completion percentage with smooth animations
Weekly Activity Charts — Chart.js-powered analytics dashboard tracking productivity patterns over time
Dark Mode Toggle — System-aware theme switching with localStorage persistence
4 Responsive Breakpoints — Mobile-first design that adapts seamlessly from phone to desktop
PWA Support — Installable as a native app, works completely offline

Technical Implementation

Built entirely with vanilla HTML, CSS, and JavaScript. The only external library is Chart.js for the analytics dashboard (loaded via CDN). No npm, no webpack, no build step — just open the HTML file in a browser.

The circular progress ring is built with pure SVG and CSS animations. State management uses localStorage for persistence, with a custom event system for reactive updates across components.

A 27-page architecture PDF documents the complete system design, component structure, and responsive breakpoint strategy. The codebase is structured for maintainability despite the zero-dependency constraint.

Design Philosophy

Zero Dependencies

Proving that modern UX doesn't require heavyweight frameworks. Just vanilla JS and CDN-loaded Chart.js.

Mobile-First PWA

Installable, works offline, adapts to any screen size. True progressive web app experience.

Real-Time Analytics

Visual progress tracking with SVG ring and Chart.js weekly activity breakdown.

Documented Architecture

27-page PDF covering system design, component structure, and responsive strategy.

Results

npm Dependencies

Responsive Breakpoints

Page Architecture PDF

Live at todolist-project-xi.vercel.app. Demonstrates that complex, production-ready UX can be achieved without build toolchains or framework overhead.