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:

ng generate component component-name

Building

Build for production:

ng build

Or with production configuration and base href for GitHub Pages:

pnpm run build:prod

Running Tests

Execute unit tests with Vitest:

pnpm test

Run tests with UI:

pnpm run test:ui

Generate coverage report:

pnpm run test:coverage

Code Quality

Run all quality checks:

pnpm run 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 (Headless Mode). Required when running inside GitHub Codespaces.

pnpm exec cypress run

Run a Specific Test File

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

Example:

pnpm exec cypress run --spec "cypress/e2e/login/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