Figma is a web-based design tool helping design and development teams build great products, together. It helps design teams to work in one single, shared design file, allowing for good communication and synchronization between team members.

(Mauro) It's the only proposal we have.

PostMan is a platform for collaborative API development. It allows for prototype, documentation and testing for all team APIs in one place.

cURL is a command line tool used to transfer data.

Karma is a test runner for JavaScript, commonly used in Angular applications to execute unit tests in a real browser environment. It allows you to run tests, like those written with Jasmine or Mocha, in multiple browsers, ensuring that your Angular application behaves correctly across different environments.

• Test Execution: Karma launches a browser, loads your application code, and then runs the tests (usually written in Jasmine, a popular testing framework).
• Browser Support: Karma allows tests to be run in multiple browsers simultaneously or in a single browser. It can run tests in headless browsers or actual browsers like Chrome, Firefox, or Safari.
• Configuration: Karma is typically configured via a configuration file (usually karma.conf.js).
• Continuous Integration (CI): Karma integrates well with CI tools like Jenkins, Travis CI, or CircleCI, running tests on every code change to ensure your application is bug-free.

xUnit is a open-source unit testing framework for .NET applications, designed to improve upon earlier frameworks like NUnit and MSTest. It provides a lightweight, extensible, and developer-friendly way to write and run automated tests in C#.

• Code-First Approach: Encourages writing clean and readable test code with attributes like [Fact] for individual tests and [Theory] for parameterized tests.
• Dependency Injection Support: Integrates natively with dependency injection, making it easy to manage test dependencies.
• Parallel Test Execution: Runs tests in parallel by default, improving performance for large test suites.
• Flexible Assertions: Offers a rich set of assertion methods to validate test conditions.
• Integration-Friendly: Compatible with .NET CLI and IDEs like Visual Studio, making it easy to integrate into CI/CD pipelines.

(Mauro) For API Testing, we'll use Postman, given we already count with a JSON file, providing us with cosmic latte endpoints. For frontend testing, only Karma was proposed. For backend testing, only xUnit was proposed.

Entity Framework Core is an Object Relational Mapping tool, allowing .NET developers to work on a database using .NET objects.

(Mauro) Entity Framework Core is the only proposal we have and one team member already has experience with it.

Angular Material is a component library, based on Material Design, designed specially for Angular.

• Built by the Angular Team
• Provides features like DatePicker

NG Bootstrap is a library which provides common widgets, like carousels, modals and tooltips, making the page's styling process simple. It's built on Angular and bootstrap.

As simple as Angular & Bootstrap CSS. Nothing else. If you know Angular, you also know ng-bootstrap.

• Free
• Devs on team already have experience with Bootstrap
• Built on Angular
• Accesible elements. They already have their aria attributes

(Mauro) Given that Angular Material was designed by the same team who made Angular, we expect the best integration from it.

ChartJS is a very popular and easy-to-use JavaScript chart library.

• Offers basic charts like bars, lines, pies, etc.
• Not specifically designed for Angular
• Requires a wrapper like ng2-charts to integrate with Angular.

• Easy to learn and use
• Widely used outside of Angular
• Good for quick basic charts
• Large community and documentation

This minimal setup demonstrates how to display a basic chart in an Angular app.

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Chart, registerables } from 'chart.js';
// Register Chart.js components globally
Chart.register(...registerables);

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  chart: any;

  ngOnInit(): void {
    this.chart = new Chart('MyChart', this.config)
  }

public config: any = {
    type: 'bar',
    data: {},
    options: {}
  }
}

app.component.ts

<div class="chart">
  <canvas id="MyChart">{{ chart }}</canvas>
</div>

NGX Charts is an Angular-specific chart framework.

• Offers a wide variety of chart types including heat maps
• Designed to work natively with Angular
• Provides a more robust and customizable API than Chart.js

• Native integration with Angular
• More flexibility and customization options
• Support for multiple chart types
• Better performance in Angular applications
• Active community of Angular developers

