Le site étudiant

Pages publiques

Chaque page se trouve sous un préfixe de langue, /en ou /ar, et les pages arabes s'affichent de droite à gauche. Ouvrir / envoie le visiteur vers /en.

Toute autre adresse affiche la page 404 du site. Sans API, le catalogue, les formateurs et le blog proviennent des données d'exemple intégrées : voir Données d'exemple dans les frontends.

Le tableau de bord de l'apprenant

Un étudiant connecté dispose d'un tableau de bord sous /en/dashboard. S'il n'est pas connecté, toute adresse du tableau de bord l'envoie vers la connexion, puis le ramène à la page demandée.

• Les notifications s'ouvrent depuis la cloche dans l'en-tête du tableau de bord : un nouveau certificat, par exemple.
• La recherche dans l'en-tête du tableau de bord trouve les cours de l'étudiant, le catalogue, les formateurs, les catégories et les articles de blog. Elle exige au moins deux caractères.
• Un étudiant ne peut écrire à un formateur qu'au sujet d'un cours auquel il est inscrit.

Le lecteur de cours et la progression des leçons

• Le lecteur s'ouvre sur la dernière leçon regardée par l'étudiant. Après une nouvelle inscription, il commence à la première leçon.
• Une leçon est considérée comme terminée quand sa vidéo se termine ou quand l'étudiant clique sur Mark as Complete. La progression est enregistrée sur l'API : elle survit donc à un rechargement et à un changement d'appareil.
• Chaque leçon comporte une présentation, le formateur, des ressources téléchargeables et un onglet privé Notes. Les notes s'enregistrent automatiquement pendant la saisie.
• Le lecteur vidéo mémorise le volume, les sous-titres et la vitesse de lecture dans le navigateur, et dispose de raccourcis clavier.
• Une fois toutes les leçons terminées, l'en-tête de la page propose le certificat du cours. Un bouton Quizzes y apparaît quand le cours comporte des quiz.
• Rate this course dans l'en-tête de la page ouvre l'avis de l'étudiant : une note de 1 à 5 étoiles et un commentaire facultatif de 2 000 caractères au plus. Une fois envoyé, le bouton devient Your review, d'où l'étudiant peut le modifier ou le supprimer.

Avis sur les cours

Les étudiants donnent leur avis sur les cours qu'ils suivent, et la page du cours montre ces avis à chaque visiteur.

• Seul un étudiant inscrit au cours peut le noter, une fois par cours. Une inscription annulée ne le permet pas.
• Un avis s'affiche sur la page du cours avec le nom et la photo de l'étudiant, du plus récent au plus ancien, avec Show more reviews pour charger la suite. La note moyenne et le nombre d'avis du cours, et ceux de son formateur, sont recalculés après chaque avis et chaque décision de modération.
• Avec le paramètre reviews_require_approval activé, un avis attend avec le statut Awaiting approval jusqu'à ce qu'un modérateur le publie dans l'écran Reviews du tableau de bord admin, et seul son auteur le voit en attendant. Désactivé, comme à la livraison, il apparaît aussitôt.
• Un modérateur peut masquer un avis ; modifier un avis masqué le renvoie en attente d'approbation. Un avis supprimé par un modérateur ne peut plus être modifié ni remplacé.
• Le personnel qui peut voir les avis est notifié de chaque nouvel avis.

Inscription et paiement

Un étudiant est inscrit à un cours en le payant. Le bouton d'achat de la page du cours ouvre un panneau de paiement, et le panier règle plusieurs cours en un seul paiement, avec une commande par cours. Payer exige un compte étudiant : un visiteur non connecté qui clique sur payer est envoyé vers la connexion.

1. 01

   L'étudiant choisit la carte ou PayPal

   Le panneau demande à l'API quels moyens de paiement ce build accepte (GET /api/shop/payment-methods), pour ne jamais en proposer un que le serveur ne sait pas traiter.
2. 02

   L'API encaisse le paiement

   Avec le simulateur intégré, le formulaire de carte ou de PayPal est rempli sur le site et le paiement est réglé immédiatement. Avec Stripe ou PayPal configuré, l'étudiant est envoyé sur la page du prestataire et la commande reste en attente.
3. 03

   L'étudiant revient

   Le prestataire le renvoie vers /<locale>/checkout/success?order=<reference>, ou vers /checkout/cancelled. La page de succès confirme le paiement et attend que la commande soit réglée.
