mirror of
https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend
synced 2025-12-28 22:42:11 +01:00
3bcdfccb5c
Enhanced code review guidelines and clarified code style documentation. - 📚 **Docs**: Added emphasis on adherence to review guidelines - 📚 **Docs**: Clarified documentation requirements in code style - 🛠️ **Refactor**: Updated import paths in input controls styles - 📚 **Docs**: Expanded tech stack documentation with new libraries
129 lines
4.1 KiB
Markdown
129 lines
4.1 KiB
Markdown
# 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
|
|
```
|