Task Manager

A full-stack Task Manager with a REST API backend and React frontend. Built as a practical exercise covering CRUD operations, API integration, validation, and clean code structure.

---

Stack

Layer	Technology
Frontend	React 18 + Vite
Backend	Node.js + Express
Storage	In-memory (array)
HTTP	Axios

---

Prerequisites

• Node.js 18+
• npm 9+

---

Setup & Run

Both servers need to run simultaneously. Open two terminals.

Terminal 1 — Backend

cd backend
npm install
npm run dev

API is available at http://localhost:3001.
Use npm start instead of npm run dev to run without nodemon.

Terminal 2 — Frontend

cd frontend
npm install
npm run dev

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

Custom API URL: create frontend/.env and set VITE_API_URL=http://your-api-host

---

API Reference

Method	Endpoint	Body / Params	Description
GET	/tasks	?status=completed|incomplete	Return all (or filtered) tasks
POST	/tasks	{ "title": "string" }	Create a new task
PATCH	/tasks/:id	{ "completed": bool, "title"?: string }	Update a task
DELETE	/tasks/:id	—	Delete a task

All responses are JSON. Errors return { "error": "message" } with an appropriate HTTP status code.

Task shape

{
  "id": "uuid",
  "title": "string",
  "completed": false,
  "createdAt": "ISO 8601 timestamp"
}

---

Features

Core requirements

• List all tasks
• Add a new task (with validation)
• Mark a task as complete / incomplete
• Delete a task
• Loading skeletons and inline error messages throughout

Bonus

• Filter tasks by All / Active / Done (routed to API via ?status=)
• Edit task title inline (double-click the title or click the pencil icon)
• Progress bar showing completion ratio

---

Project Structure

task-manager/
├── backend/
│   ├── index.js                  # Entry point
│   └── src/
│       ├── app.js                # Express setup, middleware, routes
│       ├── store.js              # In-memory task array
│       ├── controllers/
│       │   └── taskController.js # CRUD handlers + validation
│       ├── routes/
│       │   └── tasks.js          # Route definitions
│       └── middleware/
│           └── errorHandler.js   # 404 + central error handler
│
├── frontend/
│   └── src/
│       ├── api.js                # Axios API calls
│       ├── App.jsx               # Root component
│       ├── hooks/
│       │   └── useTasks.js       # All task state and operations
│       └── components/
│           ├── AddTaskForm.jsx
│           ├── FilterBar.jsx
│           └── TaskItem.jsx
│
└── README.md

---

Assumptions & Trade-offs

See NOTES.md for a dedicated write-up.