Here's a simple example of how to use ngx-charts in an Angular app.

app.module.ts

import { NgxChartsModule } from '@swimlane/ngx-charts';

@NgModule({
  declarations: [
    // Your components here
  ],
  imports: [
    // Other modules
    NgxChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  barChartData = [
    { name: 'A', value: 10 },
    { name: 'B', value: 20 },
    { name: 'C', value: 15 }
  ];
}

app.component.html

<ngx-charts-bar-vertical
  [view]="[500,300]"
  [results]="barChartData">
</ngx-charts-bar-vertical>

D3 is a Javascript library used to visualize data on the browser. It allows interactive, dynamic data visualization.

• Free
• Open-Source
• Offers a vast amount of chart types, including heat maps and normal maps
• Offers tools to quickly visualize data, such as a CSV Parser
• Offers a quick way to represent a map of the USA
• Light-weight (npm package is 871 kB)

• Is unknown how easy would be to provide maps for countries other than the USA

Here is a simple example of how to integrate D3.js into an Angular application

app.component.ts

// Example of an Angular component encapsulating a D3.js visualization
import { Component, ElementRef, OnInit, OnDestroy } from '@angular/core';
import * as d3 from 'd3';

@Component({
  selector: 'app-d3-chart',
  template: '<div class="chart"></div>',
  styleUrls: ['./d3-chart.component.css']
})
export class D3ChartComponent implements OnInit, OnDestroy {
  constructor(private elementRef: ElementRef) {}

  ngOnInit(): void {
    // Initialize D3.js chart within the component's native element
    const svg = d3.select('figure#barChart')
      .append('svg')
      .attr('width', 400)
      .attr('height', 200)
      .append('circle')
      .attr('cx', 200)
      .attr('cy', 100)
      .attr('r', 50)
      .style('fill', 'red');
  }

  ngOnDestroy(): void {
    // Clean up D3.js chart when component is destroyed
    d3.select(this.elementRef.nativeElement).select('.chart').selectAll('*').remove();
  }
}

app.component.html

<figure id="barChart"></figure>

Apexcharts is a Javascript library for making modern and Interactive Charts

Here is a simple of example of a chart using Apexcharts

app.component.ts

import { Component, ViewChild } from "@angular/core";

import {
  ChartComponent, ApexAxisChartSeries, ApexChart, ApexXAxis, ApexTitleSubtitle
} from "ng-apexcharts";

export type ChartOptions = {
  series: ApexAxisChartSeries;
  chart: ApexChart;
  xaxis: ApexXAxis;
  title: ApexTitleSubtitle;
};

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  @ViewChild("chart") chart: ChartComponent;
  public chartOptions: Partial<ChartOptions>;
  constructor() {
    this.chartOptions = {
      series: [
        {
          name: "My-series",
          data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
        }
      ],
      chart: {
        height: 350,
        type: "bar"
      },
      title: {
        text: "My First Angular Chart"
      },
      xaxis: {
        categories: ["Jan", "Feb",  "Mar",  "Apr",  "May",  "Jun",  "Jul",  "Aug", "Sep"]
      }
    };
  }
}

app.component.html

 <div style="text-align:center">
  <apx-chart
    [series]="chartOptions.series"
    [chart]="chartOptions.chart"
    [xaxis]="chartOptions.xaxis"
    [title]="chartOptions.title"
  ></apx-chart>
</div>

(David) In conclusion, I think we should use NGX Charts, primarily because it has native integration within Angular. However, I don't have experience using Angular or NGX Charts, so we should consult with the front-end trainer to know what other details we should take into account. However Chart JS is a good tool too, we should keep it as a second option.

Angular is a front-end, component based framework, built on Typescript.

(Mauro) Angular is the only contender, since it's the only contender we're all familiar with and its PROS outweigh its CONS.

ASP.NET

.NET 8 is the latest version of Microsoft's .NET platform, released in November 2023 as a Long-Term Support (LTS) version. This release marks an important step in the platform's evolution, consolidating the improvements from previous versions and offering new features and enhancements. Below, we will detail the key reasons to use .NET 8 and the impact it has on application development.

• Thought to develop monolithic web applications
• Long Term Support until November 2026
• .NET 8 improves the tools available for developers, such as the CLI (Command-Line Interface), Visual Studio IDE, and Visual Studio Code.
• .NET MAUI enables the development of mobile and desktop applications for iOS, Android, Windows, and macOS with a single codebase.
• Compatibility and Easy Migration

• Platform Unification: .NET 8 offers a unified platform that allows developers to work consistently across different types of applications, such as web, desktop, mobile, and cloud-based applications. The ability to share code across platforms simplifies the architecture and reduces complexity in projects running on different devices and environments. This reduces both development and maintenance time.
• Performance Improvements: With each new release, .NET continues to optimize its performance, and .NET 8 is no exception. Improvements in JIT (Just-In-Time) compilation, garbage collection optimization, and more efficient thread execution make applications built on .NET 8 faster and more resource-efficient. This is particularly important for high-performance applications and systems requiring scalability and efficiency, such as web services or cloud-based applications.
• Cross-Platform Compatibility: .NET 8 strengthens its cross-platform compatibility, allowing applications to run efficiently not only on Windows but also on Linux and macOS. This flexibility is crucial for businesses operating in mixed environments or planning to extend their applications to various devices, such as mobile phones and cloud servers.
• Enhanced Developer Productivity: .NET 8 is designed to improve developer productivity. Tools like Visual Studio and C# features have been optimized to make writing and maintaining code easier. Additionally, improvements in development tool integration and debugging experience accelerate application creation and troubleshooting.
• Long-Term Stability and Support (LTS): As an LTS (Long-Term Support) version, .NET 8 offers long-term stability with extended support, which is critical for enterprise projects or mission-critical applications that need regular security updates and enhancements without disruption. This reduces compatibility risks and ensures your application remains secure and functional over the years.
• Security Enhancements: .NET 8 includes key security improvements, such as new features to protect applications against emerging vulnerabilities, better authentication and authorization mechanisms, and stronger encryption. This is essential for building applications that handle sensitive data or are deployed in environments where security is a priority, such as financial or healthcare sectors.
• Container and Cloud Compatibility: .NET 8 improves integration with container platforms like Docker and Kubernetes, making it easier to deploy, scale, and manage applications in the cloud. This makes .NET 8 an ideal platform for microservices-based applications and distributed architectures, which are increasingly being adopted by businesses of all sizes.
• Rich Ecosystem of Libraries and Tools: .NET 8 maintains and expands a highly active ecosystem of libraries and frameworks, such as ASP.NET Core, Entity Framework Core, and MAUI (for cross-platform applications). This allows developers to leverage a wide range of pre-built solutions, which accelerates development and reduces the amount of code needed to create robust applications.
• Reactive and Real-Time Development: Enhancements in support for reactive applications, such as integration with frameworks like Blazor and SignalR, make .NET 8 an ideal platform for developing real-time, highly interactive web applications. This is particularly useful for collaborative apps, messaging services, gaming, and other dynamic experiences.

ASP.NET Core is a modern web development framework, running on Linux, Windows, macOS and Docker. .NET 5.0, developed later on, is the union between .NET Core 3.1 and .NET Framework 4.0. Future .NET versions (6.0, 7.0 and 8.0) are improvements of them.

(Manuel) Using .NET 8 is a great choice for new development projects as well as migrating existing applications. Its platform unification, performance improvements, cross-platform compatibility, and developer productivity features make it ideal for developers building modern, secure, and scalable applications. As an LTS version, .NET 8 provides long-term stability, which is crucial for enterprise-level applications and critical projects. If you’re looking to build applications that run across multiple platforms and environments, .NET 8 is the platform to choose.

.....

Docker is a software platform that allows you to build, test, and deploy applications quickly. Docker packages software into standardized units called containers that have everything the software needs to run including libraries, system tools, code, and runtime.

• Provides the same environment to all team members, avoiding "but it worked on my machine" problems.
• All team members are currently on a bootcamp, learning how to use it
• Support from trainer, if needed

• Lack of experience

(Mauro) Docker is the only proposal, has good integration with ASP.NET frameworks and everyone on the team has the same knowledge and experience with it.

GitLab

• Free tier with limitations (5 users per top-level group and 400 compute minutes per month)

GitHub Actions

• Free tier with limitations (500MB and 2000CI/CD minutes)
• Larger community

One way to ensure code quality is by using Git hooks in conjunction with tools like Husky and lint-staged. These tools allow you to automate code quality checks and formatting processes, preventing bad code commits and improving overall development productivity

Git hooks are scripts that can be executed automatically before or after specific Git events, such as committing changes or pushing code to a remote repository. Git hooks play a vital role in improving code quality and maintaining consistency within a development team. By running automated checks and tests before committing or pushing code.

Husky is a popular npm package that simplifies the setup and management of Git hooks. It provides an easy-to-use interface for configuring hooks and running scripts based on specific Git events.

Lint-Staged is an npm package designed to run scripts on Git staged files. It allows you to selectively apply code quality checks, formatting, and other tasks only to the files that are staged for the next commit.

• Lint-Staged operates on these staged files and runs the specified scripts or commands against them. This ensures that only the relevant files are processed, making the code quality checks and formatting more efficient.

Install Husky and Lint-Staged as development dependencies in your project. Using the command: npm install husky lint-staged --save-dev

Husky allows you to define hooks by adding a husky section in your package.json file. Define pre-commit hook that runs the lint-staged command. Every time you commit changes, Husky will automatically trigger Lint-Staged to run the specified scripts on the staged files.

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

To define the scripts or commands you want to run on the staged files, you need to create a .lintstagedrc file in the root of your project. This file will contain the configuration for Lint-Staged.

{
  "*.{js,jsx}": ["eslint --fix", "git add"],
  "*.{css,scss}": ["stylelint --fix", "git add"],
  "*.{json,md}": ["prettier --write", "git add"]
}

The scripts run the respective linting or formatting tools and then add the modified files back to the staging area using git add.

If you want to run ESLint for JavaScript linting, make sure you have ESLint installed and have a .eslintrc file that defines the linting rules. Install the needed tool: npm install eslint --save-dev

The pre-commit hook runs lint-staged and npm test sequentially. So before each commit, Husky will run Lint-Staged to format the staged files and then run your test suite to ensure the code passes all the tests.

"husky": {
  "hooks": {
    "pre-commit": "lint-staged && npm test"
  }
}

To run linting tools as part of pre-commit checks, you need to define the necessary linting scripts in the project's configuration, add an ESLint script to your package.json file:

"scripts": {
  "lint:js": "eslint ."
}

Then, in the lint-staged configuration, include the ESLint script:

{
  "*.js": "npm run lint:js"
}

This can be replicated for different git hooks as needed (e.g. pre-push).

Husky can enforce code quality checks (like linting and testing) before commits and pushes. This helps catch issues early in the development process, reducing the likelihood of broken code reaching the remote repository.

While Husky operates locally, CI/CD tools like GitHub Actions run in the cloud. Husky ensures that code meets certain standards before it even reaches the CI/CD pipeline, reducing the chances of pipeline failures due to code quality issues.

While Husky and Lint-Staged are popular choices for managing Git hooks, there are other alternatives available that may be considered.

• pre-commit: A flexible framework for managing and maintaining Git hooks in multi-language projects.

• pre-push: A tool that allows you to run checks and tests before pushing code to a remote repository.

• Native git-hooks: A collection of Git hooks written in Bash that cover a wide range of use cases.

How to use Husky and Lint-staged

How to set up Github Actions CI/CD with Husky