Shoply
- Année
- 2024
- Rôle
- E-commerce · Design & dev
- Stack
- Next.js, TypeScript, TailwindCSS, Drizzle ORM, Turso, Better-Auth, Zustand, next-intl
E-commerce de lampes de poche : catalogue, fiches produit, panier persistant, commande, comptes clients et adresses, en français et en anglais. Refonte complète en 2026 : direction artistique « Faisceau » (la nuit, une seule lumière ambrée), lampes dessinées en SVG, hero où la lampe suit la souris et éclaire le titre, modes éco à turbo sur la fiche produit, comparatif et explorateur de portée. Côté serveur : contrôle du stock dans une transaction et correction de failles d'accès aux adresses. Paiement simulé.
Le contexte
Une boutique de démonstration pour aller au bout d'un vrai parcours e-commerce : catalogue, panier, commande, comptes et adresses, en français et en anglais.
Mon rôle
Seul, puis refonte complète en 2026 (direction « Faisceau »).
Défis techniques
- 01
Un stock toujours juste
La commande vérifie le stock dans une transaction et le décrémente de façon atomique : s'il a bougé entre-temps, toute la commande est annulée.
- 02
L'accès aux adresses
Une faille permettait de modifier ou supprimer l'adresse d'un autre client (IDOR) : chaque requête vérifie maintenant le propriétaire.
- 03
Des lampes dessinées en code
Lampes en SVG paramétriques ; dans le hero, la lampe suit la souris et éclaire le titre à travers un masque.
Extrait de code
// Décrément atomique : échoue (et annule tout) si le stock a bougé entre-tempsconst updated = await tx .update(productTable) .set({ stock: sql`${productTable.stock} - ${quantity}`, updatedAt: new Date() }) .where(and(eq(productTable.id, p.id), gte(productTable.stock, quantity)));if (updated.rowsAffected === 0) throw new ActionError(`OUT_OF_STOCK|${p.name}`);Résultat
En ligne sur shoply-zeta.vercel.app, code public sur GitHub. Paiement simulé.
