01 · à l'arrivée
contrôlé
une boutique b2b et b2c
abonnements et achats ponctuels, panier persistant, commande perso ou au nom d’une entreprise, paiement stripe et espace client.
poste 06 — clé plate · e-commerce web + mobile
cynastore
la boutique en ligne de cyna, acteur de la cybersécurité pour pme et msp, sujet du projet fil rouge : catalogue, panier, paiement stripe, achats d’entreprise et rgpd. un site next.js qui sert aussi l’api de l’app mobile.
fig. 06.1 — clé plate · cynastore
glisser pour tourner · survoler une pièce
plaques rivetées — rapport d'atelier
sur l'établi
02 · sur le pont
assemblé
next.js sous le capot
next.js 14 avec routes api, prisma et postgresql, nextauth, stripe et tailwind avec daisyui. le projet part du modèle shipfast.
03 · à la sortie
homologué
une api, deux clients
l’app expo et react native consomme la même api : catalogue, panier, facturation entreprise, commandes et réglages rgpd. la boutique et une démo de l’app, aux données fictives, sont en ligne.
polaroids d'atelier — captures
le site et l’app côte à côte
la maquette téléphone est la démo publique, données fictives dans l’app. les autres captures viennent d’un lancement local : douze offres, dix comptes et une entreprise inventés.
côté web
côté mobile
au banc d’essai — ce que fait le code
six fonctions, du catalogue au rgpd
fonction 01
catalogue filtrable
catégories, stock, durée d’abonnement, spécifications techniques, recherche, filtres et tri.
fonction 02
paiement stripe
checkout pour le panier, un article ou une entreprise, webhook et portail client stripe.
fonction 03
entreprises
création, membres avec rôles propriétaire, admin et membre, invitations par e-mail et achats groupés.
fonction 04
rgpd
consentements horodatés, durée de conservation, export des données et suppression du compte.
fonction 05
administration
statistiques, gestion des offres, catégories, carrousel, blocs de contenu, comptes et demandes de contact.
fonction 06
app mobile
expo et react navigation : accueil, boutique, panier, commandes, entreprises, connexion par lien magique. la démo publique tourne en expo web, avec des données fictives.