Task Manager Dashboard

A responsive, production-quality task management frontend built with Vanilla JavaScript, HTML5, and CSS3 — no frameworks, no build tools, zero dependencies.

---

Features

Feature	Details
Auth	Login · Registration · JWT token in localStorage
Task CRUD	Create · Edit · Delete · Inline status change
Filtering	By status, by priority, live client-side search
Stats bar	Total · New · In progress · Done counts
Demo mode	Full CRUD in the browser — no backend required
Notifications	Toast system (success / error / info / warning)
Delete confirm	Custom modal dialog — no window.confirm()
Loading states	Spinner overlay + disabled buttons during requests
XSS protection	All user content escaped before DOM insertion
Keyboard shortcuts	N — new task · Esc — close modal
Responsive	Mobile card layout · tablet two-column grid
Docker	nginx:alpine image with asset caching

---

Live Demo

Open the app without any backend:

1. Start a local server: python -m http.server 3000
2. Open http://localhost:3000
3. Click "Попробовать без регистрации (демо)"

All changes are persisted in localStorage — refresh-safe.

---

Quick Start

Without Docker

# Any static file server works:
python -m http.server 3000
# or: npx serve .
# or: VS Code Live Server extension

Open http://localhost:3000 and use demo mode, or point to a real backend (see Configuration).

With Docker

docker build -t task-manager-frontend .
docker run -p 3000:80 task-manager-frontend

Open http://localhost:3000.

---

Configuration

The API base URL defaults to http://localhost:8000. To change it, add one line before the config.js script tag in index.html and dashboard.html:

<script>
    window.API_BASE = "https://your-api.example.com";
</script>
<script src="js/config.js"></script>

Backend Requirements

The app expects a FastAPI backend (port 8000) with these endpoints:

Method	Path	Description
POST	/auth/register	Register { username, email, password }
POST	/auth/login	Login → { access_token }
GET	/users/me	Current user (Bearer token)
GET	/tasks	List tasks (query: status, priority)
POST	/tasks	Create task
PUT	/tasks/{id}	Update task
DELETE	/tasks/{id}	Delete task

CORS: the backend must allow http://localhost:3000 (or your frontend origin).

---

Project Structure

frontend/
├── index.html          # Login / Registration page
├── dashboard.html      # Main app (task table + stats + modals)
├── css/
│   ├── style.css       # Full design system + all components
│   └── responsive.css  # Mobile & tablet breakpoints
├── js/
│   ├── config.js       # API URL + demo-mode seed data
│   ├── api.js          # API client class (real + demo mode)
│   ├── ui.js           # Render, toasts, modal, confirmDialog, esc()
│   ├── tasks.js        # Task state + CRUD functions
│   ├── auth.js         # Login / register / demo-btn handlers
│   └── main.js         # Dashboard init, event delegation, keyboard shortcuts
├── Dockerfile          # nginx:alpine
├── nginx.conf          # Static serving + asset caching
├── .gitignore
├── .dockerignore
└── .env.example

---

Keyboard Shortcuts

Key	Action
N	Open "New task" modal (when not typing)
Esc	Close any open modal

---

Design Decisions

No framework — demonstrates solid DOM and event handling without abstractions; smaller bundle, instant load.

XSS protection — every user-supplied string is escaped through esc() before being inserted via innerHTML. Interactive elements use data-id attributes and event delegation — no inline onclick.

Demo mode — the api.js class intercepts all requests when CONFIG.DEMO_MODE = true and routes them through an in-memory + localStorage store. Visitors can fully interact with the UI on GitHub Pages without a backend.

Toast over alert — window.alert() and window.confirm() block the thread and look different on every OS. Custom toasts and a modal dialog provide a consistent UX.

---

Tech Stack

UI	HTML5 · CSS Custom Properties · Vanilla JS (ES6+)
Auth	JWT stored in localStorage, injected as Authorization: Bearer
Server	nginx 1.27 (Docker) · python -m http.server (dev)
Design	CSS Grid · Flexbox · CSS animations · Mobile-first

---

License

MIT — free to use, modify, and distribute.