Development of the Client Application for Task Managemet System

Abstract

This thesis presents the design and implementation of a client application for a task management system built with React, TypeScript, and Vite on the frontend and Express, Prisma ORM, and PostgreSQL on the backend. The system defines two user roles, Author and Solver, and enforces a five-state task lifecycle (Pending, Started, Completed, Approved, Rejected) through a server-side transition map. Real-time communication between the server and connected clients is handled by Server-Sent Events, where each event is scoped to the affected user through a registry of active connections. The frontend renders role-specific dashboards: Authors create, assign, edit, approve, and reject tasks; Solvers start and complete them. A lifecycle stepper component visualizes the current position of each task in the workflow. A deadline countdown system displays live time-remaining values for Solvers and static formatted dates for Authors, with color-coded urgency levels. The interface adapts to different screen sizes through responsive CSS breakpoints. The system was tested with 68 manual test cases and 15 Playwright end-to-end tests covering core CRUD and authentication flows, real-time SSE delivery, dynamic deadline tracking, and responsive UI layout.

Tato bakalářská práce popisuje návrh a implementaci klientské aplikace pro systém správy úkolů, postaveného na technologiích React, TypeScript a Vite na straně frontendu a Express, Prisma ORM a PostgreSQL na straně backendu. Systém definuje dvě uživatelské role: Autor a Řešitel: a na straně serveru vynucuje pětistupňový životní cyklus úkolu (Čekající, Zahájený, Dokončený, Schválený, Odmítnutý) prostřednictvím přechodové mapy stavů. Komunikace v reálném čase mezi serverem a připojenými klienty je zajištěna pomocí technologie Server-Sent Events, přičemž každá událost je směrována konkrétnímu uživateli prostřednictvím registru aktivních připojení. Frontend zobrazuje role-specifické řídicí panely: Autoři vytvářejí, přiřazují, upravují, schvalují a odmítají úkoly; Řešitelé je zahajují a označují jako dokončené. Komponenta vizuálního průvodce životním cyklem znázorňuje aktuální pozici každého úkolu v pracovním postupu. Systém odpočítávání termínů zobrazuje Řešitelům živý zbývající čas a Autorům staticky formátované datum, přičemž urgentnost je barevně rozlišena. Rozhraní se přizpůsobuje různým velikostem obrazovky pomocí responzivních zlomových bodů CSS. Systém byl otestován pomocí 68 manuálních testovacích případů a 15 automatizovaných end-to-end testů nástrojem Playwright, pokrývajících základní operace CRUD a autentizaci, doručování událostí v reálném čase přes SSE, dynamické sledování termínů a responzivní rozvržení uživatelského rozhraní.