Étape 24 — Checklist finale et déploiement

Objectifs

Vérifier que toutes les fonctionnalités du Pokédex sont opérationnelles
Corriger les derniers bugs et problèmes de responsive
Rédiger un README.md pour le projet
Déployer l'application sur Vercel ou GitHub Pages
Se préparer à l'oral avec les questions des séquences 1 à 8

1. Checklist d'auto-évaluation

Parcourez cette checklist complète. Chaque point doit être coché avant de considérer le projet comme terminé.

Fonctionnalités

La page d'accueil affiche tous les Pokémon dans une grille responsive
La recherche par nom filtre les Pokémon en temps réel
Le filtre par type fonctionne avec un v-select
La page détail affiche l'image, le nom, le niveau, la description, les types et les stats
Le bouton retour fonctionne sur la page détail
Les favoris s'ajoutent/retirent avec un clic sur le coeur
La page favoris affiche uniquement les Pokémon favoris
Les favoris persistent après rechargement (localStorage)
La page « À propos » est accessible
L'ajout d'un Pokémon fonctionne (formulaire + API POST)
La suppression d'un Pokémon fonctionne (si authentification implémentée)

La barre de navigation est présente sur toutes les pages
Sur mobile : le menu hamburger ouvre le tiroir de navigation
Sur desktop : les boutons de navigation sont visibles
Les cartes s'adaptent : 1 colonne (mobile), 2 (tablette), 3-4 (desktop)
Aucun contenu ne déborde sur petit écran

Qualité du code

0 erreurs dans la console du navigateur
0 warnings dans la console du navigateur
Pas de console.log oublié dans le code (sauf ceux voulus)
Les composants sont réutilisables (PokemonCard, PokemonTypesChips, PokemonStats)
Les props sont typées avec defineProps
Le store Pinia centralise les données et les actions
Les appels API passent par le store (pas de fetch dans les composants)
Les variables et fonctions sont nommées en anglais
Les commentaires expliquent le « pourquoi », pas le « quoi »

UX et polish

Le thème personnalisé est appliqué (couleurs Pokémon)
Un skeleton loader s'affiche pendant le chargement
Un snackbar confirme les actions (favori, suppression)
Les messages d'erreur sont clairs pour l'utilisateur
Le favicon et le titre de l'onglet sont personnalisés

2. Rédiger le README.md

Créez un fichier README.md à la racine de votre projet. Un bon README est la carte de visite de votre projet : c'est la première chose qu'un recruteur ou un enseignant voit sur GitHub.

Voici un template complet à adapter :

markdown

# Pokédex

Application web de gestion de Pokémon construite avec Vue.js 3 et Vuetify 3.
Projet réalisé dans le cadre du cours 141 — Développement web avec framework.

## Description

Le Pokédex permet de parcourir une collection de Pokémon, de rechercher
et filtrer par type, de consulter les détails de chaque Pokémon (stats,
types, description) et de gérer une liste de favoris persistante.

## Fonctionnalités

- Affichage des Pokémon dans une grille responsive
- Recherche par nom en temps réel
- Filtrage par type
- Page détail avec statistiques et types
- Gestion des favoris (localStorage)
- Ajout et suppression de Pokémon (API REST)
- Navigation responsive (drawer mobile)
- Thème sombre personnalisé

## Installation

```bash
git clone <url-du-repo>
cd pokedex
npm install
npm run dev

API utilisée

L'application communique avec une API REST locale.

Base URL : http://localhost:3535

Endpoints principaux :

Méthode	Endpoint	Description
GET	`/pokemons`	Liste tous les Pokémon
GET	`/pokemons/:id`	Détail d'un Pokémon
POST	`/pokemons`	Ajouter un Pokémon
DELETE	`/pokemons/:id`	Supprimer un Pokémon

bash

cd api
npm install
npm run dev

Technologies

Vue.js 3 — Framework JavaScript
Vuetify 3 — Bibliothèque de composants Material Design
Pinia — State management
Vue Router — Routage côté client
Axios — Requêtes HTTP

Captures d'écran

![Page d'accueil](./screenshots/home.png)![Page détail](./screenshots/detail.png)![Favoris](./screenshots/favorites.png)

Utilisation de l'IA

Outil(s) utilisé(s) : ChatGPT / Copilot / Claude / Aucun
Utilisation : génération de code / débogage / aucune


::: tip Captures d'écran
Créez un dossier `screenshots/` à la racine du projet et ajoutez-y 2-3 captures PNG de votre application. Des captures propres donnent une bien meilleure impression que pas de captures du tout.
:::

## 3. Déploiement

### Option A — Vercel (recommandé)

1. Créez un compte sur [vercel.com](https://vercel.com)
2. Connectez votre dépôt GitHub
3. Vercel détecte automatiquement le framework (Vite)
4. Cliquez sur **Deploy**

::: warning API en production
Le déploiement ne concerne que le frontend. L'API (`localhost:3535`) ne sera pas accessible en production. Pour un vrai déploiement, il faudrait héberger l'API séparément et adapter les URL dans le code.
:::

### Option B — GitHub Pages

1. Dans `vite.config.js`, ajoutez le `base` correspondant au nom du repo :
```js
export default defineConfig({
  base: '/nom-du-repo/',
  // ... reste de la config
})

