ISA-Frontend/docs/tech-stack.md

Tech Stack Documentation

Core Technologies

Frontend Framework

• Angular (Latest Version)
  • Modern web framework for building scalable single-page applications
  • Leverages TypeScript for enhanced type safety and developer experience

State Management

• NgRx
  • Redux-inspired state management for Angular applications
  • Provides predictable state container and powerful dev tools
  • Used for managing complex application state and side effects

Styling

• Tailwind CSS
  • Utility-first CSS framework
  • Enables rapid UI development with pre-built classes
  • Highly customizable through configuration

Development Tools

Language

• TypeScript
  • Strongly typed programming language
  • Provides enhanced IDE support and compile-time error checking
  • Used throughout the entire application

Runtime

• Node.js
  • JavaScript runtime environment
  • Used for development server and build tools
  • Required for running npm scripts and development tools

Testing Framework

• Jest

  • Primary testing framework
  • Used for unit and integration tests
  • Provides snapshot testing capabilities

• Spectator

  • Angular testing utility library
  • Simplifies component testing
  • Reduces boilerplate in test files

UI Development

• Storybook
  • UI component development environment
  • Enables isolated component development
  • Serves as living documentation for components

Utilities

• date-fns
  • Modern JavaScript date utility library
  • Used for consistent date formatting and manipulation
  • Tree-shakeable to optimize bundle size
• Lodash
  • Utility library for common JavaScript tasks
• UUID
  • Generates unique identifiers
• Zod
  • TypeScript-first schema validation library

Additional Technical Areas

Authentication & Authorization

• angular-oauth2-oidc
  • Simplifies implementing OAuth2 and OIDC authentication in Angular.
• angular-oauth2-oidc-jwks
  • Adds JWKS support for secure token management.

Real-Time Communication

• @microsoft/signalr
  • Provides real-time communication between client and server components.

Barcode Scanning

• Scandit Web Data Capture Barcode
  • Robust barcode scanning capabilities integrated into the application.
• Scandit Web Data Capture Core
  • Core library supporting the barcode scanning features.

Tooling

• Nx
  • Powerful monorepo tool for Angular and other frontend applications.
• Husky
  • Manages Git hooks for consistent developer workflows.
• ESLint & Prettier
  • Linting and formatting tools to maintain consistent code quality.
• Storybook
  • Isolated component development and living documentation environment.

Domain Libraries

Customer Relationship Management (CRM)

• @isa/crm/data-access
  • Handles data access logic for customer-related features.
  • Contains services for fetching and managing customer data.

Development Environment Setup

1. Required Software

   • Node.js (Latest LTS version)
   • npm (comes with Node.js)
   • Git

2. IDE Recommendations

   • Visual Studio Code with following extensions:
     • Angular Language Service
     • ESLint
     • Prettier
     • Tailwind CSS IntelliSense

3. Getting Started

   npm install          # Install dependencies
   npm run start        # Start development server
   npm run test         # Run tests
   npm run storybook    # Start Storybook