Market BackOffice

A comprehensive Angular-based admin panel for managing multi-brand marketplace products, categories, and inventory.

Features

• 📊 Project Management - Switch between multiple marketplace brands (Dexar, Novo, etc.)
• 📁 Category Editor - Create, edit, and organize categories with drag-and-drop priority
• 🏷️ Subcategory Management - Hierarchical category structure with subcategories
• 📦 Item Editor - Full-featured product editor with:
  • Auto-save (500ms debounce)
  • Image upload and management
  • Rich text descriptions
  • Variant management
  • Tags, pricing, stock control
  • Priority sorting
• 📋 Items List - Paginated item browsing with:
  • Search functionality
  • Visibility filters
  • Bulk operations
  • Quick edit access
• 🎨 Material Design - Modern Angular Material UI
• 🔄 Mock Data Mode - Development mode with mock data for testing
• 📱 Responsive - Works on desktop and tablet

Tech Stack

• Angular 21 - Latest Angular with standalone components
• Angular Material 21 - Material Design components
• TypeScript - Type-safe development
• SCSS - Modular styling
• RxJS - Reactive programming

API Integration

See API.md for complete API documentation.

Base URL: Configured in src/environments/environment.ts

Main Endpoints

• Projects: GET /api/projects
• Categories: GET, POST, PATCH, DELETE /api/categories/*
• Subcategories: GET, POST, PATCH, DELETE /api/subcategories/*
• Items: GET, POST, PATCH, DELETE /api/items/*
• Upload: POST /api/upload (multipart/form-data)

Project Structure

src/app/
├── components/
│   ├── confirm-dialog/        # Confirmation dialogs
│   └── create-dialog/         # Creation dialogs
├── models/
│   ├── project.model.ts       # Project/Brand model
│   ├── category.model.ts      # Category with subcategories
│   ├── item.model.ts          # Product model
│   └── index.ts               # Model exports
├── pages/
│   ├── projects-dashboard/    # Brand selection
│   ├── project-view/          # Category management
│   ├── category-editor/       # Category details editor
│   ├── subcategory-editor/    # Subcategory editor
│   ├── items-list/            # Item browsing
│   └── item-editor/           # Full item editor
├── services/
│   ├── api.service.ts         # HTTP API integration
│   ├── mock-data.service.ts   # Development mock data
│   └── index.ts               # Service exports
└── environments/
    ├── environment.ts         # Development config
    └── environment.production.ts  # Production config

Development server

To start a local development server, run:

npm start
# or
ng serve

Once the server is running, open your browser and navigate to http://localhost:4200/.

Building

To build the project for production:

npm run build
# or
ng build

This will compile your project and store the build artifacts in the dist/market-backOffice/ directory.

Environment Configuration

Development (src/environments/environment.ts)

export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api',  // Local backend
  useMockData: true  // Use mock data for development
};

Production (src/environments/environment.production.ts)

export const environment = {
  production: true,
  apiUrl: 'https://api.dexarmarket.ru/api',  // Production backend
  useMockData: false  // Use real API
};

Deployment

Prerequisites

1. Node.js 18+ and npm installed
2. Backend API running and accessible
3. API URL configured in production environment

Build for Production

npm run build

Deploy to Server

1. Upload contents of dist/market-backOffice/ to your web server
2. Configure nginx or Apache to serve the files:

Nginx Example:

server {
    listen 80;
    server_name backoffice.dexarmarket.ru;
    
    root /var/www/backoffice;
    index index.html;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    # Optional: Proxy API requests
    location /api/ {
        proxy_pass https://api.dexarmarket.ru/api/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

3. Enable HTTPS with Let's Encrypt:

certbot --nginx -d backoffice.dexarmarket.ru

Development Features

Auto-Save

• Item editor auto-saves changes after 500ms of inactivity
• Each field triggers individual PATCH requests
• Visual feedback for save operations

Mock Data Mode

• Enable with useMockData: true in environment
• Simulates full API with realistic data
• Useful for frontend development without backend

Material Design

• Consistent UI with Angular Material
• Themes can be customized in src/styles.scss
• Responsive components for all screen sizes

Running unit tests

To execute unit tests with Vitest:

npm test
# or
ng test

Additional Resources

• Angular CLI Documentation
• Angular Material
• API Documentation

Support

For issues or questions, contact the development team or check the main marketplace repository.

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the Angular CLI Overview and Command Reference page.