Web · E-commerce2024electrosky.ma

Electro Sky

Plateforme e-commerce full-stack pour un magasin d'électronique à Rabat — click-and-collect, tableau admin en temps réel, gestion des stocks et analytics avancés.

Rôles utilisateur

15+

Tables de BDD

20+

Endpoints API

Live

Socket.io

Contexte

Electro Sky est un magasin d'électronique physique situé à Rabat. Le projet consistait à construire une plateforme e-commerce complète avec un modèle click-and-collect — les clients commandent en ligne et récupèrent leurs achats en magasin en environ 30 minutes.

La plateforme gère tout le cycle de vie d'une commande : de la navigation produit et la gestion du panier jusqu'à la livraison en caisse, avec des mises à jour en temps réel pour le personnel.

Défis techniques

—Synchronisation en temps réel entre la caisse et les commandes client via Socket.io
—Système d'authentification à double facteur (OTP email) pour l'admin
—Gestion multi-rôles avec permissions granulaires par module pour chaque caissier
—Suivi des stocks avec variantes produit (couleur, stockage, etc.) et mouvements historisés
—Déploiement containerisé avec reverse proxy Caddy et SSL automatique sur VPS

Architecture

Customer Store

Next.js 15 · React 19 · TypeScript · Tailwind CSS

Admin Dashboard

Next.js 15 — routes protégées, même application

API Server

Fastify · Node.js 20 · TypeScript

Base de données

PostgreSQL 16 · Prisma ORM · pg_trgm (full-text)

Cache & Sessions

Redis 7 — rotation JWT, panier persistant, rate limiting

Temps réel

Socket.io — tableau des commandes live (orders_room)

CDN Médias

Cloudinary — upload sécurisé, WebP auto, magic byte validation

Resend — OTP, confirmation commandes (noreply@electrosky.ma)

Proxy inverse

Caddy — SSL Let's Encrypt automatique, rate limiting global

Infrastructure

Docker Compose · Ubuntu 24.04 LTS · VPS Contabo (4 vCPU / 8 Go)

Fonctionnalités clés

Commandes en temps réel

Socket.io "orders_room" — les caissiers voient chaque nouvelle commande instantanément sans rechargement. Événements new_order et order_status_changed.

Contrôle d'accès granulaire

3 rôles : Client, Caissier (permissions par module configurables), Admin. Chaque caissier peut être limité à certains modules uniquement.

Dashboard analytique

Revenus par période, graphiques 30 jours (Recharts), top 10 produits, performance des caissiers, inventaire, alertes stock bas.

Sécurité OTP & 2FA

Connexion admin par OTP email. Toute modification de profil (email, téléphone, mot de passe) déclenche une confirmation OTP. Historique des mots de passe.

Gestion des stocks

Suivi par produit et variante, historique des mouvements (ADD/REMOVE), gestion des fournisseurs, alertes de seuil bas.

Recherche full-text + audit

Extension PostgreSQL pg_trgm. Chaque recherche utilisateur est journalisée (SearchLog) pour analytics futures. Journal d'activité complet (ActionLog).

Aperçu

Electrosky — Suivir tous les activités sur site

Stack technique

Frontend

Next.js 15React 19TypeScriptTailwind CSSTanStack QueryZustandRecharts

Backend

FastifyNode.js 20TypeScriptZodSocket.ioJWTOTP

Database

PostgreSQL 16Prisma ORMRedis 7pg_trgm

DevOps

Docker ComposeCaddyUbuntu VPSCloudinaryResendTipTap

Un projet similaire en tête ?

Parlons de votre vision et construisons ensemble votre prochaine plateforme digitale.

Démarrer un projet