Détail du travail

Contexte

Les installations photovoltaïques génèrent de grands volumes de données énergétiques qui, sans une présentation adéquate, sont difficiles à interpréter :

• consommation du logement ou de l'installation,
• production photovoltaïque,
• échange énergétique avec le réseau,
• et, potentiellement, avec des systèmes de stockage.

Solar centralise cette information et la présente de manière visuelle, cohérente et accessible depuis un seul panneau web.

Ce que cela résout

L'application permet :

• Visualiser le comportement énergétique par jour, mois ou année
• Comparer production, consommation et export/import
• Comprendre le bilan énergétique de façon immédiate
• Gérer les chargements de données et les sauvegardes (utilisateurs admin)
• L'interface adapte ses textes et contrôles selon la période sélectionnée.

Le tout en consommant uniquement des données déjà normalisées et consolidées par l'API backend.

Architecture des vues et réutilisation de composants

Sur le frontend, il existe trois vues principales : Daily, Monthly et Yearly.

Les trois réutilisent le même composant graphique (même type de chart et même base visuelle). Ce qui change entre les vues :

• le sélecteur de période (date / mois / année),
• l'agrégation des données (heures / jours / mois),
• et les étiquettes et textes affichés à l'utilisateur.

Le graphique est le même ; la différence réside dans la logique de données et dans le contrôle de la période.

Fonctionnalités principales

Vue quotidienne

• Sélecteur de date
• Graphique avec 24 valeurs horaires
• Visualisation du flux énergétique :
• production photovoltaïque

Vue mensuelle

• Sélecteur de mois
• Graphique avec données agrégées par jour
• Comparaison claire de la production et de la consommation au long du mois

Vue annuelle

• Sélecteur d'année
• Graphique avec données agrégées par mois
• Vision globale du comportement énergétique annuel

Gestion et administration

L'accès administrateur active des fonctionnalités supplémentaires :

• Chargement multiple de fichiers CSV
• Téléchargement de copies de sauvegarde
• Gestion basique des données depuis l'interface web

L'option « Mettre à jour le profil » est visible mais affiche actuellement un avis de fonctionnalité en construction.

Intégration avec l'API Solar

Le frontend consomme exclusivement l'API backend :

• POST /users/login — authentification
• GET /photovoltaics/date/:date — données quotidiennes, mensuelles ou annuelles
• POST /photovoltaics/upload — chargement de CSV (admin)
• GET /photovoltaics — téléchargement de backup complet

L'URL de base de l'API est gérée via des variables d'environnement (VITE_API_BASE_URL).

Sécurité et contrôle d'accès

• Authentification via login
• Token et rôle stockés dans sessionStorage
• Le rôle admin active la section « Gérer »
• Aucune persistance locale de données sensibles

La sécurité du frontend est alignée sur l'API, en gardant des responsabilités séparées.

Architecture et stack technique

• Framework : Vue 3
• Build tool : Vite
• Routage : Vue Router
• UI : Vuetify
• Graphiques : ECharts (via vue-echarts)
• HTTP : Axios
• Mobile : Capacitor (configuration de base incluse)

Android / Mobile

• Configuration de Capacitor incluse
• Dépendances installées
• Aucune plateforme native générée pour le moment (Android/iOS)

Il existe un commit spécifique où Capacitor est ajouté pour une future app Android.

Déploiement et état

• Application déployée sur Vercel
• Build standard vite build avec sortie dist
• Environnements différenciés via .env

🔗 Démo en production

🔗 Dépôt GitHub (frontend)

Ce que démontre ce projet

Ce projet démontre ma capacité à :

• Concevoir des frontends orientés données réelles
• Réutiliser des composants de manière cohérente
• Intégrer une visualisation avancée des données
• Consommer des APIs complexes sans transférer la logique au client
• Penser au déploiement web et mobile dès la conception
• Construire des logiciels en production, pas des démos

Images du projet