<?xml version="1.0" encoding="UTF-8"?><oembed><type>video</type><version>1.0</version><html>&lt;iframe src=&quot;https://www.loom.com/embed/92e8bc9ac3474dc4abe58d3d06d4bb67&quot; frameborder=&quot;0&quot; width=&quot;1920&quot; height=&quot;1440&quot; webkitallowfullscreen mozallowfullscreen allowfullscreen&gt;&lt;/iframe&gt;</html><height>1440</height><width>1920</width><provider_name>Loom</provider_name><provider_url>https://www.loom.com</provider_url><thumbnail_height>1440</thumbnail_height><thumbnail_width>1920</thumbnail_width><thumbnail_url>https://cdn.loom.com/sessions/thumbnails/92e8bc9ac3474dc4abe58d3d06d4bb67-0ea3ef02e591ffd2.gif</thumbnail_url><duration>511.753</duration><title>Task Manager App with React and .NET 🚀</title><description>My Task Manager application built using React with TypeScript for the frontend and .NET 10 Web API for the backend. I’ll walk through the application, the architecture, and some key design decisions. 
First, I’ll demonstrate the application. 
Here on the screen, you can see the Task Manager UI. On the left, I have a form to create a new task, and on the right, a list of existing tasks. 
I’ll start by creating a new task. 
I’ll enter a title, add a description, select a due date, and choose a priority.
When I submit the form, the task is sent to the backend API, and the list refreshes automatically to show the newly created task. 
If I try submitting invalid data, for example leaving the title empty, you can see validation errors displayed in the UI. These include both client-side validation and server-side validation returned from the API. 
Now moving to the backend. 
The API is built using .NET 10 and follows a clean architecture approach. The solution is structured into API, Application, Domain, and Infrastructure layers. 
The API layer contains controllers and handles HTTP requests and responses. 
The Application layer contains business logic, DTOs, and validation using FluentValidation. 
The Domain layer defines core entities and interfaces. 
The Infrastructure layer provides implementations such as the in-memory repository. 
Validation is handled centrally using FluentValidation, ensuring that all incoming requests are validated before being processed. 
On the frontend, the React application is structured using a feature-based approach. 
The tasks feature contains components such as TaskPage, TaskForm, and TaskList. 
API calls are abstracted into a separate layer, and TypeScript is used for type safety. 
I have also included unit tests in the backend. 
These include tests for the service layer using a mocked repository, validation tests for input rules, and controller tests using mocked dependencies. This ensures the logic is isolated and testable.  

Finally, the application is fully containerised using Docker. 
Both the frontend and backend run in separate containers, and Docker Compose is used to run the entire system with a single command. 
Given more time, I would extend this by adding a persistent database, authentication, and improving the user interface further. 
Thank you for your time.</description></oembed>