Project Structure

Understanding the project structure is essential for navigating and contributing to Syneo/Barcoding.

Root Directory Layout

/workspace/
├── api/                # LoopBack 4 API
│   └── b3api/         # Main API application
├── web/                # Angular 17 monorepo
│   └── projects/      # All Angular projects
├── desktop/            # Electron desktop app
├── bot/                # Puppeteer automation
├── docs/               # Legacy documentation
├── wiki/               # Legacy wiki
└── docs_v2/            # This documentation (VitePress)

API Structure

api/b3api/
├── src/
│   ├── controllers/        # 606+ REST controllers
│   ├── repositories/       # 582+ data repositories
│   ├── services/           # 22 business logic services
│   ├── models/             # LoopBack model definitions
│   ├── datasources/        # Database connection configs
│   ├── knex_migrations/    # Knex database migrations
│   └── application.ts      # LoopBack application
├── dist/                   # Compiled JavaScript output
└── package.json

Key API Directories

• controllers/ - Handle HTTP requests and responses
• repositories/ - Data access layer for models
• services/ - Business logic and external integrations
• models/ - TypeScript model definitions
• datasources/ - Database connection configurations
• knex_migrations/ - Database schema migrations

Web Structure

web/
├── projects/
│   ├── backend/                    # Backend app instance
│   ├── front/                      # Front app instance
│   ├── dashboard/                  # Dashboard app instance
│   └── packages/@barcoding/        # Shared packages
│       ├── core/                   # Universal utilities
│       ├── sdk/                    # Generated API SDK
│       ├── auth-core/              # Authentication
│       ├── gridster-core/          # Widget system
│       ├── backend-core/           # Backend utilities
│       ├── frontend-core/          # Frontend utilities
│       ├── dashboard-core/         # Dashboard utilities
│       ├── modules/                # 29 feature modules
│       │   ├── module-ncr/
│       │   ├── module-ticket/
│       │   ├── module-hr/
│       │   └── ...
│       └── widgets/                # 20 reusable widgets
│           ├── widget-calendar/
│           ├── widget-chart/
│           └── ...
├── angular.json                    # Angular workspace config
├── package.json                    # Dependencies and scripts
└── yarn.lock                       # Yarn lockfile

Application Instances

Backend App (projects/backend/)

Production analysis and daily operations dashboard.

backend/
├── src/
│   ├── app/
│   │   ├── modules/           # Lazy-loaded feature modules
│   │   ├── components/        # App-specific components
│   │   ├── services/          # App-specific services
│   │   └── app.routes.ts      # Routing configuration
│   ├── environments/          # Environment configs
│   └── main.ts                # Bootstrap file
└── project.json               # Project configuration

Port: 4200

Front App (projects/front/)

User interactions and job tracking.

front/
├── src/
│   ├── app/
│   │   ├── modules/           # Lazy-loaded feature modules
│   │   ├── components/        # App-specific components
│   │   └── app.routes.ts      # Routing configuration
│   ├── environments/
│   └── main.ts
└── project.json

Port: 4201

Dashboard App (projects/dashboard/)

External views and data visualization.

dashboard/
├── src/
│   ├── app/
│   │   ├── widgets/           # Dashboard widgets
│   │   ├── components/        # App-specific components
│   │   └── app.routes.ts      # Routing configuration
│   ├── environments/
│   └── main.ts
└── project.json

Port: 4202

Core Packages

@barcoding/core

Universal utilities used by all three instances.

core/
├── src/lib/
│   ├── services/          # Utility services
│   ├── forms/             # Form builders and validators
│   ├── store/             # NGXS stores (ModuleStore, WidgetStore)
│   ├── models/            # TypeScript interfaces
│   └── utils/             # Helper functions
└── package.json

@barcoding/sdk

Auto-generated API client from OpenAPI spec.

sdk/
├── src/lib/
│   ├── services/          # 604 generated API services
│   ├── models/            # API model interfaces
│   └── api.module.ts      # SDK module
└── package.json

NEVER EDIT MANUALLY

SDK files are auto-generated. Use yarn build-sdk to regenerate.

@barcoding/auth-core

Authentication and authorization.

auth-core/
├── src/lib/
│   ├── guards/            # Route guards
│   ├── interceptors/      # HTTP interceptors
│   ├── services/          # Auth services
│   └── store/             # AuthState (NGXS)
└── package.json

@barcoding/gridster-core

CRITICAL - Widget system used by all three instances.

gridster-core/
├── src/lib/
│   ├── components/        # Gridster components
│   ├── services/          # Widget management
│   ├── models/            # Widget interfaces
│   └── directives/        # Gridster directives
└── package.json

Module Structure

Each feature module follows this structure:

module-ticket/
├── src/lib/
│   ├── components/        # Feature components
│   ├── services/          # Feature services
│   ├── store/             # Feature state (NGXS)
│   ├── models/            # Feature models
│   ├── routing/           # Module routes
│   └── module-ticket.module.ts
└── package.json

Widget Structure

Each widget package follows this structure:

widget-calendar/
├── src/lib/
│   ├── widget-calendar.component.ts    # Main widget
│   ├── widget-calendar.component.html
│   ├── widget-calendar.component.scss
│   └── widget-calendar.module.ts
└── package.json

Configuration Files

Root Configuration

• .gitignore - Git ignore patterns
• lerna.json - Lerna monorepo config
• turbo.json - Turbo build system config

Web Configuration

• angular.json - Angular workspace configuration
• package.json - Dependencies and scripts
• tsconfig.json - TypeScript configuration
• jest.config.js - Jest testing configuration
• playwright.config.ts - Playwright E2E configuration

API Configuration

• tsconfig.json - TypeScript configuration
• .eslintrc.js - ESLint configuration
• package.json - Dependencies and scripts

Next Steps

• Development Commands - Learn available commands
• Architecture Overview - Understand system design
• Package Dependencies - Learn dependency hierarchy