Account Frontend

January 25, 2026 · View on GitHub

Overview

This is the pedagogical example app of the discipline Aplicação com Interfaces Ricas - Tecnologia em Análise e Desenvolvimento de Sistemas - TADS - Diretoria Acadêmica de Gestão e Tecnologia da Informação - DIATINF - Campus Natal Central - CNAT - Instituto Federal do Rio Grande do Norte - IFRN.

Features

Modern single-page application (SPA) for account management
JWT-based authentication and route guards
CRUD operations for accounts, categories, owners, and entries
Responsive UI with PrimeNG components and Tailwind CSS
Real-time form validation and error handling
Multiple entry types: Credit, Debit, and Transfer
Balance tracking and initial value management
Automated tests with Vitest
Code quality checks with ESLint, Prettier, Jscpd, and SonarCloud
Containerized development with DevContainer support

Technologies

This frontend application is built with Angular and leverages the following technologies:

Angular (Framework)
TypeScript (Language)
PrimeNG (UI component library)
PrimeIcons (Icon library)
Tailwind CSS (Utility-first CSS framework)
RxJS (Reactive programming)
JWT Decode (JWT token parsing)
Vitest (Unit testing framework)
Happy-DOM (DOM implementation for testing)
ESLint (Code linting)
Prettier (Code formatting)
JSCPD (Copy-paste detection)
SonarCloud (Code quality and coverage)
Angular CLI (Build tooling)
pnpm (Package manager)
GitHub Actions (CI/CD)
GitHub Pages (Static site hosting)

Getting Started

Clone the repository
Install dependencies
```
pnpm install
```
Start development server
```
pnpm ng serve
```
Or run with host binding for DevContainer:
```
pnpm ng serve --host 0.0.0.0 --port 4200
```
Access the application
- Visit http://localhost:4200/ for the frontend
- By default, connects to backend at http://localhost:8080
- For other environments, use configurations:
```
pnpm ng serve --configuration=codespace
pnpm ng serve --configuration=production
```

Development

Code Scaffolding

Angular CLI includes powerful code scaffolding tools:

pnpm ng generate component component-name

Building

Build for production:

pnpm ng build

Or with production configuration and base href for GitHub Pages:

pnpm run build:prod

Running Tests

Execute unit tests with Angular Cli:

pnpm ng test

Execute unit tests with Vitest:

pnpm test

Run e2e tests with Cypress and Vite:

pnpm vite:start:instrumented &
pnpm cypress:run

Generate unit coverage report:

pnpm test:unit:coverage

Generate e2e coverage report:

pnpm test:e2e:coverage

Code Quality

Run all quality checks:

pnpm quality

This includes:

Format checking with Prettier
Linting with ESLint
Test coverage verification
Copy-paste detection with JSCPD
SonarQube analysis

Run Cypress Tests

This project uses Cypress for end-to-end testing. Tests can be executed in headless mode (recommended for Codespaces and CI) or in interactive mode (local development).

Run All Cypress Tests (With Real Backend Data)

pnpm test:cypress:run

Run All Cypress Tests (With Mocked Data)

Ideal for fast testing and CI/CD pipelines without backend dependency:

pnpm test:cypress:mock:run

Run a Specific Test File

With real backend data:

pnpm exec cypress run --spec "cypress/e2e/path/to/file.cy.ts"

With mocked data:

CYPRESS_USE_MOCK=true pnpm exec cypress run --spec "cypress/e2e/path/to/file.cy.ts"

Example:

CYPRESS_USE_MOCK=true pnpm exec cypress run --spec "cypress/e2e/auth/login.cy.ts"

Run an Entire Folder of Tests

pnpm exec cypress run --spec "cypress/e2e/category/**/*.cy.ts"

Video Recording Configuration

module.exports = defineConfig({
  e2e: {
    video: true,   // change to false to disable
  },
});

License

This project is licensed under the Apache License 2.0