████████╗ █████╗ ███████╗██╗  ██╗██████╗ 
╚══██╔══╝██╔══██╗██╔════╝██║ ██╔╝██╔══██╗
   ██║   ███████║███████╗█████╔╝ ██████╔╝
   ██║   ██╔══██║╚════██║██╔═██╗ ██╔══██╗
   ██║   ██║  ██║███████║██║  ██╗██║  ██║
   ╚═╝   ╚═╝  ╚═╝╚══════╝╚═╝  ╚═╝╚═╝  ╚═╝

A minimal, beautiful, production-grade to-do app. Stay organized. Ship faster. Zero friction.

Use Screely for a beautiful browser-frame mockup.

---

📋 Table of Contents

• ✨ Features
• 🛠 Tech Stack
• 🗂 Project Structure
• 🚀 Getting Started
• 🌐 Deployment
• 🧠 Architecture Decisions
• 📸 Screenshots
• 🤝 Contributing
• 📄 License

---

✨ Features

Taskr was built in three deliberate phases — from core utility to polished experience.

🟢 Phase 1 — Core (The Basics, Done Right)

Feature	Details
➕ Add Tasks	Type + press Enter or click Add
✅ Complete Tasks	Click the circle — smooth toggle animation
🗑 Delete Tasks	Hover a card, hit the trash icon
💾 Persistence	LocalStorage — survives refresh, tab close, everything

🔵 Phase 2 — Productivity Layer

Feature	Details
✏️ Inline Edit	Hover any task → pencil → type → Enter to save, Esc to cancel
🏷 4 Categories	Work 💼 · Personal 🏠 · Study 📚 · Health 💪
📅 Due Dates	Smart labels: Today, Tomorrow, 2d overdue
🔍 Live Search	Debounced real-time filtering as you type
🗂 Filter Tabs	Filter by status (All / Active / Completed) + by category

🟣 Phase 3 — Delightful Details

Feature	Details
🖱 Drag & Drop	Reorder tasks by dragging — order persists to localStorage
🌙 Dark Mode	Toggle with memory — remembers your preference
📊 Progress Bar	Live completion percentage with smooth animation
🔔 Toast Alerts	Contextual notifications for every action
🧹 Clear Done	Bulk-delete all completed tasks in one click

---

🛠 Tech Stack

┌─────────────────────────────────────────────────────┐
│  Layer         │  Technology                         │
├─────────────────────────────────────────────────────┤
│  Markup        │  HTML5 (semantic, accessible)       │
│  Styling       │  Tailwind CSS (CDN) + Custom CSS    │
│  Logic         │  Vanilla JS — ES6+, no frameworks   │
│  Fonts         │  Fraunces + Plus Jakarta Sans       │
│  Storage       │  localStorage (swappable)           │
│  Deployment    │  GitHub Pages                       │
└─────────────────────────────────────────────────────┘

Why vanilla JS? No build step. No npm install. No dependency hell.
Open index.html → it works. That's the whole point.

---

🗂 Project Structure

taskr/
│
├── 📄 index.html               ← App shell, all HTML markup & layout
│
├── 📁 assets/
│   │
│   ├── 📁 css/
│   │   └── style.css           ← Custom CSS (animations, drag states, fonts)
│   │
│   └── 📁 js/
│       ├── utils.js            ← Pure helper functions (no side effects)
│       │                         generateId, formatDate, isOverdue, debounce...
│       │
│       ├── storage.js          ← All localStorage CRUD logic
│       │                         Isolated: swap to Firebase by editing 1 file
│       │
│       ├── ui.js               ← DOM rendering — the "view" layer
│       │                         createTaskCard, renderTasks, showToast...
│       │
│       └── app.js              ← Orchestrator — state, events, business logic
│                                 State → filter → render cycle lives here
│
├── 📄 .gitignore
├── 📄 CONTRIBUTING.md
├── 📄 LICENSE
└── 📄 README.md

Dependency Load Order

utils.js  →  storage.js  →  ui.js  →  app.js
   ↑               ↑           ↑          ↑
 helpers        uses Utils  uses Utils  uses all
               + Storage

Scripts are loaded in this exact order in index.html. No module bundler needed.

---

🚀 Getting Started

Prerequisites

All you need is a browser. Seriously.

# Optional: VS Code Live Server extension for hot-reload dev experience
# Extension ID: ritwickdey.LiveServer

Run Locally

# 1. Clone the repo
git clone https://github.com/YOUR-USERNAME/taskr.git

# 2. Navigate into it
cd taskr

# 3. Open in browser
# Option A: Just double-click index.html
# Option B: VS Code → right-click index.html → "Open with Live Server"
# Option C:
npx serve .

That's it. No npm install. No build step. No config.

---

🌐 Deployment

✅ Recommended: GitHub Pages (Free, Zero Config)

Full step-by-step in DEPLOYMENT.md

Quick version:

# 1. Push your code to GitHub
git add .
git commit -m "feat: initial Taskr deployment"
git push origin main

# 2. On GitHub → your repo → Settings → Pages
# Source: Deploy from branch
# Branch: main   /root
# Save → wait 60 seconds

# 3. Your app is live at:
# https://YOUR-USERNAME.github.io/taskr

Other Free Options

Platform	Deploy Method	Time
Netlify	Drag & drop folder at app.netlify.com/drop	10s
Vercel	npm i -g vercel && vercel in project root	30s
Surge	npm i -g surge && surge	30s

---

🧠 Architecture Decisions

These are real patterns used in production apps — worth understanding.

1. Separation of Concerns

Each JS file has one job and doesn't cross boundaries:

• utils.js never touches the DOM
• storage.js never knows about UI
• ui.js never calls localStorage directly
• app.js orchestrates but doesn't do the work itself

2. IIFE Module Pattern in storage.js

const Storage = (() => {
  const STORAGE_KEY = 'taskr_v1_tasks'; // Private — not accessible globally
  // ...
  return { getTasks, addTask, updateTask, deleteTask }; // Public API
})();

STORAGE_KEY is private. Changing storage backends later only requires editing this one file — nothing else breaks.

3. Centralized State → Derived Data → Render

// State lives in ONE place
const state = { filter: 'all', category: 'all', search: '' };

// getFilteredTasks() derives what to show from state + storage
// render() calls both and syncs to DOM

// Every user action follows this pattern:
userAction → mutate state or storage → render()

This is fundamentally how React, Vue, and Svelte work.

4. Debounce on Search

searchInput.addEventListener('input', Utils.debounce((e) => {
  state.search = e.target.value;
  render();
}, 200));

Without debounce, typing "hello" fires render() 5 times.
With it: fires once, 200ms after you stop typing. Real performance pattern.

---

---

🤝 Contributing

Contributions are welcome! See CONTRIBUTING.md for guidelines.

---

📄 License

This project is licensed under the MIT License — see LICENSE for details.

---

Built with ❤️ by Rohan Kumar

⭐ Star this repo if it helped you! It genuinely motivates continued development.