HMCTS Task Management System

This is my submission for the DTS Developer Technical Test. I built a full-stack application that lets caseworkers create tasks. It has a backend API and a React frontend.

What I Built

I created a task management system where you can:

• Create new tasks with a title, description (optional), status, and due date
• The form validates everything before submitting
• Shows a success message when a task is created
• Displays the created task details
• Works on mobile and desktop

Project Structure

developerchallenge/
├── backend/          # FastAPI backend
│   ├── app/         # Main application code
│   ├── tests/       # Tests I wrote
│   └── requirements.txt
├── frontend/         # React frontend
│   ├── src/         # Source code
│   └── package.json
└── README.md

Tech Stack

Backend

• FastAPI (Python) - I chose this because it's modern and has auto-generated docs
• SQLite with SQLAlchemy - Simple database that works out of the box
• Pydantic for validation
• pytest for testing

Frontend

• React 18 with TypeScript
• Vite for building
• Axios for API calls
• Vitest for testing
• Just plain CSS for styling

How to Run

Backend

1. Go to the backend folder:

   cd backend

2. Create a virtual environment (you should do this):

   python -m venv venv
   source venv/bin/activate  # On Windows: venv\Scripts\activate

3. Install the packages:

   pip install -r requirements.txt

4. Start the server:

   uvicorn app.main:app --reload

   It will run on http://localhost:8000

5. You can see the API docs at:

   • http://localhost:8000/docs (Swagger UI)
   • http://localhost:8000/redoc

Frontend

1. Go to the frontend folder (in a new terminal):

   cd frontend

2. Install dependencies:

   npm install

3. Start the dev server:

   npm run dev

   It will be at http://localhost:3000

Running Tests

Backend Tests

cd backend
pytest

Or with more details:

pytest -v

Frontend Tests

cd frontend
npm test

API Endpoint

POST /api/tasks

This creates a new task.

Request:

{
  "title": "Review case documents",
  "description": "Review all documents for case #12345",
  "status": "pending",
  "due_date": "2024-12-31T10:00:00"
}

Response (201):

{
  "id": 1,
  "title": "Review case documents",
  "description": "Review all documents for case #12345",
  "status": "pending",
  "due_date": "2024-12-31T10:00:00",
  "created_at": "2024-01-15T09:00:00"
}

Validation

I added validation for:

• title: Required, 1-200 characters, can't be empty or just spaces
• description: Optional, max 1000 characters
• status: Optional, defaults to "pending". Can be "pending", "in_progress", or "completed"
• due_date: Required, must be a valid date/time, can't be in the past

Frontend Features

• Form validation that checks things as you type
• Character counter for the description field
• Shows a success message when you create a task
• Displays the task details nicely with formatted dates
• Color-coded status badges
• Responsive design (tried to make it work on mobile)
• Error messages if something goes wrong

Testing

I wrote unit tests for:

• Backend API endpoint (testing all the validation cases)
• Frontend components (TaskForm and TaskDisplay)

The tests check that validation works, errors are handled, and the UI displays correctly.

Things I Learned / Notes

• Used SQLite because it's simple and doesn't need setup. For a real app you'd probably use PostgreSQL.
• Added CORS so the frontend can talk to the backend
• The frontend uses Vite's proxy to connect to the backend
• Dates are stored in UTC and shown in local time

Troubleshooting

If the backend doesn't work:

• Make sure you have Python 3.8 or higher
• Install all dependencies: pip install -r requirements.txt
• Check if port 8000 is already being used

If the frontend doesn't work:

• Make sure you have Node.js 18 or higher
• Try deleting node_modules and reinstalling: rm -rf node_modules && npm install
• Check if port 3000 is already being used
• Make sure the backend is running first!

If the database has issues:

• The SQLite file (tasks.db) gets created automatically
• To start fresh, just delete tasks.db and restart the backend

What I Included

• ✅ Backend API with task creation
• ✅ Frontend to create tasks
• ✅ Database storage (SQLite)
• ✅ Validation and error handling
• ✅ Unit tests for backend and frontend
• ✅ API documentation (auto-generated by FastAPI)