Portfolio Demo

A modern portfolio management application built with .NET 9.0 and React with TypeScript.

Features

• Real-time portfolio monitoring with live updates via Server-Sent Events
• Advanced filtering and search with symbol autocomplete
• Responsive design with mobile-first approach and accessibility compliance
• Modern tech stack: .NET 9.0, React 18, TypeScript, Vite
• Comprehensive testing suite including unit, integration, and benchmark tests
• Security scanning with automated vulnerability detection
• Docker deployment with Docker Compose

Architecture

Backend (.NET 9.0)

• ASP.NET Core Web API with OpenAPI/Swagger documentation
• Real-time updates via Server-Sent Events
• Health checks and Prometheus metrics
• Caching with Redis and in-memory options
• JWT authentication (configurable)

Frontend (React + TypeScript)

• React 18 with TypeScript and Vite
• State management with Valtio
• UI components built with Radix UI and Tailwind CSS
• Real-time updates with EventSource
• Accessibility compliance (WCAG 2.1 AA)

Status & Coverage

Development

Prerequisites

• .NET 9.0 SDK
• Node.js 20.x
• pnpm
• Docker (optional)

Quick Start

1. Clone the repository

   git clone https://github.com/jamiepearcey/demo.portfolio.git
   cd demo.portfolio

2. Development (macOS/Linux)

   pnpm run start:dev:mac

3. Development (Windows)

   pnpm run start:dev:win

4. Manual Setup

   # Start the API
   cd Demo.Portfolio.API
   dotnet run
   
   # In another terminal, start the UI
   cd Demo.Portfolio.UI/app/portfolio-dashboard
   pnpm install
   pnpm dev

5. Access the application

   • UI: http://localhost:8080
   • API: http://localhost:5167
   • Swagger: http://localhost:5167/api/swagger

Docker Deployment

# Start all services
pnpm run start:docker

# Stop all services
pnpm run stop:docker

# Access via Traefik proxy
# UI: http://localhost
# API: http://localhost/api

Testing

E2E Tests (Playwright)

# Run all E2E tests
pnpm run test:e2e

# Run E2E tests with UI
pnpm run test:e2e:ui

# Run specific test suites
pnpm run test:e2e:dashboard
pnpm run test:e2e:api
pnpm run test:e2e:docker

# Capture validation evidence screenshots (light & dark mode)
pnpm run test:e2e:screenshots

# View test report
pnpm run test:e2e:report

.NET API Tests

# Unit tests with coverage
pnpm run test:coverage:api

# Integration tests with coverage
pnpm run test:coverage:api:integration

# Manual dotnet commands
dotnet test Demo.Portfolio.API/tests/Demo.Portfolio.API.Tests.Unit
dotnet test Demo.Portfolio.API/tests/Demo.Portfolio.API.Tests.Integration

Frontend Tests

# UI tests with coverage
pnpm run test:coverage:ui

# All coverage reports
pnpm run test:coverage:all

Monitoring

• Health checks: /api/health
• Metrics: /api/metrics (Prometheus format)
• Real-time updates: /api/instruments/realtime

Security

• Automated vulnerability detection and dependency scanning
• OWASP Dependency-Check for comprehensive security analysis
• Regular security updates via Dependabot

API Documentation

The API is fully documented with OpenAPI/Swagger:

• Swagger UI: http://localhost:5167/api/swagger
• OpenAPI specification: http://localhost:5167/api/swagger/v1/swagger.json

License

This project is for demonstration purposes only and is otherwise private and confidential