Travaillons sur la préparation d'un nouveau projet, un site en Responsive Web Design qui regroupera des recettes de cuisine. Ici, il s'agit d'un MVP (minimum viable product), et donc les fonctionnalités à implémenter dans un premier temps sont assez peu nombreuses.

Voici la liste des fonctionnalités attendues sur cette première version :

• En haut de la page :

  • il faut afficher un logo (au clic sur ce logo, on revient sur la page d'accueil)
  • le menu doit permettre de naviguer sur les pages principales : accueil, recettes de saison, entrées, plats, desserts

• Sur la page d'accueil :

  • on doit retrouver un edito (un petit paragraphe susceptible de changer de façon hebdomadaire)
  • on doit trouver un lien vers une recette au hasard. A chaque fois qu'on rafraîchit la page, on affiche une recette différente
  • il faut afficher une liste des 5 recettes les plus récentes
  • il faut afficher une liste des 5 recettes les mieux notées

• Dans le pied de page :

  • on veut afficher des liens vers la page de contact, les mentions légales et vers le formulaire permettant de proposer une recette, ainsi qu'une ligne de texte résumant le principe du site et pouvant être utile au référencement (SEO)

• Sur la page de recette :

  • on doit voir la liste des ingrédients séparée du reste de la recette
  • on doit voir les étapes de la recette identifiée notamment par un numéro

Étant donné qu'on n'a pas encore de back-office, il n'y a pas de rôle particulier pour chaque fonctionnalité, cela sera vu en V2.

Il va falloir préparer un peu le projet en amont, hors de question de démarrer l'intégration sans savoir exactement ce qu'on attend !

On va commencer par créer les wireframes de notre homepage et de la page "recette", ça nous sera très utile pour préparer une structure HTML 👌

⚠️ Pour gérer le responsive, les 3 formats suivants sont attendus : mobile, tablette, et desktop

Il n'est pas nécessaire de créer de wireframe pour les pages présentes dans le menu : recettes de saison, entrées, plats, desserts.

Vous trouverez les wireframes du projet o'Blog ici pour vous rappeler ce qu'on peut attendre d'un tel schéma 💡.

Quelques outils que vous pouvez utiliser :

• Whismical.com
• Diagrams.net (anciennement draw.io)
• Mockflow.com
• Balsamiq.cloud
• Wireframe.cc
• ...

Ensuite, pour préparer notre projet, on va rédiger les user stories 🎉 !

• se baser sur la liste des fonctionnalités pour les rédiger
• s'appuyer sur le fichier d'exemple fourni
• profiter de la fiche récap 💡

Vous pouvez rédiger vos stories dans un fichier markdown, par exemple sous forme d'un tableau 👍