📝 React Task Manager

Client-side task management application with zero backend overhead and no authentication required.

English | Tiếng Việt

✨ Features • 🚀 Quick Start • 📁 Structure • 🧪 Testing • ❓ FAQ

---

✨ Features

Domain	Details
Task CRUD	Create, edit, and delete tasks with title, description, priority, and due dates
Status Tracking	Toggle tasks as pending or completed with immediate visual feedback
Filter & Search	Full-text search combined with status filters, priority filtering, and 3 sorting modes
Overdue Detection	Automated deadline auditing flagging overdue tasks based on current date
Local Persistence	Persisted via localStorage—survives page refreshes and browser restarts
Accessibility	Focus trapping, Escape key handlers, and return focus complying with WCAG standards
Modern UI	OS-aware dark mode, responsive layout from 320px up, and 44px minimum touch targets

---

🚀 Quick Start

Prerequisites: Node.js >= 18 and npm.

1. Clone & Install

git clone https://github.com/Tuannll/react-task-manager.git
cd react-task-manager
npm install
npm run dev

Open your browser at http://localhost:5173.

Note

All task data is stored in the browser's localStorage. Clearing site data or opening in private browsing mode will reset your task list.

---

🛠️ Commands

npm run dev        # Launch local Vite dev server
npm run build      # Compile production bundle to dist/
npm run preview    # Preview production build locally
npm run lint       # Run ESLint verification
npm test           # Run Vitest test suites (unit + integration)
npm run test:watch # Run tests in interactive watch mode

---

📁 Project Structure

src/
  lib/
    tasks.js          # Pure domain logic (create, update, toggle, delete, filter, stats)
    tasks.test.js     # Unit tests for domain logic
  components/
    TaskForm.jsx      # Task creation and modal editing form
    TaskToolbar.jsx   # Search, filter, and sorting toolbar
    TaskList.jsx      # Rendered task collection
    TaskSummary.jsx   # Quantitative task metric cards
    EmptyState.jsx    # Empty state placeholder
  App.jsx             # State orchestration, localStorage sync, and layout
  App.test.jsx        # Integration tests
  App.css             # Component design tokens and styles
  index.css           # Global reset, dark mode theme variables, reduced-motion rules

---

🧪 Testing

Powered by Vitest and @testing-library/react:

• Unit Tests (tasks.test.js): Exercises pure functions—create, update, toggle, delete, filter, stats.
• Integration Tests (App.test.jsx): Verifies rendering, user interactions, and localStorage synchronization.

npm test

---

🔧 Tech Stack

• React 19 — Core declarative component library
• Vite 8 — Fast bundler and dev server
• Vitest & Testing Library — Unit and integration test runner
• ESLint — Code quality and rule enforcement
• CSS Custom Properties — Design tokens, responsive scaling, dark mode

---

❓ FAQ

1. Where is task data stored?

Data is stored exclusively inside your browser's client-side localStorage. No remote server or external database is used.

2. How can I deploy this project?

Run npm run build to generate the production bundle in dist/. Deploy to Vercel, Netlify, GitHub Pages, or any static hosting platform.

3. Why not use Redux or Zustand?

The app scope is focused and lightweight. React's built-in useState and useEffect satisfy all state management needs without external dependency bloat.

4. Can a backend API be integrated?

Yes. Domain logic in src/lib/tasks.js is completely decoupled from the UI layer—simply replace the localStorage bridge with asynchronous API calls.

---

📄 License

Distributed under the MIT License.