{"type":"video","version":"1.0","html":"<iframe src=\"https://www.loom.com/embed/92e8bc9ac3474dc4abe58d3d06d4bb67\" frameborder=\"0\" width=\"1920\" height=\"1440\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>","height":1440,"width":1920,"provider_name":"Loom","provider_url":"https://www.loom.com","thumbnail_height":1440,"thumbnail_width":1920,"thumbnail_url":"https://cdn.loom.com/sessions/thumbnails/92e8bc9ac3474dc4abe58d3d06d4bb67-0ea3ef02e591ffd2.gif","duration":511.753,"title":"Task Manager App with React and .NET 🚀","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. \nFirst, I’ll demonstrate the application. \nHere 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. \nI’ll start by creating a new task. \nI’ll enter a title, add a description, select a due date, and choose a priority.\nWhen I submit the form, the task is sent to the backend API, and the list refreshes automatically to show the newly created task. \nIf 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. \nNow moving to the backend. \nThe API is built using .NET 10 and follows a clean architecture approach. The solution is structured into API, Application, Domain, and Infrastructure layers. \nThe API layer contains controllers and handles HTTP requests and responses. \nThe Application layer contains business logic, DTOs, and validation using FluentValidation. \nThe Domain layer defines core entities and interfaces. \nThe Infrastructure layer provides implementations such as the in-memory repository. \nValidation is handled centrally using FluentValidation, ensuring that all incoming requests are validated before being processed. \nOn the frontend, the React application is structured using a feature-based approach. \nThe tasks feature contains components such as TaskPage, TaskForm, and TaskList. \nAPI calls are abstracted into a separate layer, and TypeScript is used for type safety. \nI have also included unit tests in the backend. \nThese 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.  \n\nFinally, the application is fully containerised using Docker. \nBoth the frontend and backend run in separate containers, and Docker Compose is used to run the entire system with a single command. \nGiven more time, I would extend this by adding a persistent database, authentication, and improving the user interface further. \nThank you for your time."}