Développe un site e-commerce avec React Router 7 et Stripe

Construis un vrai site e-commerce avec React Router 7, Stripe, Prisma et Tailwind. Prends confiance et prépare-toi à briller en freelance !

23 août 2025

4 min read

Code du cours

Tu as (presque) tout vu : routing avancé, loaders, actions, formulaires type-safe, déploiement Docker, SEO... Il manque encore une pièce au puzzle : mettre tout ça au service d’une vraie application métier. Bienvenue dans le module « On développe un projet React Router 7 » !

Ici, on oublie les petits snippets isolés : tu vas coder un site e-commerce complet, avec gestion de produits, panier, paiement Stripe et e-mails transactionnels. Objectif : en sortie de module, tu auras un repo clonable que tu pourras montrer à un recruteur ou déployer pour un client freelance – sans coller l’étiquette “exercice scolaire”.

Fonctionnalité	Technos & bonnes pratiques
Catalogue + pages produit	`loader()` (côté serveur), cache `Cache-Control`, données structurées Product
Panier persisté	Context + `useFetcher()`, UI optimiste
Paiement sécurisé	Stripe Checkout côté serveur (no secret côté client)
Gestion des commandes	Prisma + relation `Order` ⇆ `OrderItem`
E-mails transactionnels	Resend + templates React
Tableau admin light	Routes protégées + role-based access (`requireUser({ role: "admin" })`)
SEO d’un site e-commerce	Balises meta prix, JSON-LD `Product`, sitemap dynamique
Déploiement production	Docker multi-stage, GitHub Actions, reverse proxy Caddy

Important

Tout ce que tu as appris dans les modules précédents sera réutilisé, amélioré et connecté à une vraie base métier.

React Router 7 pour le full-stack rendering.
Prisma + PostgreSQL pour la base produits / commandes.
Stripe Checkout pour ne pas gérer la carte bleue nous-mêmes.
Tailwind CSS v4 + shadcn/ui pour une UI cohérente sans partir sur du Figma.
Resend pour expédier confirmation de commande et ticket Stripe en 2 lignes.
Zod + Conform pour un tunnel d’achat sans friction : validation instantanée côté client et serveur.
Docker, Caddy, GitHub Actions… mais ça, tu sais déjà faire grâce au module Déploiement 😉

Le squelette est disponible sur GitHub :

Terminal

1git clone https://github.com/Varkoff/shop-router.git
2cd shop-router
3npm install

Organisation principale :

{2,6,9}

1shop-router/
2├── prisma/
3│   └── schema.prisma      # modèles Product, Order, User déjà esquissés
4├── app/
5│   ├── routes/            # pages React Router 7
6│   ├── components/        # UI shadcn + composants maisons
7│   └── server/            # helpers Stripe, Resend, sessions
8└── docker-compose.yml     # stack dev (Postgres + App)

Le projet compile et lance la page par défaut React Router 7. On va l’enrichir bloc par bloc.

Catalogue & pages produit – loaders server-side, route dynamique /product/:slug, JSON-LD Product.
Panier & checkout Stripe – useFetcher() pour l’UI optimiste, session panier en cookie, redirection sécurisée vers Stripe, web-hook de confirmation.
E-mails transactionnels – template React + Resend, envoi après le web-hook, tests en sandbox.
Espace admin mini-ERP – liste des commandes, changement de statut, accès restreint (role === "admin").
SEO & performances – précharge des images LCP, sitemap dynamique, données structurées prix / stock.
Déploiement staging + prod – Build CI, push Docker Hub, déploiement auto sur ton VPS existant.

Tip

Chaque étape fait l’objet d’une leçon courte avec du code prêt à copier, puis d’un challenge « à toi de jouer ». À la fin du module tu auras l’équivalent d’une mini-boutique Shopify self-hostée.

On part from scratch et on construit l'application petit à petit
React Router 7 reste le cœur, mais on y branche Stripe, Prisma, Resend.
On utilisera toujours Tailwind, shadcn/ui pour aller vite côté design.
But final : un site e-commerce pro que tu pourrais déployer chez un client.

Terminal

1# ① Cloner + installer les deps (si pas déjà fait)
2git clone https://github.com/Varkoff/shop-router.git
3cd shop-router
4git checkout 1-initialisation-du-projet
5npm install
6
7# ③ Lancer le projet
8npm run dev