YouTube Channels Manager 📺

Application web moderne pour gérer vos chaînes YouTube favorites avec un système de tags.

🎨 Design System

• Framework CSS: Bulma + CSS personnalisé
• Philosophie: Minimaliste moderne, mobile-first, accessible
• Couleurs: Thème bleu (#2176c7) avec design tokens
• Accessibilité: Conforme WCAG AA
• Responsive: 375px → 1920px (mobile, tablette, desktop)

✨ Fonctionnalités

• ✅ Authentification : Login/Register avec validation robuste
• ✅ Gestion de chaînes : Ajout, suppression, édition
• ✅ Système de tags : Max 10 tags par chaîne, 50 caractères max
• ✅ Recherche : Filtrage par nom ou tags
• ✅ Feedback visuel : Indicateur de force du mot de passe, validation en temps réel
• ✅ Interface française : Toute l'UI en français

🛠️ Technologies

• Frontend: Leptos (Rust WASM)
• CSS: Bulma + Custom CSS avec design tokens
• Build: Trunk
• Validation: Règles strictes (password 8+ chars, channel name 3-100 chars)

🚀 Installation

Prérequis

• Rust (rustup)
• Trunk: cargo install trunk
• Target WASM: rustup target add wasm32-unknown-unknown

Lancer l'application

# Installer les dépendances
cargo build

# Lancer le serveur de développement
trunk serve --port 8080

# Ouvrir dans le navigateur
# http://127.0.0.1:8080

📁 Structure du projet

src/
├── components/       # Composants réutilisables
│   ├── navbar.rs
│   ├── channel_card.rs
│   ├── tag_input.rs
│   └── modal.rs
├── pages/           # Pages de l'application
│   ├── login.rs
│   ├── register.rs
│   ├── channels_list.rs
│   └── add_channel.rs
├── models/          # Modèles de données
│   ├── auth.rs
│   ├── channel.rs
│   └── errors.rs
├── services/        # Services (API, auth)
│   ├── api.rs
│   ├── auth.rs
│   └── mock_api.rs
├── utils/           # Utilitaires
│   └── validators.rs
└── styles/          # CSS
    └── app.css

🎯 Validation

Règles de validation

• Nom d'utilisateur: 3-20 caractères, alphanumériques + underscores
• Mot de passe: Minimum 8 caractères avec indicateur de force
• Nom de chaîne: 3-100 caractères
• Tags: Maximum 10 tags, 50 caractères chacun

♿ Accessibilité

• ✅ Contraste WCAG AA (4.5:1 pour le texte)
• ✅ Focus visible sur tous les éléments interactifs
• ✅ Navigation au clavier (Tab, Enter)
• ✅ Aria-labels sur tous les inputs
• ✅ Touch targets minimum 44px (mobile)
• ✅ Messages d'erreur descriptifs

📱 Responsive Design

Breakpoints

• Mobile: < 769px (1 colonne, full-width, touch targets 44px+)
• Tablette: 769px - 1023px (2 colonnes, max-width 720px)
• Desktop: 1024px+ (3 colonnes, max-width 1200px)

🎨 Design Tokens

/* Couleurs */
--primary: #2176c7
--success: #48c774
--danger: #f14668
--text-primary: #363636

/* Spacing */
--spacing-xs: 0.25rem
--spacing-sm: 0.5rem
--spacing-md: 1rem
--spacing-lg: 1.5rem

/* Typography */
--font-family: system-ui, -apple-system, 'Segoe UI', sans-serif
--font-size-h1: 32px
--font-size-body: 16px

🧪 Tests

# Build de production
trunk build --release

# Vérification du code
cargo fmt --check
cargo clippy

📝 Licence

MIT

👤 Auteur

Gabriel (@fluffy637)

---

Note: Cette application utilise une API mock pour la démo. Pour une utilisation en production, remplacez mock_api.rs par une vraie implémentation API.