Task Manager UI

Task Manager UI is a small full-stack project that combines a FastAPI backend with a React + TypeScript frontend. Use it to capture daily work, track progress, and export summaries without relying on external services.

Features at a Glance

• Create tasks with optional descriptions, edit them later, and delete what you no longer need.
• Toggle completion, drag and drop to reorder the list, and view separate queues for in-progress and finished work.
• Review daily stats, check upcoming items, and switch between light and dark themes with one click.
• Download a timestamped PDF report of every task and get automatic toast feedback for success, errors, and network status.
• Serve the API either from a local FastAPI process (with durable storage) or from the co-located Vercel Serverless Function (stateless between cold starts).

Project Structure

• fastapi-backend/ - FastAPI app for local development with on-disk persistence at fastapi-backend/app/tasks.json.
• frontend/ - Vite-powered React app styled with Material UI, Zustand state management, and axios for API calls.
• frontend/api/ - Vercel Serverless Function that bundles the FastAPI routes for production deployments on Vercel.

Both fastapi-backend/app/tasks.json and frontend/api/tasks.json ship with a small set of sample tasks so the UI has content immediately after installation. To start from a clean slate you can delete these files entirely or overwrite them with a minimal JSON structure such as [] before launching the app. The backend will recreate the files as you add new tasks.

Getting Started on Windows

1. Run the FastAPI Service (optional for local development)

cd fastapi-backend
python -m venv .venv
.venv\Scripts\activate
pip install -r requirements.txt
uvicorn app.main:app --reload

The API listens on http://localhost:8000. A tasks.json file appears alongside the app module the first time you add a task.

2. Start the React Frontend

cd frontend
npm install
npm run dev

For local development against the FastAPI server, copy .env.development to .env.development.local and point the base URL directly at the FastAPI instance:

VITE_API_BASE_URL=http://localhost:8000/api

This ensures the Vite dev server issues API requests straight to your local FastAPI backend without relying on a proxy configuration. If you prefer to use a proxy instead, configure Vite's server.proxy setting to map /api to http://localhost:8000.

Note: The /api path prefix is reserved for the default Vercel Serverless Function deployment, so avoid pointing VITE_API_BASE_URL to /api during local development.

Deploying to Vercel

• Point the Vercel project root to the frontend directory.
• Do not define VITE_API_BASE_URL in the Vercel environment variables (or explicitly set it to /api) so the built client targets the serverless function.
• Deploy as usual. The build produces the static Vite assets and the Python Serverless Function at api/index.py, which runs on the Python 3.11 runtime and keeps transient state in /tmp between warm invocations.

Available API Endpoints

Method	Path	Description
GET	/api/tasks/	List tasks in the saved order.
POST	/api/tasks/	Create a task (title, optional description).
PATCH	/api/tasks/{id}	Update title, description, or completion flag.
DELETE	/api/tasks/{id}	Remove a task.
POST	/api/tasks/reorder	Persist a new order: {"ids": [1, 3, 2]}.

Running Tests

• Backend: run pytest from the fastapi-backend directory.
• Frontend: run npm run test from the frontend directory.