Bob — Cabarrus Melane ← retour aux projets
étude de cas · Noera live · vendu

Noera, l'élégance à portée de main.

Site marchand pour une créatrice de sacs au crochet — conçu, développé, déployé et maintenu seul, de bout en bout.

Stack React 18 Vite Tailwind Framer Motion Supabase Stripe Resend Vercel

01 — Le briefNe pas faire un Shopify de plus.

Jessica Fontaine est créatrice de sacs au crochet en Île-de-France, en micro-entreprise sous le nom commercial Noera. Trois pièces fondatrices : Éclat 18 (structure affirmée), Nova 12 (touche contemporaine), Aora 8 (compact, identité forte). Le chiffre indique le nombre de mailles de la chaînette de départ — un détail métier que seules les artisanes du crochet remarquent, mais qui pose immédiatement le sérieux.

Le brief tenait en une phrase : un site marchand qui matche l'âme du produit. Pas un template e-commerce générique, pas un Shopify gris-bleu interchangeable. Une boutique qui ressemble à l'objet : artisanat lent, élégance feutrée, palette terre et lin.

02 — Les contraintesCliente seule, catalogue minuscule, délai court.

03 — Stack & arbitragesPourquoi ces outils.

React + Vite (pas Next.js)

Pas de SSR critique pour 3 produits. Vite donne une DX immédiate, builds en 8 secondes, hot reload instantané. Next aurait été overkill et alourdi le bundle inutilement.

Supabase (pas Firebase)

PostgreSQL avec RLS (Row Level Security) strict pour chaque table — commandes, clients, sessions. Si Noera grandit, on exporte la base sans dépendance propriétaire. Firebase aurait été plus rapide à démarrer mais lock-in plus fort.

Stripe Checkout (pas Stripe Elements)

Décision technique

Stripe Checkout = page hébergée par Stripe, sécurité PCI déléguée, Apple Pay et Klarna inclus de série. Stripe Elements = formulaire dans la page, plus de contrôle visuel mais 2 jours de dev en plus. Sur un projet à une cliente, le gain UX d'Elements est nul. Choix Checkout, dev économisé : 2 jours.

Resend pour les mails transactionnels

Templates HTML simples, deliverability propre (DKIM, SPF), 3000 mails/mois en gratuit. Suffit largement pour un volume artisanal.

04 — Le livréCe qui tourne vraiment.

05 — ApprentissagesCe que je referais. Ce que je changerais.

Stripe Checkout sur petits volumes : à reprendre. Le compromis "moins de contrôle visuel pour 0 friction PCI + Apple Pay/Klarna gratuit" est imbattable quand on est seul.

RLS à écrire AVANT le front. J'ai commencé par les composants React et écrit les policies Supabase plus tard. Erreur. La RLS dicte la forme des requêtes, donc la forme des hooks, donc la forme des composants. Inverser la séquence aurait économisé un refactor.

Trois familles serif/sans = trois fonts. Cormorant + Playfair + Inter, plus le code pour la nav. Sans font-display: swap et préchargement WOFF2 du LCP, c'est un FOUC (Flash Of Unstyled Content) garanti. Ça a coûté quelques itérations.

06 — PostureConception et développement, signés.

Jessica fait les sacs. Je fais le site. La signature en bas de page le dit clairement — pas de marque blanche.

Cette transparence crédibilise les deux côtés : Jessica reste l'artisane, et la prestation tech est revendiquée. C'est un mode de collaboration que je préfère sur des projets à une-seule-cliente : pas de dilution, pas de prétention non plus.

Visiter noera.fr Le site, en production réelle, avec ses vrais produits et son vrai checkout.