☀️ Projet : "TeoMe" – Météo en temps réel

Lien vers le site :

Document

Technologie : Vue.js 3 + API OpenWeatherMap

🎯 Objectif du projet

Créer une application météo élégante et fonctionnelle permettant aux utilisateurs d'accéder aux conditions météorologiques instantanées de n'importe quelle ville dans le monde. L'accent a été mis sur la simplicité d'utilisation et la rapidité d'affichage des données.

⚙️ Fonctionnalités clés

• Recherche interactive : Barre de recherche permettant de cibler des villes précises.
• Données en temps réel : Affichage de la température, de l'humidité, de la vitesse du vent et de l'icône météorologique correspondante.
• Dynamisme : Mise à jour automatique de l'interface en fonction des données reçues via l'API.

🛠️ Stack Technique

• Frontend : Vue.js 3.
• Intégration API : OpenWeatherMap API (fetch des données météo via requêtes asynchrones).
• Gestion des états : Utilisation des ref et computed de Vue pour une interface réactive.
• Design : CSS personnalisé pour une interface épurée et lisible (Responsive Design).

🧠 Défis rencontrés & Apprentissages

• Gestion des API : Apprendre à gérer les clés API, les requêtes GET et surtout le traitement des erreurs (que faire si la ville n'est pas trouvée ou si l'API ne répond pas ?).
• Formatage des données : Conversion des données brutes reçues de l'API (ex: unités de température, timestamps) pour les rendre lisibles pour l'utilisateur final.
• Expérience utilisateur (UX) : Mise en place d'un chargement fluide (loading spinner) pendant que l'API traite la requête.

🚀 Améliorations futures

• Ajout d'une prévision sur 5 jours pour enrichir les informations fournies.
• Utilisation de la géolocalisation automatique du navigateur pour afficher la météo locale dès l'ouverture du site.