Deayus Shop

Contexte

Deayus Shop est une plateforme e-commerce moderne développée avec Next.js.

Le projet vise à construire un véritable socle e-commerce évolutif plutôt qu’une simple page présentant quelques produits.

Objectif

Les objectifs principaux sont :

• construire un catalogue de produits ;
• organiser les produits par catégories ;
• créer des fiches produit ;
• gérer un panier ;
• préparer la gestion des commandes ;
• intégrer une authentification ;
• préparer les paiements en ligne ;
• construire une administration du catalogue.

Fonctionnalités

Les fonctionnalités prévues comprennent :

• catalogue de produits ;
• catégories ;
• fiches produit ;
• recherche et filtrage ;
• panier ;
• authentification ;
• commandes ;
• paiement ;
• gestion du stock ;
• espace d’administration.

Architecture

Deayus Shop utilise Next.js avec l’App Router.

Interface

Les composants React sont organisés selon leurs responsabilités :

• composants génériques ;
• composants de layout ;
• composants du catalogue ;
• composants du panier ;
• composants d’administration.

Backend

Les fonctionnalités serveur sont intégrées à Next.js.

Elles doivent gérer :

• la lecture des produits ;
• les commandes ;
• l’authentification ;
• le panier ;
• les paiements ;
• les e-mails transactionnels.

Base de données

PostgreSQL stocke les produits, catégories, utilisateurs, commandes et éléments de commande.

Prisma fournit un accès typé à la base de données.

Stack technique

• Next.js ;
• React ;
• TypeScript ;
• Tailwind CSS ;
• shadcn/ui ;
• Prisma ;
• PostgreSQL ;
• Auth.js ;
• Stripe ;
• Resend ;
• Docker.

Modèle de données

Sécurité

La sécurité doit couvrir plusieurs domaines.

Authentification

Auth.js doit permettre d’identifier les utilisateurs.

Validation des données

Les données reçues côté serveur doivent être validées avant toute écriture dans la base.

Administration

Les actions liées au catalogue, aux commandes et au stock doivent être réservées aux administrateurs.

Paiement

Les montants ne doivent jamais être calculés uniquement côté client.

Le serveur doit recalculer le total d’une commande à partir des prix enregistrés dans la base de données.

Webhooks

Les événements Stripe devront être vérifiés avant de modifier le statut d’une commande.

Problèmes rencontrés

Organisation du projet

Une application e-commerce contient rapidement de nombreux composants et domaines métier.

Gestion du panier

Le panier doit fonctionner pour les utilisateurs connectés et éventuellement pour les visiteurs.

Gestion des prix

Le frontend ne doit jamais être considéré comme une source fiable pour le prix final.

Gestion du stock

Le stock peut changer entre l’ajout au panier et la validation de la commande.

Solutions apportées

Organisation par domaine

Problème

Les composants du catalogue, du panier et de l’administration risquaient d’être mélangés.

Solution

Le projet est structuré par fonctionnalités afin de séparer les responsabilités.

Accès aux données avec Prisma

Problème

La gestion manuelle des requêtes SQL aurait augmenté les risques d’erreur et la duplication.

Solution

Prisma fournit un modèle de données typé et un accès centralisé à PostgreSQL.

Calcul serveur des commandes

Problème

Le prix transmis par le frontend pouvait être modifié.

Solution

Le serveur récupère les prix depuis la base et recalcule le total avant la création du paiement.

Séparation du store et de l’administration

Problème

Les fonctionnalités publiques et administratives avaient des besoins très différents.

Solution

Les routes et composants sont séparés entre l’espace boutique et l’espace d’administration.

Valeur apportée

Deayus Shop propose une architecture e-commerce moderne orientée performance, évolutivité et expérience utilisateur.

L'application est conçue pour faciliter la gestion d'un catalogue, des commandes et des comptes utilisateurs tout en offrant une base technique prête à accueillir des fonctionnalités telles que le paiement en ligne, la gestion des stocks ou un back-office d'administration.