Task Manager

A full-stack Task Manager application built with React (frontend) and Node.js/Express (backend).

Features

• Create, view, update, and delete tasks
• Mark tasks as complete / incomplete
• Edit task titles inline (double-click or pencil icon)
• Filter tasks by All / Active / Completed
• Loading and error states throughout
• Docker support for one-command startup

---

Quick Start (Local)

Prerequisites

• Node.js 18+
• npm

1. Backend

cd backend
npm install
npm start

The API will be available at http://localhost:3001.

2. Frontend

In a separate terminal:

cd frontend
npm install
npm start

The app will open at http://localhost:3000.

The frontend is configured to proxy /tasks requests to localhost:3001 via the "proxy" field in package.json, so no CORS configuration is needed in development.

---

Docker (Optional)

Requires Docker and Docker Compose.

docker-compose up --build

• Frontend: http://localhost:3000
• Backend API: http://localhost:3001

---

API Reference

Method	Endpoint	Description
GET	/tasks	Return all tasks
GET	/tasks?filter=completed	Filter by status
GET	/tasks?filter=incomplete	Filter by status
POST	/tasks	Create a new task
PATCH	/tasks/:id	Update title or status
DELETE	/tasks/:id	Delete a task

Task shape

{
  "id": "uuid",
  "title": "string (max 200 chars)",
  "completed": false,
  "createdAt": "ISO 8601 timestamp"
}

POST /tasks — Request body

{ "title": "Buy groceries" }

PATCH /tasks/:id — Request body

{ "completed": true }
{ "title": "Updated title" }
{ "completed": true, "title": "Updated title" }

---

Project Structure

task-manager/
├── backend/
│   ├── src/
│   │   ├── index.js          # Express server entry point
│   │   ├── store.js          # In-memory data store
│   │   └── routes/
│   │       └── tasks.js      # All task route handlers
│   ├── Dockerfile
│   └── package.json
├── frontend/
│   ├── src/
│   │   ├── App.jsx           # Root component
│   │   ├── App.css           # Styles
│   │   ├── api.js            # API client (fetch wrapper)
│   │   ├── components/
│   │   │   ├── TaskForm.jsx  # Add task form
│   │   │   ├── TaskList.jsx  # Task list + filter tabs
│   │   │   └── TaskItem.jsx  # Individual task row with edit/delete
│   │   └── hooks/
│   │       └── useTasks.js   # Data fetching and mutation hook
│   ├── public/index.html
│   ├── nginx.conf            # Used in Docker build
│   ├── Dockerfile
│   └── package.json
├── docker-compose.yml
├── .gitignore
└── README.md

---

Assumptions & Trade-offs

• In-memory storage: Tasks are stored in a JavaScript array on the server. Data resets on server restart. This was chosen to keep the solution simple and dependency-free per the assignment brief. Swapping in SQLite or PostgreSQL would require minimal changes to store.js only.

• No authentication: The API is open, which is appropriate for this scope.

• Optimistic UI not used: All mutations wait for the server response before updating the UI. This keeps the error handling straightforward and avoids rollback complexity.

• Proxy in development: The React dev server proxies /tasks to localhost:3001. In the Docker build, nginx handles the proxy instead.

• Bonus items included: Filter by status, inline title editing, and Docker setup are all implemented since they fit naturally within the time budget.