• 🌟 Fonctionnalités
• 🚀 Installation
• ⚙️ Configuration
• 🔑 Variables d'Environnement
• 📦 Déploiement
• 🎨 Technologies
• 🛠️ Structure
• 🔧 API Backend
• 🤝 Support

• ✅ Vue d'ensemble - Statistiques en temps réel
• 📈 Analytics - Graphiques et métriques détaillées
• 👥 Gestion des groupes - Administration complète
• 📱 Connexion WhatsApp - QR Code & Pairing
• 🔔 Notifications - Alertes temps réel
• 🌍 Multilingue - Français & English

• Gestion des Groupes

  • Liste des groupes WhatsApp
  • Statistiques détaillées
  • Gestion des membres
  • Modération avancée
  • Commandes personnalisées

• Système de Permissions

  • Rôles : Owner, Admin, Moderator
  • Permissions granulaires
  • Gestion des sudos

• Analytics & Rapports

  • Statistiques d'utilisation
  • Graphiques interactifs
  • Export de données
  • Historique des actions

• Configuration

  • Paramètres du bot
  • Personnalisation
  • Thème clair/sombre
  • Langues multiples

• Design System - shadcn/ui components
• Animations - Framer Motion
• Responsive - Mobile, Tablet, Desktop
• Dark Mode - Thème automatique
• Accessibility - WCAG 2.1 compliant

• Node.js v18+ (Télécharger)
• npm ou pnpm ou yarn
• Backend Wabot (Repository)

git clone https://github.com/ferelking242/wabot-web.git
cd wabot-web

npm install
# ou
pnpm install
# ou
yarn install

Créez un fichier .env :

cp .env.example .env
nano .env

Créez .env à la racine de client/ :

# ================================
# Supabase Configuration
# ================================
VITE_SUPABASE_URL=https://votre-projet.supabase.co
VITE_SUPABASE_ANON_KEY=votre_anon_key

# ================================
# API Backend
# ================================
VITE_API_URL=http://localhost:5000
# En production:
# VITE_API_URL=https://votre-api.com

# ================================
# WhatsApp
# ================================
VITE_BOT_PHONE_NUMBER=242061194809

# ================================
# Application
# ================================
VITE_APP_NAME=Wabot Dashboard
VITE_APP_VERSION=1.0.0

Créez .env à la racine :

# ================================
# Server Configuration
# ================================
PORT=5000
NODE_ENV=production

# ================================
# Supabase
# ================================
SUPABASE_URL=https://votre-projet.supabase.co
SUPABASE_ANON_KEY=votre_anon_key
SUPABASE_SERVICE_ROLE_KEY=votre_service_role_key

# ================================
# Database
# ================================
DATABASE_URL=postgresql://user:password@host:port/database

# ================================
# CORS
# ================================
ALLOWED_ORIGINS=http://localhost:5173,https://votre-frontend.com

# ================================
# Authentication
# ================================
JWT_SECRET=votre_secret_jwt
SESSION_SECRET=votre_secret_session

1. Créez un compte sur Supabase
2. Créez un nouveau projet
3. Copiez les credentials depuis Settings → API

Le backend doit être déployé séparément. Voir wabot.

# Frontend (port 5173)
cd client
npm run dev

# Backend (port 5000)
cd server
npm run dev

# Ou tout en même temps
npm run dev

Ouvrez http://localhost:5173

# Build frontend
cd client
npm run build

# Build backend
cd server
npm run build

# Les fichiers sont dans client/dist/ et server/dist/

1. Connectez votre repo GitHub

   https://vercel.com/new
   

2. Configuration

   • Framework Preset: Vite
   • Root Directory: client/
   • Build Command: npm run build
   • Output Directory: dist

3. Variables d'environnement

   • Ajoutez toutes les variables VITE_*

4. Déployer ✅

1. Créer un Web Service

   • Repository: https://github.com/ferelking242/wabot-web
   • Branch: main

2. Configuration

   • Root Directory: server/
   • Build Command: npm install && npm run build
   • Start Command: npm start

3. Variables d'environnement

   • Ajoutez toutes les variables du .env

4. Déployer ✅

# Install Netlify CLI
npm install -g netlify-cli

# Build
cd client
npm run build

# Deploy
netlify deploy --prod --dir=dist

# Build images
docker-compose build

# Lancer les services
docker-compose up -d

# Accéder à l'app
# Frontend: http://localhost:3000
# Backend: http://localhost:5000

docker-compose.yml :

version: '3.8'

services:
  frontend:
    build:
      context: ./client
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    environment:
      - VITE_API_URL=http://backend:5000
    depends_on:
      - backend

  backend:
    build:
      context: ./server
      dockerfile: Dockerfile
    ports:
      - "5000:5000"
    env_file:
      - .env
    depends_on:
      - postgres

  postgres:
    image: postgres:15
    environment:
      POSTGRES_DB: wabot
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: password
    volumes:
      - postgres_data:/var/lib/postgresql/data

