1. Caso de Estudio: Portafolio Personal con TypeScript, Angular y SQLite

// Abstracción de repositorio permite cambiar DB sin afectar lógica
interface IProjectRepository {
  findAll(): Promise<Project[]>;
  findById(id: string): Promise<Project>;
}

// Implementación SQLite (actual)
class SQLiteProjectRepository implements IProjectRepository { }

// Implementación PostgreSQL (futura)
class PostgreSQLProjectRepository implements IProjectRepository { }

src/
├── domain/                    # CORE (Lógica de Negocio)
│   ├── entities/              # Entidades del dominio
│   │   ├── project.entity.ts
│   │   ├── experience.entity.ts
│   │   └── education.entity.ts
│   ├── repositories/          # Interfaces (Ports)
│   │   ├── project.repository.ts
│   │   └── contact.repository.ts
│   └── use-cases/             # Casos de uso
│       ├── get-all-projects.use-case.ts
│       └── send-contact-email.use-case.ts
│
├── infrastructure/            # ADAPTERS (Implementaciones)
│   ├── database/              # Adaptador de DB
│   │   ├── sqlite.service.ts
│   │   └── repositories/
│   │       └── sqlite-project.repository.ts
│   ├── email/                 # Adaptador de Email
│   │   └── email.service.ts
│   └── http/                  # Adaptador HTTP (futuro)
│
└── presentation/              # UI (Angular Components)
    ├── components/
    ├── pages/
    └── services/              # Inyección de dependencias

// domain/entities/project.entity.ts
export class Project {
  constructor(
    public readonly id: string,
    public readonly title: string,
    public readonly description: string,
    public readonly technologies: string[],
    public readonly demoUrl?: string,
    public readonly githubUrl?: string
  ) {}
}

// domain/repositories/project.repository.ts (PORT)
export interface IProjectRepository {
  findAll(): Promise<Project[]>;
  findById(id: string): Promise<Project>;
  findByTechnology(tech: string): Promise<Project[]>;
}

// infrastructure/database/repositories/sqlite-project.repository.ts (ADAPTER)
export class SQLiteProjectRepository implements IProjectRepository {
  constructor(private db: SQLiteService) {}

  async findAll(): Promise<Project[]> {
    const rows = await this.db.query('SELECT * FROM projects');
    return rows.map(row => new Project(
      row.id,
      row.title,
      row.description,
      JSON.parse(row.technologies),
      row.demo_url,
      row.github_url
    ));
  }

  // ... otros métodos
}

// domain/use-cases/get-all-projects.use-case.ts
export class GetAllProjectsUseCase {
  constructor(private projectRepo: IProjectRepository) {}

  async execute(): Promise<Project[]> {
    return await this.projectRepo.findAll();
  }
}

// presentation/pages/projects/projects.component.ts
@Component({
  selector: 'app-projects',
  templateUrl: './projects.component.html'
})
export class ProjectsComponent implements OnInit {
  projects: Project[] = [];

  constructor(private getAllProjects: GetAllProjectsUseCase) {}

  async ngOnInit() {
    this.projects = await this.getAllProjects.execute();
  }
}

src/
├── controllers/
├── services/
├── models/
└── views/

src/
├── domain/
│   ├── proyectos/
│   ├── experiencia/
│   ├── educacion/
│   └── contacto/
├── infrastructure/
└── presentation/

