AccadiaClient
DigitalovaAgence webAccadia et DigitalovaUne boutique de cours en ligne, du paiement Mollie au back-office
Accadia est notre propre produit : une boutique de cours en ligne. Nous l'avons construite de zéro, du logo au back-office : une plateforme Next.js sur mesure, un catalogue, un panier, le paiement Mollie, un espace élève, une version mobile soignée et un back-office complet. Nous l'hébergeons et la faisons évoluer depuis son lancement.
- Projet
- Produit Digitalova
- Type
- Boutique e-commerce
- Lancement
- Juillet 2026
- Catalogue
- 24 cours en vente
Une boutique en ligne complète, du premier clic à la facture
Vendre un cours en ligne demande bien plus qu'une jolie vitrine. Il faut un catalogue clair, un panier, un paiement sûr, des comptes clients, du contenu réservé à ceux qui l'ont acheté et un outil pour tout piloter.
Nous avons construit chacune de ces briques pour Accadia, sur ordinateur comme sur téléphone. Derrière la vitrine tournent un paiement Mollie, des comptes clients, des factures et un back-office sur mesure que nous exploitons au quotidien.
- cours en vente dans la boutique
- 24
- modules de back-office sur mesure
- 12
- moyens de paiement proposés par Mollie
- 6
- en performance sur PageSpeed, sur ordinateur
- 99/100
Une marque à l'encre et à l'or
Le logo assemble trois symboles d'étude : un cube pour la structure, une toque de diplômé sur le dessus, un livre ouvert sur la face droite. Nous l'avons retracé en vectoriel pour qu'il reste net jusqu'à 16 pixels. La charte associe l'encre, l'or et un fond papier, trois polices et un pictogramme par cours. L'espace élève existe en mode clair et en mode sombre.
- Encre#101A33
- Bleu nuit#1A2747
- Or#E0AB48
- Ambre#C8963E
- Papier#F8F5EE
Un catalogue qui mène au bon produit
Le visiteur arrive avec une idée précise de ce qu'il cherche. Le catalogue propose donc une recherche, des filtres par secteur, puis une fiche par cours qui répond aux questions avant l'achat.
01Une fiche produit complète
Contenu du cours, format de l'épreuve, conditions et prix se lisent avant l'achat, sur une seule page construite comme une fiche de boutique en ligne.
02Un panier pour plusieurs cours
Le client remplit son panier, achète sans créer de compte et finalise son espace après le paiement.
03L'achat toujours à portée
Sur la fiche, une barre garde le prix et le bouton d'achat à l'écran pendant la lecture, sur ordinateur comme sur téléphone.
Une boutique pensée pour le pouce
Une grande partie des achats en ligne se décide sur un téléphone. Nous avons donc dessiné chaque écran d'Accadia pour le mobile : boutons à portée de pouce, menu rapide en bas de l'écran, fiche cours lisible sans zoom et paiement mobile comme Apple Pay.
Une fois le cours acheté, l'élève lit ses chapitres en mode sombre ou clair, et sa progression le suit d'un appareil à l'autre.
Mollie encaisse, le webhook ouvre le cours
Le panier accepte plusieurs cours, et le client peut acheter sans compte : il le finalise après le paiement. Mollie propose les moyens de paiement que les Belges utilisent, de Bancontact à la carte bancaire.
L'accès au cours dépend d'une seule chose : la confirmation de Mollie, reçue par webhook et vérifiée côté serveur. Aucune action dans le navigateur n'ouvre un chapitre payant. Les factures, émises à la demande avec une numérotation continue, se retrouvent dans l'espace élève et dans la comptabilité du back-office.
Étape 1
Le panier
Le serveur relit le prix en base à partir de l'identifiant du cours.
Étape 2
Le paiement
L'API Mollie crée le paiement et renvoie vers sa page sécurisée.
Étape 3
La confirmation
Mollie appelle le webhook. Le serveur relit le statut et le montant auprès de Mollie.
Étape 4
L'accès
Le webhook crée le droit d'accès, une seule fois, même si l'appel se répète.
Étape 5
Le suivi
Page de confirmation, e-mail récapitulatif et facture à la demande.
Moyens de paiement proposés par Mollie
- Bancontact
- Carte bancaire
- Apple Pay
- KBC/CBC
- Belfius
- Pay by Bank
Un espace de révision pensé pour le jour de l'examen
Chaque chapitre suit le même plan : cadre réglementaire, sujets du programme, encadrés « L'essentiel » et « Au jury », puis une fiche de verrouillage. À droite, un panneau rappelle les pièges du chapitre et mène au QCM. La progression suit l'élève d'un appareil à l'autre.
QCM corrigés et examens blancs
Huit questions ferment chaque chapitre, dans le format de l'épreuve. L'élève voit la correction et sa justification dès qu'il valide, et le chapitre passe à 6 bonnes réponses sur 8. L'examen blanc tire ses questions dans tout le cours, sous chronomètre, et ne corrige qu'à la fin.
Aperçus locaux, avec des questionnaires de démonstration.
Des fiches imprimables, protégées par un filigrane
Chaque cours s'imprime en deux documents A4 : le cours complet et des fiches de révision. Le texte est flouté sur ces aperçus. La lecture propose aussi un aperçu en feuilles A4, et chaque impression est journalisée avec l'empreinte du document. Chaque page porte le code de son exemplaire sous six formes, dont un filet en morse et un micro-texte invisible à l'œil nu. Si une page circule, le back-office retrouve le compte qui l'a imprimée.
Un back-office sur mesure pour piloter la boutique
Nous avons construit un back-office propre à Accadia. Il regroupe les cours et leurs chapitres, les commandes et les remboursements, les leads, les avis, le support, les e-mails, la comptabilité, les balises SEO et le suivi des conversions. Le tableau de bord commence par ce qui demande une action.
Ce que mesure le back-office
- La lecture, chapitre par chapitre : part lue, temps actif, sujets parcourus.
- Les ventes, par cours et par métier.
- Les inscriptions et les demandes de support.
- Les impressions : qui a imprimé quel document, et quand.
Douze modules, construits pour cette boutique
Tableau de bord
Chiffres clés et points à traiter
Suivi
Trafic et lecture des élèves
Commandes
Paiements, statuts et remboursements
Inscrits
Comptes et demandes des visiteurs
Comptabilité
Journal des recettes et factures émises
Cours
Catalogue, chapitres et publication
Avis
Notes à relire avant publication
Balises SEO
Titres et descriptions, page par page
E-mails
Journal des envois et message libre
Filigrane
Retrouver le compte d'une page imprimée
Support
Questions posées par les élèves
Notifications
Annonces dans l'espace élève
Trois barrières entre un visiteur et un cours payant
Un chapitre payant ne s'ouvre qu'à son acheteur. Trois contrôles indépendants y veillent : le proxy de Next.js filtre les routes privées avant le rendu, l'application revalide la session et le rôle sur chaque page, et Postgres applique ses règles d'accès ligne par ligne. Une requête envoyée à la base, sans passer par le site, ne lit rien de payant.
Barrière 1 · Proxy Next.js
Filtre les routes /apprendre et /admin avant le rendu.
Barrière 2 · Application
Revalide la session et le rôle sur chaque page et chaque action.
Barrière 3 · Postgres, Row Level Security
La base ne renvoie que les lignes autorisées au compte connecté.
Chapitre payant
- Zod valide chaque formulaire et chaque requête.
- Cloudflare Turnstile protège l'inscription, la connexion et les formulaires.
- Le serveur relit le prix et le montant payé, sans jamais les prendre du navigateur.
- En-têtes CSP, HSTS préchargé et X-Frame-Options.
- Le rôle administrateur ne s'attribue qu'en base, à la main.
Côté conformité, nous avons rédigé les mentions légales, les conditions générales de vente à distance et la politique de confidentialité. Au paiement, le client demande l'accès immédiat et renonce à son délai de rétractation par une case explicite. Les outils de mesure d'audience attendent l'accord du visiteur.
Documents et consentements
- Mentions légales
- CGV de vente à distance
- Politique de confidentialité RGPD
- Consentement cookies
Next.js, Supabase et Mollie, sur Vercel et Cloudflare
Le site tourne sur Next.js 16 et React 19, en TypeScript strict. Supabase fournit la base Postgres, l'authentification et le stockage ; le schéma évolue par migrations SQL versionnées, 49 à ce jour. Vercel sert l'application depuis Paris, derrière Cloudflare. Nous assurons l'hébergement et la maintenance.
Visiteur
Ordinateur ou téléphone
Cloudflare
DNS et protection
Vercel
Next.js 16, région Paris
Supabase
Postgres, Auth, Storage, RLS
Mollie
Paiement et webhook
SMTP
E-mails via Nodemailer
Turnstile
Contrôle antibot
Clarity
Mesure d'audience, après consentement
La stack, brique par brique
- Next.js 16 et React 19
- App Router, Server Components, Server Actions
- TypeScript strict
- Typage de tout le code, sans exception
- Tailwind CSS v4
- Design system déclaré en CSS
- Supabase
- Postgres, authentification, stockage, RLS
- Mollie
- Paiements belges et webhook
- Zod
- Validation de toutes les entrées
- Nodemailer
- E-mails transactionnels
- Cloudflare Turnstile
- Protection antibot
- Microsoft Clarity
- Mesure d'audience, après accord
- Vercel et Cloudflare
- Hébergement, DNS et protection
Sur ordinateur
- 99Performance
- 96Accessibilité
- 96Bonnes pratiques
- 100SEO
- First Contentful Paint
- 0,4 s
- Largest Contentful Paint
- 0,7 s
- Total Blocking Time
- 30 ms
- Cumulative Layout Shift
- 0
- Speed Index
- 1,0 s
Sur mobile, en 4G lente simulée
- 92Performance
- 96Accessibilité
- 96Bonnes pratiques
- 100SEO
