?? TODO List Application - Getting Started Guide

A full-stack TODO list application built with .NET 10 backend and Angular 21 frontend.

---

?? Table of Contents

• Prerequisites
• Quick Start
• Project Structure
• Running the Application
• Running Tests

---

? Prerequisites

Before you begin, ensure you have the following installed:

Required Software

1. .NET 10 SDK

   • Version: 10.0.101 or later
   • Download: https://dotnet.microsoft.com/download/dotnet/10.0
   • Verify installation: dotnet --version

2. Node.js

   • Version: 24.12.0 LTS or later
   • Download: https://nodejs.org/
   • Verify installation: node --version

3. npm

   • Version: 11.6.2 or later (comes with Node.js)
   • Verify installation: npm --version

Optional (Recommended)

• Visual Studio 2022 (Preview/Latest) or Visual Studio Code
• Git for version control
• Chrome browser (for Angular testing)

---

?? Quick Start

1. Clone the Repository

git clone https://github.com/larynuon/todoList.git
cd todoList

2. Install Dependencies

Frontend (Angular):

cd todolist.client
npm install
cd ..

Backend (.NET):

cd todoList.Server
dotnet restore
cd ..

3. Run the Application

Option A: Using Visual Studio

1. Open todoList.sln (or open the folder in Visual Studio)
2. Set todoList.Server as the startup project!!
3. Press F5 (Start Debugging) or Ctrl+F5 (Start Without Debugging)
4. Browser opens automatically at https://localhost:7284

Option B: Using Command Line

cd todoList.Server
dotnet run --launch-profile https

The application will:

• Start the .NET backend on https://localhost:7284
• Automatically launch the Angular dev server on https://localhost:4200
• Open your default browser to the application

---

?? Project Structure

todoList/
??? todoList.Server/              # .NET 10 Backend (ASP.NET Core Web API)
?   ??? Controllers/              # API endpoints
?   ?   ??? TodosController.cs    # TODO CRUD operations
?   ??? Todos/                    # Business logic & data access
?   ?   ??? TodoItem.cs           # Domain model
?   ?   ??? TodoDtos.cs           # Data transfer objects
?   ?   ??? TodoService.cs        # Business logic & validation
?   ?   ??? ITodoRepository.cs    # Repository interface
?   ?   ??? InMemoryTodoRepository.cs  # In-memory storage
?   ??? Program.cs                # Application startup & configuration
?   ??? Properties/
?   ?   ??? launchSettings.json   # Launch profiles & URLs
?   ??? todoList.Server.csproj
?
??? todolist.client/              # Angular 21 Frontend (SPA)
?   ??? src/
?   ?   ??? app/
?   ?   ?   ??? todos/            # TODO feature module
?   ?   ?   ?   ??? todo.component.ts        # Main component (with Signals)
?   ?   ?   ?   ??? todo.component.html      # Component template
?   ?   ?   ?   ??? todo.component.spec.ts   # Component tests
?   ?   ?   ?   ??? todo-api.service.ts      # HTTP service
?   ?   ?   ?   ??? todo-api.service.spec.ts # Service tests
?   ?   ?   ??? app.component.ts  # Root component
?   ?   ?   ??? app.css           # Global styles
?   ?   ??? main.ts               # Angular bootstrap
?   ?   ??? index.html            # HTML entry point
?   ?   ??? styles.css            # Global styles
?   ??? proxy.conf.js             # Proxy configuration for dev server
?   ??? angular.json              # Angular CLI configuration
?   ??? package.json              # npm dependencies
?   ??? todolist.client.esproj
?
??? todoList.Server.Tests/        # Backend unit tests (xUnit)
?   ??? TodoServiceTests.cs       # Service layer tests (10 tests)
?   ??? InMemoryTodoRepositoryTests.cs  # Repository tests (10 tests)
?   ??? TodosControllerTests.cs   # Controller tests (10 tests)
?   ??? todoList.Server.Tests.csproj
?
??? TEST_SUMMARY.md               # Detailed test documentation
??? RUNNING_TESTS.md              # Test execution guide
??? README.md                     # This file

---

?? Running the Application

Development Mode (Recommended)

Single Command (Easiest):

cd todoList.Server
dotnet run

This starts:

• ? Backend API on https://localhost:7284
• ? Angular dev server on https://localhost:4200 (auto-started via SpaProxy)
• ? Browser opens automatically
• ? Hot reload enabled for both frontend and backend

Separate Servers (Advanced)

If you want to run servers independently:

Terminal 1 - Backend:

cd todoList.Server
dotnet run --launch-profile https

Terminal 2 - Frontend:

cd todolist.client
npm start

Then navigate to https://localhost:7284 in your browser.

Production Build

Build Angular for Production:

cd todolist.client
npm run build

This builds the Angular app to todoList.Server/wwwroot

Run Production Build:

cd todoList.Server
dotnet run --configuration Release

---

?? Running Tests

Backend Tests (.NET)

Run all tests:

dotnet test

Run specific test class:

dotnet test --filter "FullyQualifiedName~TodoServiceTests"

Run with detailed output:

dotnet test --logger "console;verbosity=detailed"

? Expected: 28 tests passing

Frontend Tests (Angular)

Run tests:

cd todolist.client
npm test

Run tests once (no watch):

npm test -- --watch=false

Run with code coverage:

npm test -- --code-coverage