mirror of
https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend
synced 2025-12-28 22:42:11 +01:00
596ae1da1b
1. Reward Shopping Cart Implementation - New shopping cart with quantity control and availability checking - Responsive shopping cart item component with improved CSS styling - Shipping address integration in cart - Customer reward card and billing/shipping address components 2. Navigation State Management Library (@isa/core/navigation) - New library with type-safe navigation context service (373 lines) - Navigation state service (287 lines) for temporary state between routes - Comprehensive test coverage (668 + 227 lines of tests) - Documentation (792 lines in README.md) - Replaces query parameters for passing temporary navigation context 3. CRM Shipping Address Services - New ShippingAddressService with fetching and validation - CustomerShippingAddressResource and CustomerShippingAddressesResource - Zod schemas for data validation 4. Additional Improvements - Enhanced searchbox accessibility with ARIA support - Availability data access rework for better fetching/mapping - Storybook tooltip variant support - Vitest JUnit and Cobertura reporting configuration Related work items: #5382, #5383, #5384
5.4 KiB
5.4 KiB
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
-
- Primary testing framework
- Used for unit and integration tests
- Provides snapshot testing capabilities
-
- 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.
Core Libraries
Navigation State Management
@isa/core/navigation- Type-safe navigation state management through Angular Router state
- Provides clean abstraction for passing temporary state between routes
- Eliminates URL pollution from query parameters
- Platform-agnostic using Angular's Location service
- Full documentation: libs/core/navigation/README.md
Logging
@isa/core/logging- Centralized logging service for application-wide logging
- Provides contextual information for debugging
Storage
@isa/core/storage- Storage providers for state persistence
- Session and local storage abstractions
Tabs
@isa/core/tabs- Tab management and navigation history tracking
- Persistent tab state across sessions
Configuration
@isa/core/config- Application configuration management
- Environment-specific settings
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
-
Required Software
- Node.js (Latest LTS version)
- npm (comes with Node.js)
- Git
-
IDE Recommendations
- Visual Studio Code with following extensions:
- Angular Language Service
- ESLint
- Prettier
- Tailwind CSS IntelliSense
- Visual Studio Code with following extensions:
-
Getting Started
npm install # Install dependencies npm run start # Start development server npm run test # Run tests npm run storybook # Start Storybook