A modern, accessible task management frontend built with Node.js, TypeScript, Express, and GOV.UK Design System, designed for HMCTS caseworkers to efficiently manage their tasks through a intuitive web interface.
- Node.js 18+ (currently running on 16.20.1 with warnings)
- npm or yarn
- Backend API running on http://localhost:8080
# Install dependencies
npm install
# or
yarn install
# Build assets
npm run build
# or
yarn webpack
# Start development server
npm run start:dev
# or
yarn start:dev
The application will start on http://localhost:3000
- β Task Dashboard: Overview with statistics and task listing
- β CRUD Operations: Create, view, edit, and delete tasks
- β Task Filtering: Filter by status (TODO, IN_PROGRESS, COMPLETED, CANCELLED)
- β Search Functionality: Find tasks by title or description
- β Status Management: Quick status updates with one-click actions
- β Due Date Handling: Visual indicators for overdue tasks
- β Responsive Design: Mobile-friendly interface
- β GOV.UK Design System: Consistent, accessible government styling
- β Form Validation: Client-side and server-side validation with error display
- β Error Handling: Graceful error messages and fallbacks
- β Loading States: User feedback during API operations
- β Confirmation Dialogs: Prevent accidental deletions
- β WCAG 2.1 Compliant: Following GOV.UK accessibility standards
- β Screen Reader Support: Proper ARIA labels and semantic HTML
- β Keyboard Navigation: Full keyboard accessibility
- β Focus Management: Clear focus indicators and logical tab order
- Framework: Express.js with TypeScript
- Templating: Nunjucks with GOV.UK components
- Styling: SCSS with GOV.UK Frontend
- Validation: Client-side JavaScript + Server-side validation
- Testing: Jest with Supertest and Nock for API mocking
- Build: Webpack for asset bundling
src/
βββ main/
β βββ app.ts # Express application setup
β βββ server.ts # Server configuration
β βββ assets/
β β βββ js/
β β β βββ index.ts # Main JavaScript entry
β β β βββ task-validation.js # Client-side validation
β β βββ scss/
β β βββ main.scss # Main stylesheet
β βββ routes/
β β βββ home.ts # Task management routes
β βββ types/
β β βββ task.d.ts # TypeScript definitions
β βββ views/
β βββ template.njk # Base template
β βββ home.njk # Task dashboard
β βββ error.njk # Error page
β βββ not-found.njk # 404 page
β βββ tasks/
β βββ create.njk # Task creation form
β βββ edit.njk # Task editing form
β βββ view.njk # Task details view
βββ test/
βββ config.ts # Test configuration
βββ functional/ # End-to-end tests
βββ routes/
β βββ home.ts # Route testing
βββ unit/ # Unit tests
- Features: Task overview, statistics, filtering, search
- Components: Statistics cards, task table, filter controls
- Actions: View, edit, delete, quick status updates
- Features: Form with validation, due date picker
- Validation: Title, description, optional due date
- Actions: Create task, cancel
- Features: Full task information, action buttons
- Actions: Edit, delete, status updates, navigation
- Features: Pre-populated form, validation
- Actions: Update task, cancel
- Filter by Status:
/tasks/filter/:status
- Search:
/tasks/search?q=query
- Forms: Input, Textarea, Select, Date input, Button
- Navigation: Back link, Breadcrumbs
- Feedback: Error summary, Error messages, Tags
- Content: Summary list, Table, Panel, Details
- Layout: Grid system, Typography, Spacing
- Statistics Cards: Task overview metrics
- Status Tags: Color-coded task status indicators
- Action Buttons: Context-sensitive task actions
- Overdue Indicators: Visual warnings for overdue tasks
- Real-time feedback: Immediate validation on form submit
- Error highlighting: Visual indicators on invalid fields
- Date validation: Comprehensive due date checking
- User experience: Prevents unnecessary server requests
- Input sanitization: Trim whitespace, validate required fields
- Business rules: Task title length, description requirements
- Date validation: Due date format and logic validation
- Error display: Structured error messages with field references
- Title: Required, minimum 3 characters
- Description: Required, minimum 10 characters
- Due Date: Optional, must be complete (day/month/year) or empty
- Status: Must be valid enum value
- Jest: Test runner and assertion library
- Supertest: HTTP endpoint testing
- Nock: HTTP request mocking
- Chai: Additional assertions
# Run all tests
npm test
# Run route tests specifically
npm run test:routes
# Run with coverage
npm run test:coverage
# Run functional tests
npm run test:functional
- Route Tests: API integration, error handling, validation
- Unit Tests: Individual component logic
- Functional Tests: End-to-end user workflows
# Backend API URL
BACKEND_URL=http://localhost:8080
# Development mode
NODE_ENV=development
# Port configuration
PORT=3000
{
"start": "Production server startup",
"start:dev": "Development server with hot reload",
"build": "Build production assets",
"build:prod": "Optimized production build",
"test": "Run unit tests",
"test:routes": "Run route tests",
"test:coverage": "Test coverage report",
"test:functional": "End-to-end tests",
"lint": "Code linting and formatting",
"lint:fix": "Auto-fix linting issues"
}
All API calls use Axios with proper error handling:
// Example API integration
const response = await axios.get(`${BACKEND_URL}/api/tasks`);
- Network Errors: Graceful fallbacks with user-friendly messages
- API Errors: Structured error display with field-specific feedback
- Timeout Handling: Request timeouts with retry options
- Loading States: User feedback during API operations
interface Task {
id: number;
title: string;
description: string;
status: 'TODO' | 'IN_PROGRESS' | 'COMPLETED' | 'CANCELLED';
dueDate: string | null;
createdAt: string;
updatedAt: string;
}
interface TaskStatistics {
totalTasks: number;
todoTasks: number;
inProgressTasks: number;
completedTasks: number;
cancelledTasks: number;
overdueTasks: number;
}
npm run start:dev
- Hot reload enabled
- Development middleware active
- Console logging enabled
npm run build:prod
npm start
- Optimized assets
- Minified JavaScript/CSS
- Production error handling
- Ensure backend is running on port 8080
- Install dependencies:
npm install
- Build assets:
npm run build
- Start server:
npm run start:dev
- Mobile: < 768px
- Tablet: 768px - 1024px
- Desktop: > 1024px
- Touch-friendly buttons and forms
- Optimized table layouts
- Collapsible navigation
- Accessible form controls
- AA Level: Meeting government accessibility standards
- Semantic HTML: Proper heading hierarchy and landmarks
- ARIA Support: Screen reader compatibility
- Color Contrast: Meeting 4.5:1 minimum ratio
- Focus Management: Clear focus indicators
- Axe-core: Automated accessibility testing
- Screen Readers: Manual testing with NVDA/JAWS
- Keyboard Testing: Full keyboard navigation verification
- Browser DevTools: Network, Console, Elements inspection
- Node.js Debugging: VS Code integration
- Hot Reload: Instant feedback on changes
- Source Maps: Original TypeScript debugging
// Request logging in development
app.use((req, res, next) => {
console.log(`${req.method} ${req.path}`);
next();
});
- Install dependencies:
npm install
- Start development server:
npm run start:dev
- Make changes and test
- Run linting:
npm run lint:fix
- Run tests:
npm test
- Build for production:
npm run build:prod
- TypeScript: Strict mode enabled
- ESLint: Standard configuration
- Prettier: Automatic code formatting
- Nunjucks: GOV.UK template conventions
This project is part of the HMCTS development test and is intended for evaluation purposes.
# Kill process on port 3000
lsof -ti:3000 | xargs kill -9
# Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm install
- Verify backend is running on port 8080
- Check
BACKEND_URL
environment variable - Review CORS configuration if needed
- Ensure all required GOV.UK components are installed
- Verify template paths in route handlers
- Check Nunjucks configuration
For implementation questions:
- Review the comprehensive route handlers in
src/main/routes/home.ts
- Check the template examples in
src/main/views/
- Examine test cases for expected behavior
- Verify API integration patterns