volumes:
  postgres_data:

wabot-web/
├── client/                 # Application React/Vite
│   ├── src/
│   │   ├── components/    # Composants React
│   │   │   ├── ui/       # shadcn/ui components
│   │   │   ├── dashboard/
│   │   │   ├── auth/
│   │   │   └── layout/
│   │   ├── pages/        # Pages de l'app
│   │   │   ├── dashboard/
│   │   │   ├── home.tsx
│   │   │   └── ...
│   │   ├── lib/          # Utilitaires
│   │   │   ├── api.ts
│   │   │   ├── supabase.ts
│   │   │   └── utils.ts
│   │   ├── hooks/        # Custom hooks
│   │   ├── stores/       # State management
│   │   ├── i18n/         # Traductions
│   │   └── types/        # Types TypeScript
│   ├── public/           # Assets statiques
│   └── index.html
│
├── server/                # Backend Express
│   ├── routes/           # Routes API
│   │   ├── auth.ts
│   │   ├── botStatusRoutes.ts
│   │   ├── groupActivityRoutes.ts
│   │   └── ...
│   ├── lib/              # Logique métier
│   ├── api/              # Services API
│   ├── cache/            # Cache service
│   ├── minimal-server.ts # Point d'entrée
│   └── types.ts
│
├── shared/               # Code partagé
└── scripts/              # Scripts utilitaires

POST   /api/auth/login
POST   /api/auth/logout
GET    /api/auth/session

GET    /api/bot/status
POST   /api/bot/connect
POST   /api/bot/disconnect
GET    /api/bot/qr

GET    /api/groups
GET    /api/groups/:id
GET    /api/groups/:id/members
GET    /api/groups/:id/stats
POST   /api/groups/:id/link

GET    /api/commands
GET    /api/commands/:category
POST   /api/commands/execute
GET    /api/commands/stats

// Fetch groups
const response = await fetch('/api/groups', {
  headers: {
    'Authorization': `Bearer ${token}`
  }
});

const groups = await response.json();

Méthodes disponibles :

1. QR Code (recommandé)

   const qr = await api.bot.getQRCode();
   // Afficher le QR dans l'interface

2. Pairing Code

   const code = await api.bot.getPairingCode(phoneNumber);
   // Afficher le code à l'utilisateur

// Liste des groupes
const groups = await api.groups.list();

// Détails d'un groupe
const group = await api.groups.get(groupId);

// Membres d'un groupe
const members = await api.groups.getMembers(groupId);

// Statistiques
const stats = await api.groups.getStats(groupId);

// Statistiques globales
const analytics = await api.analytics.global();

// Statistiques par période
const daily = await api.analytics.daily('2025-10-01', '2025-10-10');

// Top commandes
const topCommands = await api.analytics.topCommands(limit: 10);

• 🇫🇷 Français
• 🇬🇧 English

import { useTranslation } from 'react-i18next';

function Component() {
  const { t, i18n } = useTranslation();
  
  return (
    <button onClick={() => i18n.changeLanguage('fr')}>
      {t('common.language')}
    </button>
  );
}

1. Créer client/src/i18n/locales/es.json
2. Ajouter les traductions
3. Importer dans client/src/i18n/config.ts

• ✅ HTTPS Only en production
• ✅ CORS configuré strictement
• ✅ JWT avec expiration
• ✅ Rate Limiting sur l'API
• ✅ Input Validation avec Zod
• ✅ XSS Protection avec sanitization
• ✅ CSRF Tokens sur les mutations
• ✅ Environment Variables pour les secrets

# Tests unitaires
npm run test

# Tests e2e
npm run test:e2e

# Coverage
npm run test:coverage

# Check outdated
npm outdated

# Update all
npm update

# Update specific
npm install react@latest

Dans .env :

NODE_ENV=development
VITE_DEBUG=true

• React DevTools - Inspection des composants
• Redux DevTools - State management
• Network Tab - Requêtes API

• ✅ Code splitting avec React.lazy
• ✅ Image optimization avec Vite
• ✅ Bundle analysis avec rollup-plugin-visualizer
• ✅ Cache API avec TanStack Query
• ✅ Lazy loading des routes
• ✅ Memoization avec React.memo

• Lighthouse Score : 95+
• First Contentful Paint : < 1.5s
• Time to Interactive : < 3.5s

• GitHub Issues : Signaler un bug
• Discussions : Forum
• Backend : wabot

• React Docs
• Vite Docs
• shadcn/ui
• Tailwind CSS

Ce projet est sous licence MIT - voir LICENSE

• shadcn/ui - Components
• Tailwind CSS - Styling
• Vite - Build tool
• Supabase - Backend