4. 04

   La place est attribuée

   L'inscription n'est créée qu'une fois le paiement confirmé : immédiatement avec le simulateur, sinon par le webhook du prestataire. Un e-mail de reçu suit.

   Résultat attendu: Le cours apparaît dans « My courses ».

• Les cours gratuits (prix 0) affichent Free et No payment needed sur la carte de prix de la page du cours, et leur bouton indique Enroll for free. Le même panneau s'ouvre, sans moyen de paiement ni champs de carte, et son bouton indique aussi Enroll for free. L'API termine la commande sans processeur de paiement : un cours gratuit fonctionne même sans aucune clé de paiement. L'étudiant arrive directement sur la page de succès, le cours est à lui aussitôt, et l'e-mail confirme l'inscription sans reçu.
• L'achat d'un cours que l'étudiant possède déjà est refusé : personne ne paie deux fois.
• Un double clic ou une nouvelle tentative envoie la même clé d'idempotence, et l'API répond avec la première commande au lieu de débiter à nouveau.
• Le panier et la liste des cours enregistrés sont conservés dans le navigateur, pas sur l'API.

• Configuration de Stripe et PayPal

Terminer un cours

Un cours est terminé quand les deux conditions sont remplies :

• Toutes les leçons sont terminées, ce qui porte la progression de l'étudiant à 100 %.
• Tous les quiz obligatoires sont réussis. Seuls les quiz publiés et marqués comme obligatoires comptent. Un cours sans quiz obligatoire est terminé quand ses leçons le sont.

L'API le vérifie chaque fois que l'étudiant termine une leçon ou réussit un quiz. Quand le cours est terminé, elle marque l'inscription comme terminée et délivre le certificat d'elle-même, et l'étudiant est notifié. Le lecteur de cours propose aussi le certificat une fois les leçons terminées, ce qui couvre un cours terminé avant que le certificat ait pu être délivré. Si un quiz obligatoire reste à faire, l'étudiant est informé que le certificat n'est pas encore prêt.

Les certificats sont listés dans « Certificates » du tableau de bord, où l'étudiant peut en imprimer un ou partager son lien. Toute personne à qui l'on présente un certificat peut vérifier son numéro sur /verify-certificate.

Moteurs de recherche et partage

• Adresse du site : définissez NEXT_PUBLIC_SITE_URL avant le build. Les liens canoniques, les cartes de partage, le sitemap et les données structurées l'utilisent tous. Sans valeur, elle se replie sur http://localhost:3030, ce qui rend une mauvaise adresse évidente dès le premier partage.
• Sitemap : /sitemap.xml liste les pages d'accueil, des cours, des formateurs, du blog, à propos, confidentialité et conditions, ainsi que chaque cours publié, chaque profil de formateur et chaque article publié, dans chaque langue et avec ses traductions. Il est construit à chaque requête à partir des mêmes lectures de l'API que les pages : un cours publié dans le tableau de bord admin y apparaît aussitôt. Sans API, les cours et les formateurs viennent des données d'exemple et aucun article n'est listé.
• robots.txt : /robots.txt autorise tout sauf /api/, le tableau de bord et les pages de connexion, et pointe vers le sitemap.
• Titres et cartes de partage : les pages d'accueil, des cours, de cours, des formateurs, de formateur, du blog, d'article, à propos, confidentialité et conditions définissent chacune leur titre et leur description, une adresse canonique et des liens hreflang vers leurs autres langues, via buildPageMetadata dans src/lib/seo/. Les pages de cours, de formateur et d'article ajoutent leur propre image. Le nom du site, la description, l'identifiant Twitter (SITE.twitterHandle) et les couleurs du navigateur (SITE.browserChrome) viennent de src/config/site.ts, et les images de partage par défaut sont src/app/opengraph-image.png et twitter-image.png.
• Données structurées : le layout racine écrit l'organisation en JSON-LD dans chaque page.

• Paramètres des frontends

Où modifier les choses

Tout se trouve dans frontend/src/. Lancez le site avec yarn dev et ouvrez le port 3030 ; chaque modification recharge la page.

yarn dev

yarn typecheck et yarn lint vérifient vos modifications ; yarn build produit le build de production.

Comment les certificats sont délivrés et vérifiés

Les cours en direct dans le site

Comment s'articule le code du site