Web Applications Overview

The Syneo/Barcoding web layer consists of three Angular application instances built on a shared monorepo architecture.

The Three Instances

Backend App

Port: 4200 Purpose: Production analysis and daily operations

Target audience: Operations managers, production supervisors

Key features:

• Real-time production monitoring
• Daily operations dashboard
• Manufacturing analytics
• Quality control tracking

Front App

Port: 4201 Purpose: User interactions and job tracking

Target audience: End users, operators, workers

Key features:

• Job tracking and management
• Task assignment
• Time tracking
• User profile management

Dashboard App

Port: 4202 Purpose: External views and data visualization

Target audience: Executives, external stakeholders

Key features:

• High-level visualizations
• Executive dashboards
• Performance metrics
• External reporting

Technology Stack

• Framework: Angular 17.3.12
• Language: TypeScript 5.4.5
• State Management: NGXS 3.8.1
• UI Components: Kendo Angular 16.7.1, Material Design 17.3.10
• Styling: Tailwind CSS 3.4.17, SCSS
• Testing: Jest 29.7.0 (unit), Playwright 1.57.0 (E2E)
• Build: Angular CLI, ng-packagr 17.3.0
• Package Manager: Yarn 1.22.22

Monorepo Structure

web/
├── projects/
│   ├── backend/              # Backend app instance
│   ├── front/                # Front app instance
│   ├── dashboard/            # Dashboard app instance
│   └── packages/@barcoding/  # Shared packages (70+)
│       ├── core/             # Universal utilities
│       ├── sdk/              # Auto-generated API client
│       ├── auth-core/        # Authentication
│       ├── gridster-core/    # Widget system
│       ├── backend-core/     # Backend utilities
│       ├── frontend-core/    # Frontend utilities
│       ├── dashboard-core/   # Dashboard utilities
│       ├── modules/          # Feature modules (29)
│       └── widgets/          # Reusable widgets (20)
├── angular.json              # Angular workspace config
├── package.json              # Dependencies and scripts
└── yarn.lock                 # Lockfile

Package Statistics

• Applications: 3 (Backend, Front, Dashboard)
• Core Packages: 7
• Feature Modules: 29
• Widgets: 20
• Total Packages: 70+

Development Commands

Start Development Servers

cd web

# Backend app
yarn start-back

# Front app
yarn start-front

# Dashboard app
yarn start-dashboard

Build for Production

# Build all apps
yarn build

# Build individual apps
yarn build:back:prod
yarn build:front:prod
yarn build:dash:prod

Testing

# Unit tests (Jest)
yarn test
yarn test:watch
yarn test:coverage

# E2E tests (Playwright)
yarn test:e2e
yarn test:e2e:headed
yarn test:e2e:debug

# CI tests
yarn test:ci

Linting

yarn lint

Generate SDK

yarn build-sdk

Key Features

Shared Package Architecture

All three instances share common packages:

• Reduces code duplication
• Ensures consistency
• Simplifies maintenance
• Enables code reuse

Lazy-Loaded Modules

Modules are loaded on-demand:

• Smaller initial bundle sizes
• Faster load times
• Better performance

NGXS State Management

Centralized state with NGXS:

• ModuleStore for navigation
• WidgetStore for widget configuration
• AuthState for authentication
• Feature-specific stores

Dynamic Widget System

Database-driven widgets:

• User-customizable dashboards
• Drag-and-drop interface
• Persistent configurations
• Reusable across instances

API Integration via SDK

Auto-generated API client:

• 604 API services
• Type-safe API calls
• Consistent interface
• No manual HTTP requests

Architecture Highlights

Component-Based Design

App Component
├── Layout Component
│   ├── Header Component
│   ├── Sidebar Component
│   └── Content Area
│       └── Feature Module (lazy-loaded)
│           ├── List Component
│           ├── Detail Component
│           └── Form Component

State Flow

User Action
    ↓
Component dispatches Action
    ↓
NGXS Store handles Action
    ↓
Service calls API (via SDK)
    ↓
Store updates State
    ↓
Component re-renders (via Observable)

Routing Strategy

// Lazy-loaded routes
{
  path: 'modules/ticket',
  loadChildren: () => import('@barcoding/module-ticket')
    .then(m => m.ModuleTicketModule)
}

Development Workflow

1. Start Dependencies

# Terminal 1: API
cd api/b3api
npm run start

2. Start Web App

# Terminal 2: Web app
cd web
yarn start-back  # or start-front or start-dashboard

3. Make Changes

Edit files in web/projects/:

• Changes hot-reload automatically
• TypeScript compiles on-the-fly
• Browser refreshes automatically

4. Test Changes

# Run unit tests
yarn test <filename>

# Run E2E tests
yarn test:e2e

5. Build for Production

yarn build

File Organization

Application Structure

projects/backend/src/
├── app/
│   ├── components/           # App-specific components
│   ├── modules/              # Lazy-loaded modules
│   ├── services/             # App-specific services
│   ├── app.component.ts      # Root component
│   ├── app.config.ts         # App configuration
│   └── app.routes.ts         # Route definitions
├── environments/             # Environment configs
│   ├── environment.ts        # Development
│   └── environment.prod.ts   # Production
├── assets/                   # Static assets
├── styles/                   # Global styles
├── index.html                # HTML entry point
└── main.ts                   # Bootstrap file

Package Structure

packages/@barcoding/core/
├── src/
│   ├── lib/
│   │   ├── services/         # Core services
│   │   ├── models/           # Type definitions
│   │   ├── store/            # NGXS stores
│   │   ├── forms/            # Form builders
│   │   ├── utils/            # Utility functions
│   │   └── public-api.ts     # Public exports
│   └── index.ts              # Barrel export
├── package.json              # Package metadata
├── ng-package.json           # ng-packagr config
├── tsconfig.lib.json         # TypeScript config
└── README.md                 # Package documentation

Next Steps

By Role

For Frontend Developers:

• Creating Modules - Build new features
• Core Package - Learn utilities
• Testing Guide - Write tests

For Backend Developers:

• SDK Package - Understand API integration
• Auth Core - Learn authentication
• API Documentation - API reference

For DevOps:

• Building for Production - Build commands
• Project Structure - Understand layout
• Architecture - System design

By Task

• Getting Started - Set up development
• Multi-Instance Architecture - Understand instances
• State Management - Learn NGXS
• Widget System - Dynamic widgets