Service de raccourcissement d'URL full-stack

## 🚀 Service de Raccourcissement d'URL - Application Full-Stack ### 📋 Présentation du Projet Construisez un service de raccourcissement d'URL full-stack, prêt pour la production, avec un frontend moderne et accessible et une API backend RESTful robuste. L'application doit gérer le cycle de vie complet des liens raccourcis : création, redirection, suivi, gestion et expiration. Priorisez la performance, la sécurité et une expérience utilisateur exceptionnelle sur tous les appareils. --- ### 🛠️ Pile Technologique **Frontend :** - HTML5 sémantique avec attributs ARIA pour l'accessibilité (conformité WCAG 2.1 AA) - CSS3 avec propriétés personnalisées CSS (variables), Flexbox et CSS Grid - JavaScript vanilla (ES2022+) utilisant une architecture modulaire (modules ES) - Pas de frameworks lourds - gardez le bundle léger et rapide **API Backend :** - Conception d'API RESTful suivant la spécification OpenAPI 3.0 - Format de requête/réponse JSON avec codes de statut HTTP appropriés - Configuration CORS pour les requêtes cross-origin - Limitation de débit par IP et par clé API **Bibliothèques (CDN ou groupées) :** - Génération de codes QR (par exemple, `qrcode.js` ou `qr-creator`) - Bibliothèque de graphiques pour l'analytique (par exemple, Chart.js ou alternative légère) - Sélecteur de date pour l'expiration (par exemple, `flatpickr`) - Système de notifications toast (personnalisé, sans dépendance) --- ### 🎨 Frontend - Exigences UI/UX **Mise en page et Design :** - Design propre et minimaliste avec une section héros comportant un **grand champ de saisie d'URL proéminent** centré sur la page - Implémenter un **bouton de bascule mode sombre/clair** avec détection de préférence système (`prefers-color-scheme`) et persistance via `localStorage` - Utiliser un système de design cohérent : échelle typographique, jetons d'espacement, palette de couleurs - Micro-animations et transitions fluides (fondu, glissement vers le haut, ondulations de boutons) pour tous les éléments interactifs - États de chargement squelettiques pour le contenu asynchrone (analytique, tableau d'historique) **Design Responsive :** - Approche mobile-first avec points de rupture à 480px, 768px, 1024px et 1440px - Cibles tactiles adaptées au toucher (minimum 44×44px) - Menu de navigation repliable sur mobile (menu hamburger avec animation) - Typographie fluide utilisant `clamp()` **Accessibilité :** - Prise en charge complète de la navigation au clavier (ordre des onglets, piégeage du focus dans les modales) - Annonces de lecteur d'écran pour le contenu dynamique (régions `aria-live`) - Indicateurs de focus visibles sur tous les éléments interactifs - Ratios de contraste de couleurs suffisants (minimum 4,5:1 pour le texte) - Prise en charge du mouvement réduit (`prefers-reduced-motion`) --- ### ⚙️ Fonctionnalités Principales #### 1. Moteur de Raccourcissement d'URL - Champ de saisie proéminent avec texte d'espace réservé et retour de validation en temps réel - **Validation d'URL** : Vérifier le protocole valide (`http://`, `https://`), la structure de domaine appropriée et rejeter les URL malformées en utilisant à la fois les regex et l'API constructeur `URL` - **Assainissement d'URL** : Supprimer les paramètres de suivi (UTM, fbclid, gclid), supprimer les barres obliques redondantes, normaliser le protocole et la casse - Préfixer automatiquement `https://` si aucun protocole n'est fourni - Afficher l'URL raccourcie immédiatement après la création avec une animation de succès - **Raccourcissement d'URL en masse** : Permettre aux utilisateurs de coller plusieurs URL (une par ligne) et de les raccourcir toutes en une fois #### 2. Prise en Charge d'Alias Personnalisés - Champ d'alias personnalisé facultatif (par exemple, `short.ly/my-brand`) - Vérification de disponibilité en temps réel pendant la saisie (appel API anti-rebond, 300ms) - Règles de validation d'alias : alphanumériques, tirets, traits de soulignement uniquement ; 3 à 30 caractères ; liste noire de mots réservés (par exemple, `admin`, `api`, `login`, `static`) - Messages d'erreur clairs si l'alias est pris ou invalide #### 3. Génération de Codes QR - Générer automatiquement un code QR pour chaque URL raccourcie lors de la création - Modale/panneau de code QR avec options pour : - Télécharger en PNG (haute résolution, 1024×1024) - Télécharger en SVG (vecteur, évolutif) - Personnaliser les couleurs de premier plan/arrière-plan - Ajouter un petit logo en superposition au centre (facultatif) - S'assurer que les codes QR encodent l'URL raccourcie complète et sont scannables à petites tailles #### 4. Suivi des Clics et Tableau de Bord Analytique - Suivre chaque redirection avec les points de données suivants : - Horodatage (UTC) - Pays et ville (via API de géolocalisation IP) - Type d'appareil (mobile, tablette, ordinateur de bureau) - Système d'exploitation et navigateur (via analyse du User-Agent) - URL du référent - Visiteur unique vs. récurrent (via cookie/empreinte numérique) - **Tableau de Bord Analytique** par lien comprenant : - Compteurs de clics totaux et de clics uniques - Graphique linéaire des clics dans le temps (filtrable : dernières 24h, 7j, 30j, 90j, tout le temps) - Carte de répartition géographique ou graphique à barres (top 10 des pays) - Répartition par appareil/OS/navigateur (graphiques en anneau ou en secteurs) - Tableau des principaux référents - Carte de chaleur des clics par jour de la semaine et heure de la journée - Aperçu analytique agrégé sur le tableau de bord principal (liens totaux, clics totaux, lien le plus populaire) #### 5. Expiration des Liens - Sélecteur de date/heure d'expiration facultatif lors de la création d'un lien - Prise en charge des préréglages : 1 heure, 24 heures, 7 jours, 30 jours, date personnalisée - Afficher un compte à rebours ou un badge "expire dans X" sur les liens actifs - Désactiver automatiquement les liens expirés et afficher une page conviviale "Ce lien a expiré" lors des tentatives de redirection - Permettre aux utilisateurs de prolonger ou de supprimer l'expiration des liens existants #### 6. Protection par Mot de Passe - Bouton de mot de passe facultatif lors de la création d'un lien - Si activé, afficher une page de saisie de mot de passe avant de rediriger vers l'URL cible - Hacher les mots de passe côté serveur en utilisant bcrypt ou Argon2 (ne jamais stocker en texte brut) - Limiter le débit des tentatives de mot de passe (maximum 5 par minute par IP) avec messages de verrouillage - Indicateur visuel (icône de cadenas 🔒) sur les liens protégés par mot de passe dans la vue d'historique #### 7. Copie dans le Presse-papiers - Bouton de copie en un clic à côté de chaque URL raccourcie - Utiliser l'API Presse-papiers (`navigator.clipboard.writeText()`) avec repli sur `document.execCommand('copy')` - Confirmation visuelle : l'icône du bouton change en coche ✅ avec une infobulle/toast "Copié !" qui se ferme automatiquement après 2 secondes - Prise en charge des raccourcis clavier (par exemple, `Ctrl+Shift+C` pour copier le lien créé le plus récemment) #### 8. Historique et Gestion des URL - Tableau/grille d'historique persistant de toutes les URL raccourcies (stocké dans `localStorage` pour les invités, base de données pour les utilisateurs authentifiés) - Chaque entrée affiche : URL d'origine (tronquée avec infobulle), URL courte, date de création, nombre de clics, statut (actif/expiré/protégé par mot de passe) et boutons d'action - **Recherche** : Recherche en texte intégral sur les URL d'origine, les alias et les étiquettes - **Filtrage** : Par statut (actif, expiré, protégé), plage de dates, plage de nombre de clics et étiquettes - **Tri** : Par date de création, nombre de clics, alphabétiquement (croissant/décroissant) - **Pagination ou défilement infini** pour les grands historiques (25 éléments par page) - **Actions en masse** : Sélectionner plusieurs liens pour supprimer, désactiver ou exporter en CSV/JSON - **Étiquettes/Libellés** : Permettre aux utilisateurs d'ajouter des étiquettes personnalisées pour organiser les liens (par exemple, "marketing", "social", "campagne-q4") --- ### 🔒 Exigences de Sécurité - Assainissement des entrées côté client et serveur pour prévenir les attaques XSS - Protection CSRF sur tous les points de terminaison API modifiant l'état - Valider et assainir les cibles de redirection pour prévenir les vulnérabilités de redirection ouverte (liste blanche des protocoles autorisés, bloquer les schémas `javascript:`, `data:`, `file:`) - Implémenter les en-têtes de politique de sécurité du contenu (CSP) - Limitation de débit : maximum 20 créations de liens par minute par IP ; maximum 100 requêtes API par minute - En-têtes HTTP sécurisés : `X-Content-Type-Options`, `X-Frame-Options`, `Strict-Transport-Security` - Ne jamais exposer les identifiants internes ; utiliser nanoid ou UUID pour les identifiants de liens publics --- ### ⚡ Exigences de Performance - Scores Lighthouse cibles : Performance >90, Accessibilité >95, Bonnes pratiques >95, SEO >90 - Chargement paresseux des graphiques analytiques et des ressources non critiques - Anti-rebond sur toutes les entrées de recherche et de validation - Utiliser `IntersectionObserver` pour les animations basées sur le défilement et le chargement paresseux - Minimiser les reflows et les repaints ; utiliser les `transform` et `opacity` CSS pour les animations - Mettre en cache les réponses API lorsque approprié (par exemple, données analytiques avec TTL de 60s) - Les redirections doivent se résoudre en moins de 100ms côté serveur --- ### 🧪 Gestion des Erreurs et Cas Limites - Messages d'erreur élégants pour : pannes réseau, délais d'expiration API, URL invalides, alias en double, erreurs serveur (500), limite de débit dépassée (429) - Détection hors ligne : afficher une bannière lorsque l'utilisateur perd la connectivité et mettre en file d'attente les actions pour réessai - Gérer les URL extrêmement longues (jusqu'à 2048 caractères) sans casser la mise en page - Gérer correctement les noms de domaine internationalisés (IDN) Unicode - Illustrations d'état vide lorsque l'utilisateur n'a pas de liens ou de données analytiques --- ### 📦 Livrables 1. Code source complet et bien commenté avec une structure de dossiers claire 2. `README.md` avec instructions d'installation, documentation API et liste des fonctionnalités 3. Tableau de référence des points de terminaison API (méthode, chemin, paramètres, format de réponse) 4. Un mode `démo` avec des données d'exemple préchargées pour un aperçu immédiat 5. Responsive sur Chrome, Firefox, Safari et Edge (2 dernières versions) --- > **Remarque :** Construisez ceci de manière incrémentale - commencez par le flux de raccourcissement principal (saisie → validation → raccourcissement → affichage → copie), puis ajoutez les codes QR, l'analytique, les alias personnalisés, l'expiration, la protection par mot de passe et le tableau de bord d'historique complet. Assurez-vous que chaque fonctionnalité est entièrement fonctionnelle et testée avant de passer à la suivante.