Création d'une appli Web pour lister les cadeaux souhaités par Louisa pour Noël ou son anniversaire

Introduction

L'idée première était de centraliser les cadeaux que souhaitait Louisa, afin d'éviter les doublons et ne pas en oublier.

Architecture du module

wishlist
├── ...
├── node_modules
│   ├── Tous les modules Node nécessaires à l'application (express, ...)
├── public
│   ├── styles.css (feuilles de style globales de l'appli)
├── views
│   ├── index.hbs (page principale affichant la liste des cadeaux)
│   ├── offrant.hbs (choix de la personne qui offre le cadeau)
│   ├── presence.hbs (juste une page qui affiche ceux qui seront présents à l'anniv de Loulou)
│   ├── reservation.hbs (saisie des infos complémentaires sur le cadeau -a-t-il été acheté ? Pour quelle occasion ? ...-)
│   ├── votre-vote.hbs (écran résultat suite aux réponses des invités de Louisa pour son anniv')
├── .env (variables globales pour la BDD)
├── donnees.sql (export des données à date)
├── package-lock.json
├── package.json
├── README.md  (le présent fichier)
├── schema.sql (structure de la BDD)
├── wishlist.js  (fichier principal avec le code Node JS)

Installation des dépendances

Exemple de commande :

npm install bcrypt

Description des différents écrans

index

Cet écran permet d'afficher la liste des cadeaux en BDD, et toutes les infos liées à chaque cadeau (s'il est réservé, par qui, le prix du produit, sa photo, ...). Pour chaque cadeau non encore réservé, un bouton permet d'effectuer la réservation.

Accès à l'écran

Page d'accueil du site

Contrôles mis en place

Aucun.

Actions effectuées depuis cet écran

  • Au clic sur le lien hypertexte pour chaque produit, l'utilisateur est redirigé vers une nouvelle page qui présente les infos du produit.
  • Au survol de la vignette, la photo du produit est affichée en plus grand.
  • Au clic sur le bouton "Le réserver", chainage vers la page "offrant"

offrant

Dans cet écran, l'utilisateur sélectionne son nom pour indiquer qu'il souhaite réserver le cadeau.

Accès à l'écran

  • Depuis la liste des cadeaux

Contrôles mis en place

Aucun.

Actions effectuées depuis cet écran

  • L'utilisateur clique sur le bouton qui correspond à son nom.
  • Ensuite, il est redirigé vers la page "reservation".

presence

Ecran qui liste tous ceux qui ont répondu "Présent" pour l'anniversaire de Louisa.

Accès à l'écran

Via l'URL directe à saisir.

Contrôles mis en place

Aucun.

Actions effectuées depuis cet écran

Aucune.


reservation

Ecran dans lequel l'utilisateur (qui a choisi le cadeau et s'est identifié) doit saisir des infos complémentaires :

  • A-t-il déjà acheté le cadeau ?
  • Si pas acheté, qui doit acheter le produit ?
  • Est-ce que l'acheteur a été remboursé ?
  • Pour quelle occasion sera offert le cadeau ? Anniversaire ou Noël ?

Accès à l'écran

Après l'écran de sélection de l'offrant.

Contrôles mis en place

RAS : des cases à cocher obligent l'utilisateur de sélectionner à chaque question une valeur.

Actions effectuées depuis cet écran

  • Un bouton "Retour aux cadeaux" qui permet de revenir à l'accueil
  • Un bouton "Enregistrer" qui enregistre les modifs

votre-vote

Cet écran affiche un retour sur la réponse à l'invitation d'anniversaire de Louisa.

Le principe :

Chaque invité à son anniversaire s'est vu remettre un carton d'invitation avec deux QR codes :

  • un généré à partir du prénom de l'enfant et d'un flag "non présent"
  • un autre généré à partir du prénom de l'enfant et d'un flag "présent"

Suivant le QR Code scanné, le parent verra apparaitre sur son navigateur le prénom de son enfant ainsi que la réponse.

Accès à l'écran

Après scan du QR code, ou via URL directe.

Contrôles mis en place

Aucun.

Actions effectuées depuis cet écran

Aucune.

Description
No description provided
https://louisa.thecoredev.fr
Readme 6.4 MiB
Languages
Handlebars 46.7%
JavaScript 37.3%
CSS 16%