​

Back-Office Overview

​

What is the Back-Office?

• Create and edit content (articles, pages)
• Manage media files (images, documents)
• Configure site settings (themes, menus, blocks)
• Manage users and permissions (admin-only)
• Organize content with categories and tags

​

Technology Stack

​

Key Features

​

Multi-Language Support

• UI Languages: French, English, Dutch
• Content Languages: Articles and pages support multiple language versions
• Seamless Switching: Toggle UI language without page reload

​

Role-Based Access Control

• Admin Role: Full system access including user management
• Editor Role: Content creation and editing capabilities
• Granular Permissions: Fine-grained control over features

​

Modern UX

• Responsive Design: Works on desktop, tablet, and mobile
• Theme Support: Black and transparent theme options
• Loading States: Clear feedback during operations
• Error Handling: User-friendly error messages

​

Visual Page Builder

• Unlayer Integration: Drag-and-drop page builder
• Template System: Pre-designed templates for quick start
• Autosave: Never lose your work
• Media Integration: Direct access to media library

​

Authentication

• Production: Keycloak with PKCE flow for maximum security
• Development: Mock authentication service for local development
• Session Management: Tokens stored securely in SessionStorage
• Auto-Logout: Automatic logout on token expiration

​

Architecture Principles

​

Component-Based Architecture

• Reusable Components: Modular UI building blocks
• Composition API: Vue 3’s modern API for better code organization
• TypeScript: Full type safety across the codebase

​

Separation of Concerns

• Views: Route-level components (pages)
• Components: Reusable UI elements
• Stores: Centralized state management (Pinia)
• Services: API communication layer

​

API Integration

• RESTful API: Communicates with Symfony backend
• Automatic Auth: Bearer tokens automatically injected
• ETag Support: Optimistic concurrency control
• Error Handling: Consistent error management

​

Getting Started

​

Developer Resources

​

Local Development

# Install dependencies
pnpm install

# Start dev server (http://localhost:5173)
pnpm dev

# Run tests
pnpm test

# Type checking
pnpm typecheck

​

Project Structure

cms-bo/bo/
├── src/
│   ├── components/     # Reusable UI components
│   ├── views/          # Route-level components (pages)
│   ├── stores/         # Pinia state stores
│   ├── services/       # API services
│   ├── router/         # Vue Router configuration
│   ├── i18n/           # Translations (FR/EN/NL)
│   ├── types/          # TypeScript type definitions
│   └── main.ts         # Application entry point
├── public/             # Static assets
├── tests/              # E2E tests (Playwright)
└── package.json        # Dependencies and scripts

​

Next Steps

​

Support

• Documentation: This site covers all technical aspects
• AI Agent Context: .context/back-office/ for detailed technical docs
• Issue Tracker: Report bugs and request features
• Team Chat: Reach out to the development team