https://github.com/hajarwalfi/accuweather
Application météo moderne Vue.js 3 - API temps réel, géolocalisation, graphiques et design responsive avec Tailwind CSS 🌤️
https://github.com/hajarwalfi/accuweather
api css html js rest-api tailwind vuejs weather-api
Last synced: 5 months ago
JSON representation
Application météo moderne Vue.js 3 - API temps réel, géolocalisation, graphiques et design responsive avec Tailwind CSS 🌤️
- Host: GitHub
- URL: https://github.com/hajarwalfi/accuweather
- Owner: hajarwalfi
- Created: 2025-04-17T11:47:22.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-11T15:29:32.000Z (about 1 year ago)
- Last Synced: 2025-07-05T11:42:54.555Z (about 1 year ago)
- Topics: api, css, html, js, rest-api, tailwind, vuejs, weather-api
- Language: Vue
- Homepage:
- Size: 79.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🌤️ AccuWeather Vue App 🌤️
### *Application Météo Moderne & Interactive*
## 🌍 À Propos du Projet
**AccuWeather Vue App** est une application météorologique moderne et intuitive développée avec Vue.js 3, offrant des prévisions météorologiques précises et actualisées. Cette solution digitale combine une interface utilisateur élégante, des fonctionnalités avancées de géolocalisation et une consommation d'API météo optimisée pour une expérience utilisateur exceptionnelle.
Développé avec les dernières technologies frontend, ce projet démontre la maîtrise de Vue.js 3, de l'intégration d'APIs tierces et des bonnes pratiques du développement web moderne.
## ✨ Fonctionnalités Principales
### 🌤️ Météo en Temps Réel
- 🌡️ **Conditions actuelles** - Température, humidité, vitesse du vent
- 📊 **Description détaillée** - État météorologique complet
- 🔄 **Mise à jour automatique** - Données synchronisées régulièrement
- 🎨 **Icônes dynamiques** - Représentation visuelle des conditions
### 🔍 Recherche et Navigation
- 🏙️ **Recherche par ville** - Saisie intuitive et suggestions
- 📍 **Géolocalisation automatique** - Détection position utilisateur
- 🌐 **Recherche globale** - Villes internationales supportées
- ⚡ **Résultats instantanés** - Affichage rapide des données
### 📈 Prévisions Avancées
- ⏰ **Court terme** - Prévisions 3 prochaines heures
- 📅 **Long terme** - Prévisions 7 jours (bonus)
- 📊 **Tendances graphiques** - Visualisation température et précipitations
- 🌙 **Cycle jour/nuit** - Adaptation interface temporelle
### 🎨 Design et UX
- 📱 **Responsive design** - Optimisé mobile, tablette, desktop
- 🌈 **Interface adaptative** - Couleurs selon conditions météo
- 🎯 **Navigation intuitive** - UX fluide et accessible
- 🌍 **Multi-langues** - Support français, anglais (bonus)
## 🛠️ Technologies Utilisées
**Stack Technique :**
- **Frontend :** Vue.js 3 avec Composition API
- **Styling :** Tailwind CSS 4 avec design system
- **Build Tool :** Vite pour développement rapide
- **Routing :** Vue Router 4 pour navigation SPA
- **API :** Intégration météo avec fetch moderne
- **Qualité :** ESLint + Prettier pour code propre
## 🚀 Installation et Configuration
### Prérequis
```bash
# Node.js 18+ requis
node --version
npm --version
```
### Installation
```bash
# Cloner le repository
git clone https://github.com/your-username/accuweather-vue-app.git
# Naviguer dans le dossier
cd accuweather-vue-app
# Installer les dépendances
npm install
# Configurer la clé API météo
cp .env.example .env
# Éditer .env avec votre clé API
```
### Développement
```bash
# Serveur de développement
npm run dev
# Build de production
npm run build
# Prévisualisation build
npm run preview
# Linting et formatage
npm run lint
npm run format
```
## 📖 Structure du Projet
```
accuweather-vue-app/
├── 📁 src/
│ ├── 📁 components/
│ │ ├── WeatherCard.vue # Carte météo principale
│ │ ├── SearchBar.vue # Barre de recherche
│ │ ├── ForecastList.vue # Liste prévisions
│ │ ├── WeatherChart.vue # Graphiques météo
│ │ └── LocationButton.vue # Bouton géolocalisation
│ ├── 📁 views/
│ │ ├── HomeView.vue # Page d'accueil
│ │ ├── CityView.vue # Vue détails ville
│ │ └── SettingsView.vue # Paramètres app
│ ├── 📁 composables/
│ │ ├── useWeatherAPI.js # Hook API météo
│ │ ├── useGeolocation.js # Hook géolocalisation
│ │ └── useLocalStorage.js # Hook stockage local
│ ├── 📁 stores/
│ │ ├── weather.js # Store météo (Pinia)
│ │ └── settings.js # Store paramètres
│ ├── 📁 utils/
│ │ ├── weatherAPI.js # Client API météo
│ │ ├── formatters.js # Formatage données
│ │ └── constants.js # Constantes app
│ ├── 📁 assets/
│ │ ├── icons/ # Icônes météo
│ │ ├── images/ # Images interface
│ │ └── styles/ # Styles Tailwind
│ ├── 📄 App.vue # Composant racine
│ ├── 📄 main.js # Point d'entrée
│ └── 📄 router.js # Configuration routeur
├── 📁 public/
│ ├── weather-icons/ # Icônes météo statiques
│ └── favicon.ico # Favicon app
├── 📄 package.json # Dépendances projet
├── 📄 vite.config.js # Configuration Vite
├── 📄 tailwind.config.js # Configuration Tailwind
├── 📄 .env.example # Variables environnement
└── 📄 README.md # Documentation
```
## 🌤️ Fonctionnalités Détaillées
### 📊 Conditions Météorologiques
- **Température actuelle** - Celsius/Fahrenheit avec ressenti
- **Humidité relative** - Pourcentage avec indicateur confort
- **Vitesse du vent** - km/h avec direction cardinale
- **Pression atmosphérique** - hPa avec tendance
- **Visibilité** - Distance en kilomètres
- **Index UV** - Niveau avec recommandations protection
### ⏰ Prévisions Temporelles
- **Prochaines 3 heures** - Évolution détaillée conditions
- **Prochains 7 jours** - Tendances météo hebdomadaires
- **Lever/coucher soleil** - Heures précises quotidiennes
- **Phases lunaires** - Calendrier lunaire intégré
### 🔍 Recherche et Localisation
- **Recherche intelligente** - Autocomplétion villes
- **Géolocalisation HTML5** - Position automatique précise
- **Historique recherches** - Villes récemment consultées
- **Favoris personnalisés** - Sauvegarde villes préférées
### 📈 Visualisations Avancées
- **Graphiques température** - Courbes 24h avec min/max
- **Graphiques précipitations** - Probabilité et intensité
- **Radar météo** - Cartes interactives (bonus)
- **Animations fluides** - Transitions Vue.js élégantes
## 🌟 Fonctionnalités Bonus
### 🌍 Internationalisation
- **Multi-langues** - Français, anglais, espagnol
- **Unités métriques** - Celsius/Fahrenheit, km/h/mph
- **Formats locaux** - Dates et heures localisées
- **Paramètres persistants** - Préférences sauvegardées
### 📱 Progressive Web App
- **Installation native** - PWA complète
- **Mode hors ligne** - Cache intelligent données
- **Notifications push** - Alertes météo personnalisées
- **Thème adaptatif** - Mode sombre/clair automatique
### 🎨 Personnalisation Avancée
- **Thèmes personnalisés** - Couleurs selon préférences
- **Widgets configurables** - Disposition modulaire
- **Unités préférées** - Système métrique/impérial
- **Alertes météo** - Notifications conditions extrêmes
## ⚡ Performance et Optimisations
### 🚀 Vitesse de Chargement
- **Lazy loading** - Composants chargés à la demande
- **Code splitting** - Bundles optimisés par route
- **Cache intelligent** - Stratégies cache API efficaces
- **Compression assets** - Images et ressources optimisées
### 📱 Compatibilité Multiplateforme
- **Responsive design** - Grilles Tailwind adaptatives
- **Touch gestures** - Interactions tactiles fluides
- **Navigation native** - Comportement platform-specific
- **Performance mobile** - Optimisations spécifiques
### 🛡️ Sécurité et Fiabilité
- **Validation entrées** - Sanitisation données utilisateur
- **Gestion erreurs** - Fallbacks et retry automatiques
- **Rate limiting** - Protection contre spam API
- **HTTPS obligatoire** - Communications sécurisées
## 🔧 Architecture Vue.js 3
### 🎯 Composition API
- **Composables réutilisables** - Logique métier encapsulée
- **Reactive refs** - État réactif optimisé
- **Computed properties** - Données dérivées performantes
- **Watchers intelligents** - Effets de bord contrôlés
### 🗃️ Gestion d'État
- **Pinia store** - État global centralisé
- **Local storage** - Persistance préférences utilisateur
- **Cache API** - Optimisation requêtes réseau
- **État dérivé** - Computed values pour UI
### 📡 Intégration API
- **Fetch moderne** - Requêtes HTTP optimisées
- **Error handling** - Gestion erreurs robuste
- **Loading states** - Indicateurs chargement élégants
- **Retry logic** - Nouvelle tentative automatique
## 📋 Critères de Performance
### ⚡ Performance Technique
- ✅ **Temps de chargement** - < 2s première visite
- ✅ **Actualisation données** - < 500ms réponse API
- ✅ **Fluidité animations** - 60fps garantis
- ✅ **Taille bundle** - < 500KB gzippé
### 🌐 Compatibilité et Accessibilité
- ✅ **Cross-browser** - Chrome, Firefox, Safari, Edge
- ✅ **Mobile-first** - iOS, Android optimisés
- ✅ **Accessibilité WCAG** - Standards respectés
- ✅ **Navigation clavier** - Support complet
### 🔒 Sécurité et Fiabilité
- ✅ **Protection données** - Clés API sécurisées
- ✅ **Validation robuste** - Entrées utilisateur contrôlées
- ✅ **Gestion offline** - Dégradation gracieuse
- ✅ **Error boundaries** - Récupération erreurs UI
## 🎯 Compétences Développées
**Frontend Moderne Vue.js :**
- 🎯 **Vue.js 3 Avancé** - Composition API, réactivité optimisée
- 🎨 **Tailwind CSS 4** - Design system et composants
- ⚡ **Vite Tooling** - Build tools modernes et HMR
- 🗂️ **Vue Router 4** - Navigation SPA sophistiquée
**Intégration APIs et Données :**
- 📡 **Consommation API** - REST avec fetch moderne
- 🗃️ **State Management** - Pinia pour état global
- 💾 **Persistance données** - Local storage et cache
- 📊 **Visualisation** - Graphiques et charts intégrés
**UX/UI et Performance :**
- 📱 **Responsive design** - Mobile-first approach
- 🎨 **Design adaptatif** - Thèmes et personnalisation
- ⚡ **Optimisations** - Bundle size et performance
- 🌍 **Internationalisation** - Support multi-langues