Génère l’ensemble des fichiers et l’architecture d’un site web dynamique, responsive et professionnel pour un club de sport (volleyball) incluant une synchronisation idéale entre toutes les parties du site.Le système doit assurer une cohérence complète entre :Le front-end (interface publique du site)Le back-end (gestion des données, API, panel d’administration)Le stockage local des données (localStorage / IndexedDB / fichiers JSON pour simuler une base de données locale persistante)Un chatbot intelligent intégré sur toutes les pagesUn système de notification en temps réelUn module e-commerce (vente d’articles et de billets)Un tableau de classement dynamiqueSpécifications techniques à respecter :Framework front-end : React.js ou Vue.jsStockage des données : localStorage avec fallback JSONAucune donnée fictive : les fichiers doivent être prêts à recevoir de vraies données (structure claire, sans données fake)Toutes les routes et composants doivent être synchronisés automatiquement (navigation fluide, actualisation instantanée des modules interconnectés)Générer les fichiers suivants :index.htmlApp.js ou main.jsComposants : Accueil, Équipes, Résultats, Classement, Actualités, Galerie, Contact, Boutique, AdminPanel, Chatbot, Notificationsroutes.js ou équivalentFichiers de configuration (config.js, store.js, etc.)Simulations de base de données (data.json, ranking.json, etc.)Système d’authentification local (admin@mtvb.ma / admin123)Système de panier pour e-commerce (ajout, suppression, validation commande)Fichiers de style (Tailwind CSS ou autre)Objectif final :Obtenir une base de projet fonctionnelle, modulaire et persistante localement, capable d’évoluer avec de vraies données et garantissant une parfaite synchronisation entre tous les modules (ex : si un match est ajouté en admin, il apparaît dans résultats + classement sans rechargement manuel).

Résous tous les problèmes de synchronisation entre le panneau d'administration (Admin Panel) et les autres parties du site web.L'objectif est que toute donnée ajoutée, modifiée ou supprimée depuis l'interface d’administration (par exemple : événements, produits, classements, galeries, joueurs, actualités) soit immédiatement visible et mise à jour dans l’ensemble du site, y compris :Page d'accueil (Home)Pages dédiées (ex : /evenements, /boutique, /classement)Composants globaux (ex : sidebar, calendrier, notifications, bandeaux défilants)Chatbot et modules e-commerceExigences techniques :Implémenter une architecture centralisée de gestion des données (ex : Store global Redux / Pinia / Vuex / Context API)Tous les composants doivent consommer la même source unique de véritéUtiliser une synchronisation automatique entre AdminPanel et le Front-end publicChaque modification dans l’admin doit mettre à jour le store ou la base localeTous les composants doivent réagir en temps réel aux modifications du store (ex : via subscribe, watchEffect, useEffect)Assurer la persistance locale des données (ex : localStorage, indexedDB, ou fichiers JSON) pour que les données restent disponibles même après rechargement ou redémarrageAjouter des triggers automatiques (ex : événements personnalisés, WebSocket local simulé, ou observer localStorage)Éviter toute redondance de données ou duplication dans les composantsRésultat attendu :Une cohérence parfaite entre toutes les sections du siteUne expérience fluide et en temps réel pour les utilisateurs comme pour les administrateursUne architecture modulaire, fiable et extensible avec de vraies donnéesSouhaites-tu que je te génère un exemple de cette architecture avec code (React + localStorage + Context) pour commencer ?Ask ChatGPT