Ajoutez le script de build dans package.json :

json

{
  "scripts": {
    "deploy": "npm run build && npx gh-pages -d dist"
  }
}

Installez gh-pages et déployez :

bash

npm install -D gh-pages
npm run deploy

Option C — Build local

Si vous ne déployez pas en ligne, faites au minimum un build de production pour vérifier qu'il n'y a pas d'erreurs :

bash

npm run build
npm run preview

Vérifiez que l'application fonctionne correctement en mode preview.

4. Préparation de la démo orale

Structurer sa démo (2-3 minutes)

Votre démo doit raconter une histoire utilisateur. Ne montrez pas les fonctionnalités dans le désordre — guidez le jury à travers un parcours logique.

Script de démo suggéré :

Introduction (15 sec) : « Voici mon Pokédex, une application web construite avec Vue.js et Vuetify. »
Page d'accueil (30 sec) : « La page d'accueil affiche tous les Pokémon dans une grille responsive. Je peux rechercher un Pokémon par nom... » (tapez un nom) « ...et filtrer par type. » (sélectionnez un type)
Page détail (30 sec) : « En cliquant sur un Pokémon, j'accède à sa fiche détaillée avec ses statistiques, ses types et sa description. »
Favoris (30 sec) : « Je peux ajouter un Pokémon à mes favoris en cliquant sur le coeur. Les favoris sont persistés dans le localStorage — si je recharge la page, ils sont toujours là. »
Responsive (15 sec) : (réduisez la fenêtre) « L'application est responsive : sur mobile, la navigation passe en drawer. »
Conclusion (15 sec) : « Si j'avais eu plus de temps, j'aurais ajouté... » (voir ci-dessous)

Lister les améliorations possibles

Le jury apprécie que vous ayez du recul sur votre travail. Préparez 2-3 améliorations que vous auriez aimé implémenter :

Pagination ou scroll infini pour gérer un grand nombre de Pokémon
Mode hors-ligne avec un Service Worker (PWA)
Comparateur de Pokémon pour afficher deux fiches côte à côte

Attitude professionnelle

Saluez le jury en arrivant et remerciez en partant
Contact visuel : ne fixez pas votre écran, alternez entre l'écran et le jury
Posture : tenez-vous droit, parlez clairement et pas trop vite
Honnêteté : si vous ne savez pas répondre à une question, dites « Je ne suis pas certain, mais je pense que... » plutôt que d'inventer
Préparez votre environnement : ouvrez l'application ET le code avant que le jury arrive, vérifiez que tout fonctionne

5. Questions par séquence

Révisez les concepts clés de chaque séquence. Vous devez pouvoir expliquer chaque notion dans vos propres mots.

Séquence 1 — Setup et premiers composants

Qu'est-ce qu'un SFC (Single File Component) ?
Quelle est la différence entre ref() et reactive() ?
À quoi sert onMounted() ?
Qu'est-ce que la réactivité dans Vue.js ?

Séquence 2 — Composants et props

Comment passer des données d'un parent à un enfant ?
Qu'est-ce que defineProps() et pourquoi typer les props ?
Quelle est la différence entre :prop (v-bind) et prop (statique) ?
Pourquoi découper l'interface en composants ?

Séquence 3 — Événements et formulaires

Comment un enfant communique-t-il avec son parent ?
Qu'est-ce que defineEmits() ?
Comment fonctionne v-model sur un input ?
Qu'est-ce que le binding bidirectionnel ?

Séquence 4 — Routage

Qu'est-ce que le routage côté client (SPA) ?
Quelle est la différence entre <router-link> et <a href> ?
Comment fonctionne une route dynamique (/pokemon/:id) ?
Comment accéder aux paramètres de route dans un composant ?

Séquence 5 — Pinia (state management)

Pourquoi utiliser un store plutôt que des props/emits ?
Quelles sont les trois parties d'un store Pinia (state, getters, actions) ?
Qu'est-ce qu'un getter et à quoi ça sert ?
Comment persister des données avec localStorage ?

Séquence 6 — API et CRUD

Qu'est-ce qu'une API REST ?
Quelle est la différence entre GET, POST, PUT et DELETE ?
Pourquoi utiliser try/catch avec les appels API ?
Qu'est-ce qu'une requête asynchrone (async/await) ?

Séquence 7 — Authentification

Qu'est-ce qu'un token JWT ?
Comment stocker et envoyer un token avec les requêtes ?
Qu'est-ce qu'un guard de navigation (route guard) ?
Pourquoi protéger certaines routes ?

Séquence 8 — UX, responsive et polish