portfolio/
├── src/
│   ├── domain/                          # DOMINIO (Core Business Logic)
│   │   ├── proyectos/
│   │   │   ├── entities/
│   │   │   │   └── project.entity.ts
│   │   │   ├── repositories/
│   │   │   │   └── project.repository.interface.ts
│   │   │   └── use-cases/
│   │   │       ├── get-all-projects.use-case.ts
│   │   │       ├── get-project-by-id.use-case.ts
│   │   │       └── filter-projects-by-tech.use-case.ts
│   │   │
│   │   ├── experiencia/
│   │   │   ├── entities/
│   │   │   │   └── experience.entity.ts
│   │   │   ├── repositories/
│   │   │   │   └── experience.repository.interface.ts
│   │   │   └── use-cases/
│   │   │       └── get-all-experiences.use-case.ts
│   │   │
│   │   ├── educacion/
│   │   │   ├── entities/
│   │   │   │   └── education.entity.ts
│   │   │   ├── repositories/
│   │   │   │   └── education.repository.interface.ts
│   │   │   └── use-cases/
│   │   │       └── get-all-education.use-case.ts
│   │   │
│   │   └── contacto/
│   │       ├── entities/
│   │       │   └── contact-message.entity.ts
│   │       ├── repositories/
│   │       │   └── contact.repository.interface.ts
│   │       └── use-cases/
│   │           └── send-contact-email.use-case.ts
│   │
│   ├── infrastructure/                  # INFRAESTRUCTURA (Adapters)
│   │   ├── database/
│   │   │   ├── sqlite.service.ts
│   │   │   ├── migrations/
│   │   │   │   └── 001_initial_schema.sql
│   │   │   └── repositories/
│   │   │       ├── sqlite-project.repository.ts
│   │   │       ├── sqlite-experience.repository.ts
│   │   │       ├── sqlite-education.repository.ts
│   │   │       └── sqlite-contact.repository.ts
│   │   │
│   │   ├── email/
│   │   │   └── email.service.ts        # Envio de emails (Nodemailer, SendGrid, etc.)
│   │   │
│   │   └── storage/
│   │       └── file-storage.service.ts # Almacenamiento de CV PDF
│   │
│   ├── presentation/                    # PRESENTACION (Angular UI)
│   │   ├── core/
│   │   │   ├── guards/
│   │   │   ├── interceptors/
│   │   │   └── services/
│   │   │       └── dependency-injection.service.ts
│   │   │
│   │   ├── shared/
│   │   │   ├── components/
│   │   │   │   ├── header/
│   │   │   │   ├── footer/
│   │   │   │   └── theme-toggle/
│   │   │   ├── directives/
│   │   │   └── pipes/
│   │   │
│   │   ├── pages/
│   │   │   ├── home/
│   │   │   ├── projects/
│   │   │   │   ├── projects-list/
│   │   │   │   └── project-detail/
│   │   │   ├── experience/
│   │   │   ├── education/
│   │   │   └── contact/
│   │   │
│   │   └── layout/
│   │       └── main-layout/
│   │
│   ├── assets/
│   │   ├── i18n/                        # Traducciones
│   │   │   ├── es.json
│   │   │   ├── en.json
│   │   │   └── pt.json
│   │   ├── images/
│   │   └── cv/
│   │       └── cv-david-rolon.pdf
│   │
│   └── styles/
│       ├── _variables.scss              # Design Tokens
│       ├── _themes.scss                 # Modo oscuro/claro
│       └── styles.scss
│
├── database/
│   └── portfolio.db                     # SQLite database
│
└── tests/
    ├── unit/
    ├── integration/
    └── e2e/

// assets/i18n/es.json
{
  "HOME": {
    "TITLE": "Hola, soy David Rolón",
    "SUBTITLE": "Desarrollador Full-Stack",
    "CTA": "Ver Proyectos"
  },
  "PROJECTS": {
    "TITLE": "Proyectos",
    "FILTER_BY": "Filtrar por tecnología"
  }
}

// assets/i18n/en.json
{
  "HOME": {
    "TITLE": "Hi, I'm David Rolón",
    "SUBTITLE": "Full-Stack Developer",
    "CTA": "View Projects"
  },
  "PROJECTS": {
    "TITLE": "Projects",
    "FILTER_BY": "Filter by technology"
  }
}

// styles/_variables.scss (Design Tokens)
:root {
  // Colors
  --color-primary: #3f51b5;
  --color-secondary: #ff4081;
  --color-success: #4caf50;
  --color-error: #f44336;

  // Typography
  --font-family-primary: 'Roboto', sans-serif;
  --font-size-base: 16px;
  --font-size-h1: 2.5rem;
  --font-size-h2: 2rem;

  // Spacing
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;

  // Shadows
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.15);
  --shadow-lg: 0 8px 16px rgba(0,0,0,0.2);
}

// styles/_themes.scss
[data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --text-primary: #212121;
  --text-secondary: #757575;
}

[data-theme="dark"] {
  --bg-primary: #121212;
  --bg-secondary: #1e1e1e;
  --text-primary: #ffffff;
  --text-secondary: #b0b0b0;
}

// presentation/shared/components/navigation-buttons/navigation-buttons.component.ts
@Component({
  selector: 'app-navigation-buttons',
  template: `
    <div class="nav-buttons" *ngIf="showButtons">
      <button (click)="goToPrevious()" [disabled]="isFirstSection">
        <mat-icon>arrow_upward</mat-icon>
      </button>
      <button (click)="goToNext()" [disabled]="isLastSection">
        <mat-icon>arrow_downward</mat-icon>
      </button>
    </div>
  `
})
export class NavigationButtonsComponent {
  @Input() showButtons = true;

  sections = ['home', 'projects', 'experience', 'education', 'contact'];
  currentSectionIndex = 0;

