# Tech Stack Documentation

## Core Technologies

### Frontend Framework

- **[Angular](https://angular.dev/overview)** (Latest Version)
  - Modern web framework for building scalable single-page applications
  - Leverages TypeScript for enhanced type safety and developer experience

### State Management

- **[NgRx](https://ngrx.io/docs)**
  - 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](https://tailwindcss.com/)**
  - Utility-first CSS framework
  - Enables rapid UI development with pre-built classes
  - Highly customizable through configuration

## Development Tools

### Language

- **[TypeScript](https://www.typescriptlang.org/docs/handbook/intro.html)**
  - Strongly typed programming language
  - Provides enhanced IDE support and compile-time error checking
  - Used throughout the entire application

### Runtime

- **[Node.js](https://nodejs.org/docs/latest-v22.x/api/index.html)**
  - JavaScript runtime environment
  - Used for development server and build tools
  - Required for running npm scripts and development tools

### Testing Framework

- **[Jest](https://jestjs.io/docs/getting-started)**

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

- **[Spectator](https://ngneat.github.io/spectator/)**
  - Angular testing utility library
  - Simplifies component testing
  - Reduces boilerplate in test files

### UI Development

- **[Storybook](https://storybook.js.org/docs/get-started/frameworks/angular)**
  - UI component development environment
  - Enables isolated component development
  - Serves as living documentation for components

### Utilities

- **[date-fns](https://date-fns.org/docs/Getting-Started)**
  - Modern JavaScript date utility library
  - Used for consistent date formatting and manipulation
  - Tree-shakeable to optimize bundle size
- **[Lodash](https://lodash.com/)**
  - Utility library for common JavaScript tasks
- **[UUID](https://www.npmjs.com/package/uuid)**
  - Generates unique identifiers
- **[Zod](https://github.com/colinhacks/zod)**
  - TypeScript-first schema validation library

## Additional Technical Areas

### Authentication & Authorization

- **[angular-oauth2-oidc](https://github.com/manfredsteyer/angular-oauth2-oidc)**
  - Simplifies implementing OAuth2 and OIDC authentication in Angular.
- **[angular-oauth2-oidc-jwks](https://github.com/manfredsteyer/angular-oauth2-oidc)**
  - Adds JWKS support for secure token management.

### Real-Time Communication

- **[@microsoft/signalr](https://www.npmjs.com/package/@microsoft/signalr)**
  - Provides real-time communication between client and server components.

### Barcode Scanning

- **[Scandit Web Data Capture Barcode](https://www.scandit.com/documentation/web/)**
  - Robust barcode scanning capabilities integrated into the application.
- **[Scandit Web Data Capture Core](https://www.scandit.com/documentation/web/)**
  - Core library supporting the barcode scanning features.

### Tooling

- **[Nx](https://nx.dev/)**
  - Powerful monorepo tool for Angular and other frontend applications.
- **[Husky](https://typicode.github.io/husky/#/)**
  - Manages Git hooks for consistent developer workflows.
- **[ESLint](https://eslint.org/) & [Prettier](https://prettier.io/)**
  - Linting and formatting tools to maintain consistent code quality.
- **[Storybook](https://storybook.js.org/)**
  - Isolated component development and living documentation environment.

## 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**
   ```bash
   npm install          # Install dependencies
   npm run start        # Start development server
   npm run test         # Run tests
   npm run storybook    # Start Storybook
   ```