Comment fonctionne le système de grille 12 colonnes de Vuetify ?
Qu'est-ce qu'un breakpoint et quels sont ceux de Vuetify (xs, sm, md, lg, xl) ?
Comment rendre une navigation responsive (drawer + hamburger) ?
Qu'est-ce qu'un thème Vuetify et comment le personnaliser ?
Qu'est-ce qu'un composant réutilisable et pourquoi c'est important ?

6. Bonus — Images alt et fallback

Bonnes pratiques pour les images

Attribut `alt` (accessibilité)

Chaque image doit avoir un attribut alt descriptif. C'est obligatoire pour l'accessibilité (lecteurs d'écran) et c'est affiché si l'image ne charge pas.

vue

<v-img
  :src="pokemon.image"
  :alt="`Image de ${pokemon.name}`"
  height="200"
/>

Image de fallback

Si l'API ne renvoie pas d'image ou si l'URL est cassée, affichez une image par défaut :

vue

<v-img
  :src="pokemon.image || '/fallback-pokemon.png'"
  :alt="`Image de ${pokemon.name}`"
  height="200"
>
  <template #error>
    <v-img src="/fallback-pokemon.png" height="200" />
  </template>
</v-img>

Placez l'image fallback-pokemon.png dans le dossier public/ de votre projet.

7. Bonus — Animations CSS

Ajouter des animations simples

Transition au survol

Ajoutez un effet de survol sur les cartes Pokémon avec transition :

css

.pokemon-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pokemon-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

Animation heartbeat sur le bouton favori

Créez une animation @keyframes pour animer le coeur quand on ajoute un favori :

css

@keyframes heartbeat {
  0% { transform: scale(1); }
  25% { transform: scale(1.3); }
  50% { transform: scale(1); }
  75% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.favorite-btn.is-active {
  animation: heartbeat 0.6s ease-in-out;
  color: red;
}

vue

<v-btn
  icon
  :class="['favorite-btn', { 'is-active': isFavorite }]"
  @click="toggleFavorite"
>
  <v-icon>{{ isFavorite ? 'mdi-heart' : 'mdi-heart-outline' }}</v-icon>
</v-btn>

Transition d'entrée des cartes

Animez l'apparition des cartes au chargement :

css

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pokemon-card {
  animation: fadeInUp 0.4s ease-out;
}

Tests finaux

L'application se lance sans erreur (npm run dev)
Le build de production réussit (npm run build)
Toutes les fonctionnalités de la checklist sont cochées
Le README.md est rédigé et à jour
Le code est commité et poussé sur GitHub
Vous pouvez expliquer chaque concept des séquences 1 à 8

Commit final

bash

git add -A
git commit -m "docs: README et préparation déploiement"

Étape 24 — Checklist finale et déploiement ​

Objectifs ​

1. Checklist d'auto-évaluation ​

Fonctionnalités ​

Navigation et responsive ​

Qualité du code ​

UX et polish ​

2. Rédiger le README.md ​

API utilisée ​

Technologies ​

Captures d'écran ​

Utilisation de l'IA ​

Option C — Build local ​

4. Préparation de la démo orale ​

Structurer sa démo (2-3 minutes) ​

Lister les améliorations possibles ​

Attitude professionnelle ​

5. Questions par séquence ​

Séquence 1 — Setup et premiers composants ​

Séquence 2 — Composants et props ​

Séquence 3 — Événements et formulaires ​

Séquence 4 — Routage ​

Séquence 5 — Pinia (state management) ​

Séquence 6 — API et CRUD ​

Séquence 7 — Authentification ​

Séquence 8 — UX, responsive et polish ​

6. Bonus — Images alt et fallback ​

Attribut alt (accessibilité) ​

Image de fallback ​

7. Bonus — Animations CSS ​

Transition au survol ​

Animation heartbeat sur le bouton favori ​

Transition d'entrée des cartes ​

Tests finaux ​

Étape 24 — Checklist finale et déploiement

Objectifs

1. Checklist d'auto-évaluation

Fonctionnalités

Navigation et responsive

Qualité du code

UX et polish

2. Rédiger le README.md

API utilisée

Technologies

Captures d'écran

Utilisation de l'IA

Option C — Build local

4. Préparation de la démo orale

Structurer sa démo (2-3 minutes)

Lister les améliorations possibles

Attitude professionnelle

5. Questions par séquence

Séquence 1 — Setup et premiers composants

Séquence 2 — Composants et props

Séquence 3 — Événements et formulaires

Séquence 4 — Routage

Séquence 5 — Pinia (state management)

Séquence 6 — API et CRUD

Séquence 7 — Authentification

Séquence 8 — UX, responsive et polish

6. Bonus — Images alt et fallback

Attribut `alt` (accessibilité)

Image de fallback

7. Bonus — Animations CSS

Transition au survol

Animation heartbeat sur le bouton favori

Transition d'entrée des cartes

Tests finaux