  get isFirstSection(): boolean {
    return this.currentSectionIndex === 0;
  }

  get isLastSection(): boolean {
    return this.currentSectionIndex === this.sections.length - 1;
  }

  goToNext(): void {
    if (!this.isLastSection) {
      this.currentSectionIndex++;
      this.scrollToSection(this.sections[this.currentSectionIndex]);
    }
  }

  goToPrevious(): void {
    if (!this.isFirstSection) {
      this.currentSectionIndex--;
      this.scrollToSection(this.sections[this.currentSectionIndex]);
    }
  }

  private scrollToSection(sectionId: string): void {
    document.getElementById(sectionId)?.scrollIntoView({ behavior: 'smooth' });
  }
}

// domain/entities/contact-message.entity.ts
export class ContactMessage {
  constructor(
    public readonly name: string,
    public readonly email: string,
    public readonly subject: string,
    public readonly message: string,
    public readonly createdAt: Date = new Date()
  ) {
    this.validate();
  }

  private validate(): void {
    // Validación de nombre
    if (!this.name || this.name.trim().length < 2) {
      throw new Error('El nombre debe tener al menos 2 caracteres');
    }
    if (this.name.length > 100) {
      throw new Error('El nombre no puede exceder 100 caracteres');
    }

    // Validación de email
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(this.email)) {
      throw new Error('Email inválido');
    }

    // Validación de mensaje
    if (!this.message || this.message.trim().length < 10) {
      throw new Error('El mensaje debe tener al menos 10 caracteres');
    }
    if (this.message.length > 1000) {
      throw new Error('El mensaje no puede exceder 1000 caracteres');
    }

    // Sanitización (prevenir XSS)
    this.sanitize();
  }

  private sanitize(): void {
    // Eliminar scripts y HTML peligroso
    const dangerousPatterns = [/<script>/gi, /<\/script>/gi, /javascript:/gi];
    dangerousPatterns.forEach(pattern => {
      (this as any).name = this.name.replace(pattern, '');
      (this as any).message = this.message.replace(pattern, '');
    });
  }
}

// presentation/pages/contact/contact.component.ts
@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html'
})
export class ContactComponent {
  contactForm: FormGroup;

  constructor(
    private fb: FormBuilder,
    private sendContactEmail: SendContactEmailUseCase
  ) {
    this.contactForm = this.fb.group({
      name: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(100)]],
      email: ['', [Validators.required, Validators.email]],
      subject: ['', [Validators.required, Validators.minLength(5)]],
      message: ['', [Validators.required, Validators.minLength(10), Validators.maxLength(1000)]]
    });
  }

  async onSubmit(): Promise<void> {
    if (this.contactForm.invalid) {
      this.contactForm.markAllAsTouched();
      return;
    }

    try {
      const message = new ContactMessage(
        this.contactForm.value.name,
        this.contactForm.value.email,
        this.contactForm.value.subject,
        this.contactForm.value.message
      );

      await this.sendContactEmail.execute(message);

      // Mostrar mensaje de éxito
      this.showSuccessMessage();
      this.contactForm.reset();
    } catch (error) {
      // Mostrar mensaje de error
      this.showErrorMessage(error.message);
    }
  }
}

// domain/entities/contact-message.entity.spec.ts
describe('ContactMessage Entity', () => {
  describe('Email Validation', () => {
    it('should accept valid email', () => {
      expect(() => {
        new ContactMessage(
          'John Doe',
          'john@example.com',
          'Test Subject',
          'This is a test message with enough characters'
        );
      }).not.toThrow();
    });

    it('should reject invalid email format', () => {
      expect(() => {
        new ContactMessage(
          'John Doe',
          'invalid-email',
          'Test Subject',
          'This is a test message'
        );
      }).toThrowError('Email inválido');
    });

    it('should reject email without domain', () => {
      expect(() => {
        new ContactMessage(
          'John Doe',
          'john@',
          'Test Subject',
          'This is a test message'
        );
      }).toThrowError('Email inválido');
    });
  });

  describe('XSS Prevention', () => {
    it('should sanitize script tags in name', () => {
      const message = new ContactMessage(
        'John<script>alert("XSS")</script>Doe',
        'john@example.com',
        'Test Subject',
        'This is a test message with enough characters'
      );
      expect(message.name).not.toContain('<script>');
    });

    it('should sanitize javascript: protocol', () => {
      const message = new ContactMessage(
        'John Doe',
        'john@example.com',
        'Test Subject',
        'Click here: javascript:alert("XSS")'
      );
      expect(message.message).not.toContain('javascript:');
    });
  });
});