From Idea to App - Task Management UI implementation

Upcoming

Task management epic with each user story can be found in the ClickUp task.

We will implement the following user stories:

• Display task
• Change completion status
• Create task
• Edit task name
• Delete task

To make sure that the stories can be worked on independently, we had to check what common dependencies there are, and we created two additional technical tickets that were blocking implementation:

• Create local mock API for task management - a simple Zustand local storage to have a fake "database" for the app. We created a storage for tasks, and simple CRUD (Create, Read, Update, Delete) operations. See changes on GitHub.
• Create task validation schema - we had to create a schema for Task, and place restrictions on the name. See changes on GitHub.

As standard, we added storybooks, and unit tests for quality assurance for the user stories.

We have made some additional changes too:

• Fixed some styling issues in the UI library
• Rethought the folder structure of the app to a less nested, and feature-based structure
• Created a dynamic route generating utility

Create local mock API

In this update, we introduced a centralised type definitions package and a mock API for task management.

Task Type Definitions

A new package, @repo/types, has been added to centralise type definitions. This package defines the Task type and exports it for use across the codebase.

Mock API for Task Management

A new mock API called useMockTaskApi has been implemented using Zustand to manage task-related actions in local state. The store provides methods for:

• getTaskById(id) - Retrieves a single task by its ID
• getTasks() - Returns a list of all tasks
• createTask(name) - Adds a new task with a generated ID and default state
• updateTask(id, updatedData) - Updates an existing task with new values
• deleteTask(id) - Removes a task from the store

These methods allow interaction with tasks in a structured way, mimicking real API behaviour while keeping all operations in memory. This is only a temporary solution to make the app able to interact with, and will be replaced with a real API.

See changes on GitHub.

Create task validation schema

In this update, we introduced a centralised validation schema package and integrated Zod for schema validation. This enhances form validation and ensures data consistency across the application.

Validation Schema Package

A new package, @repo/validation-schema, has been created to define validation rules for task-related data. The package:

• Defines the taskSchema using Zod, enforcing constraints such as name length limits
• Exports a Task type inferred from the schema, replacing the manually defined type in @repo/types

This change standardises validation and type definitions, ensuring tasks follow a consistent structure.

Zod and i18n Integration

The app now uses Zod for validation and zod-i18n-map to provide translated error messages. Updates to i18n.ts:

• Added Zod error messages to i18next resources
• Configured Zod's error map to use localised strings

This allows validation errors to be displayed in multiple languages without manually handling messages.

See changes on GitHub.

Display tasks and change completion status

ClickUp stories:

• Display task
• Change completion status

This update implements the core task functionality, allowing users to view tasks and mark them as complete or incomplete.

Components

• TasksMain
  • Serves as the primary view container
  • Handles layout consistency and header rendering
• Tasks
  • Data layer component
  • Integrates with our mock API via Zustand state management
  • Implements real-time task synchronisation
• Task
  • Atomic UI component with business logic
  • Handles completion toggling via optimistic UI updates
  • Implements navigation routing using wouter

Implementation details

• Tasks are sourced from the mock API (getTasks), displayed in a vertical list indicating their completion status, and name
• Users can toggle a task's completion status by pressing the checkbox, updating the isCompleted flag in real-time using updateTask of the mock API. As per designs, a completed task will have its checkbox checked, and its name struck through
• A completed task can be undone by pressing the checkbox
• Clicking a task (anywhere except the checkbox) navigates to its details page (/:taskId), setting up a foundation for future editing

See changes on GitHub.

Create task

ClickUp story

We've implemented the ability to add new tasks as specified in the acceptance criteria of the user story.

Components

• AddTask - A large underline-style input that expands with a tick button to submit, and an × button to discard
• AddTaskPlusButton - An additional way to add tasks, and upon pressing, it points focus to AddTask

Implementation details

• Uses React Hook Form with Zod validation (@repo/validation-schema) to ensure valid input
• New tasks are created with the mock API's createTask, and visible in the task list after submitting
• The submit button is disabled until a valid task name is entered
• Users can discard input using a reset button
• The input is accessible, and can be controlled with keyboard (submit with Enter, discard with Esc)
• Submitting leaves the focus in the input allowing for continuous creation of multiple tasks

See changes on GitHub.

Edit task

ClickUp story

This update implements task editing upon pressing a task through a modal interface, preventing accidental changes while maintaining data integrity.

Components

• EditTask
  • Manages modal visibility through route parameters (/:taskId)
  • Checks existence of the task before showing the modal using the mock API's getTaskById (redirects to / if not found)
• EditTaskModal
  • Self-contained dialog component
  • Implements input validation and delete/save/cancel actions

Implementation Details

• Uses React Hook Form, with Zod validation (@repo/validation-schema) for name input handling, just as in create task
• Input is pre-filled with current task name
• Save button disabled until valid input
• Pressing Save closes the modal, and updates the task with the provided name using the updateTask operation of the mock API
• Modal is closed by pressing the × button, Cancel button, or clicking outside the modal by navigating to /
• Delete button placeholder prepared for future implementation

See changes on GitHub.

Delete Task

ClickUp story

We've extended the Edit task modal with task deletion, allowing users to remove tasks permanently through a confirmation dialog.

Components

• DeleteTaskModal - Displays a confirmation dialog before deleting a task, preventing accidental deletion by requiring explicit confirmation

Implementation Details

• Updated EditTaskDialog, so that the Delete button is now interactive, opening a confirmation modal instead of being a placeholder
• The modal confirms deletion with the message: "Are you sure you want to delete {taskName}? This action is irreversible."
• Users can cancel deletion by clicking Cancel, closing the modal, or clicking outside it
• Pressing Delete removes the task by calling the deleteTask API function, and redirects to the task list (closing both modals)

Result

The final product can be tried out using this link.

Keeping Track of Progress

Full code

Summary of all changes in the code can be found here: GitHub link.

ClickUp Board

Tasks and subtasks for this setup are listed on our ClickUp board.

Designs

Full designs can be found in the Figma file:

Wiki

All key project documentation is available in our ClickUp wiki.

Next Steps

We have a working prototype ready for the product team to collect feedback.

In the meantime, design is working on the authentication screens:

• Sign in
• Sign up
• Reset password
• Set password
• Verify email

The development team will start to initialise the backend to be able to implement authentication, and migrate from local storage to a real database for task management.

Here's how our timeline look like now: