Todo App (Node + Vanilla JS)

A lightweight, multi‑user todo web app with fast inline editing, sorting, and celebratory effects.

Web App Features

• Multi‑user registration/login with persistent sessions
• Inline edit on cards
• Status filtering (All, Active, Completed)
• Sorting by Created, Edited, Title, or Status
• Completion and edit timestamp history
• Refresh animation + confetti celebration when all items are completed
• Per‑item confetti when marking a single item complete
• Client‑side state cache with server reconciliation

Quick How‑To Guide

1) Install dependencies

npm install

2) Start the backend API

cd api
node backend.js

3) Start the client

cd client
npx http-server -p 8080

4) Open the app

Navigate to:

http://localhost:8080

Browser Compatibility

• Chrome (latest)
• Edge (latest)
• Firefox (latest)
• Safari (latest)

Site Map / Flow Graph

flowchart TD
    A[Landing / Auth Card] -->|Register| B[Account Created]
    A -->|Sign in| C[Session Active]
    C --> D[Todo Dashboard]
    D --> E[Add Todo]
    D --> F[Inline Edit Todo]
    D --> G[Mark Complete]
    D --> H[Filters & Sorting]
    G --> I[Item Confetti]
    D --> J[All Completed]
    J --> K[Global Confetti]
    D --> L[Logout]
    L --> A

Loading

---

Technologies Used

• Node.js v26.4.0
• Express.js v5.2.1
• Vanilla JavaScript (client)
• HTML5 + CSS3
• LocalStorage + Cookies