Account Frontend

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

1. Clone the repository
2. Install dependencies

   pnpm install

3. Start development server

   pnpm ng serve

   Or run with host binding for DevContainer:

   pnpm ng serve --host 0.0.0.0 --port 4200

4. 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