telegram-management-system/marketing-agent/frontend

Telegram Marketing Agent - Frontend

Modern Vue 3 management interface for the Telegram Marketing Agent System.

Features

• 🎯 Campaign Management: Create, manage, and monitor marketing campaigns
• 📊 Real-time Analytics: Track performance metrics and engagement rates
• 🧠 A/B Testing: Built-in experimentation framework
• 🤖 AI Integration: Claude-powered strategy generation and optimization
• 🔐 Compliance Tools: GDPR/CCPA compliance management
• 🌍 Multi-language Support: English and Chinese interfaces
• 🎨 Modern UI: Built with Element Plus and Tailwind CSS

Tech Stack

• Framework: Vue 3 with Composition API
• State Management: Pinia
• Routing: Vue Router 4
• UI Library: Element Plus
• Styling: Tailwind CSS
• Build Tool: Vite
• Charts: Chart.js with vue-chartjs
• HTTP Client: Axios
• Internationalization: Vue I18n

Getting Started

Prerequisites

• Node.js 18+ and npm 8+
• Backend services running (see main README)

Installation

# Install dependencies
npm install

# Start development server
npm run dev

The application will be available at http://localhost:3008

Environment Configuration

The frontend proxies API requests to the backend. Configure the proxy in vite.config.js:

server: {
  proxy: {
    '/api': {
      target: 'http://localhost:3000', // API Gateway URL
      changeOrigin: true
    }
  }
}

Project Structure

src/
├── api/              # API client modules
│   ├── index.js      # Axios configuration
│   └── modules/      # API endpoints by domain
├── assets/           # Static assets
├── components/       # Reusable components
├── locales/          # i18n translations
├── router/           # Vue Router configuration
├── stores/           # Pinia stores
├── utils/            # Utility functions
├── views/            # Page components
├── App.vue           # Root component
├── main.js           # Application entry
└── style.css         # Global styles

Key Features

Campaign Management

• Create campaigns with AI-powered strategy generation
• Multi-step message sequences with delays
• Target audience selection by groups and tags
• Real-time campaign status monitoring
• Campaign lifecycle management (start, pause, resume, cancel)

Analytics Dashboard

• Key performance metrics with trend analysis
• Time-series charts for message and engagement data
• Campaign performance comparison
• Real-time activity feed
• Export reports in multiple formats

A/B Testing

• Create experiments with multiple variants
• Statistical significance testing
• Real-time result monitoring
• Winner selection and rollout

Compliance Management

• User consent tracking
• Data export/deletion requests
• Audit log viewing
• GDPR/CCPA compliance status

Development

Available Scripts

# Development server
npm run dev

# Production build
npm run build

# Preview production build
npm run preview

# Lint and fix
npm run lint

# Format code
npm run format

Code Style

• Use Composition API with <script setup>
• Prefer TypeScript-like prop definitions
• Use Tailwind for utility classes
• Use Element Plus components for consistency

State Management

The application uses Pinia for state management:

// stores/auth.js
export const useAuthStore = defineStore('auth', () => {
  const user = ref(null)
  const token = ref('')
  
  // Store logic...
})

API Integration

All API calls go through the centralized API client:

import api from '@/api'

// Example usage
const campaigns = await api.campaigns.getList({
  page: 1,
  pageSize: 20
})

Building for Production

# Build the application
npm run build

# Files will be in dist/
# Serve with any static file server

Nginx Configuration

server {
    listen 80;
    server_name your-domain.com;
    root /var/www/marketing-agent;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    location /api {
        proxy_pass http://api-gateway:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

Security Considerations

• All API requests require authentication
• JWT tokens stored in localStorage
• Automatic token refresh on 401 responses
• CORS configured for production domains
• Input validation on all forms
• XSS protection via Vue's template compilation

Contributing

1. Follow the existing code style
2. Write meaningful commit messages
3. Add appropriate error handling
4. Update translations for new features
5. Test across different screen sizes

License

See the main project LICENSE file.