Aller au contenu
Dimitri Robiere PerrietD. R. PerrietCaen, FR — --:--:--FR · EN

Boutique en ligne headless avec Strapi et React

○ Archivé
Client
MyDigitalSchool
Rôle
Développeur full-stack
Durée
4 semaines
Année
2025
Stack
Strapi · TypeScript · React · Vite · Tailwind CSS
Boutique en ligne headless avec Strapi et React — illustration
Fig. 01 — Boutique en ligne headless avec Strapi et React, illustration
(00) — En bref

Exercice sur les CMS headless : back-end e-commerce sous Strapi (articles, vendeurs, permissions) et front React TypeScript, livrés avec leur documentation.

(01)

Contexte

Ce projet est un exercice autour des CMS headless : monter le back-end d’une petite boutique avec Strapi, puis un front qui consomme son API REST. Le livrable comprenait aussi une documentation complète.

Le périmètre reste volontairement limité : des utilisateurs, des articles et les règles qui lient les deux.

(02)

Challenge

La difficulté principale tenait aux droits. Un visiteur ne doit que lire le catalogue, alors qu’un utilisateur connecté peut créer des articles et ne modifier ou supprimer que les siens.

Il fallait aussi que le projet soit reproductible : quelqu’un qui clone le dépôt doit pouvoir le lancer et disposer de données de test sans configuration manuelle dans l’interface d’administration.

(03)

Approche

J’ai défini les modèles Utilisateur et Article (prix, stock, catégorie en énumération, image, slug généré depuis le titre, relation au vendeur) et exposé les routes REST avec pagination, filtres, recherche et tri. Au démarrage, un script configure les permissions des rôles public et authentifié et crée des utilisateurs et articles d’exemple.

Le front est une application React et TypeScript sous Vite, stylée avec Tailwind CSS, avec authentification et routes protégées. J’ai rédigé la documentation des deux côtés : schéma de données, routes consommées, structure du projet et manuel d’installation.

(04) — Résultats

Chiffres clés
2
dépôts : back-end et front
2
modèles de données
2
rôles avec permissions distinctes
6
commits
← Projet précédent34 · Suivi de position en temps réel par WebSocket et ReactProjet suivant36MyDigitalHorse, programmation orientée objet en PHP