Retour aux projets
Livraison client

Shohraty

Plateforme de commerce et de CMS trilingue, pensée d'abord pour l'arabe et le RTL, pour une agence marketing algérienne : un site public, un back-office d'administration et un moteur de schémas de formulaires versionnés, en ligne sur l'infrastructure du client.

En ligneEn ligne, dépôt privéCMS et plateforme de commerce trilingues / Mars - sept. 2026

Problème

L'agence devait gérer elle-même son contenu, son catalogue de services, ses formulaires de demande, ses offres d'emploi et sa boutique sans développeur dans la boucle — en trois langues, sous le droit algérien de la protection des données, et sur une infrastructure qu'elle possède plutôt qu'elle ne loue à l'étranger.

Solution

Une API NestJS avec des surfaces publique et d'administration séparées sur un seul schéma Prisma, un back-office Refine pour le personnel et un site public Next.js. Les formulaires de demande de service sont composés par les administrateurs puis figés en versions de schéma immuables : un formulaire peut donc évoluer sans invalider les demandes déjà répondues avec l'ancienne forme.

Fonctionnalités clés

Formulaires de demande de service composés par les administrateurs : étapes et champs définis en AR/FR/EN, figés en ServiceFormVersion immuable, et affichés dans un assistant multi-étapes que le frontend ne code jamais en dur
Chaque soumission enregistre la version du schéma à laquelle elle a répondu, si bien que modifier un formulaire n'orpheline jamais les demandes déjà collectées avec l'ancien
Synchronisation Google Sheets avec statut par ligne, nombre de tentatives et reprise avec temporisation ; un changement de forme des colonnes crée une nouvelle version et son propre onglet service-vN
Deux surfaces d'API sur un seul schéma : ouverte et limitée sur /api/public/*, cookie JWT plus CSRF sur /api/admin/*
L'arabe comme langue par défaut et le RTL comme cas de base, avec une chaîne de repli tenant compte de la langue quand une traduction manque
La localisation algérienne comme contrainte, pas comme traduction : prix en DZD, données de wilayas et de communes, validation des numéros locaux, moyens de paiement CCP et BaridiMob
Consentement aux cookies conforme à la loi algérienne 18-07, les pixels d'analyse et publicitaires ne se chargeant via GTM qu'après acceptation de la catégorie correspondante
Passe de durcissement avant le lancement : délais d'expiration des requêtes, barrière d'erreur globale, revalidation à la demande, optimisation des images et noms accessibles sur chaque contrôle réduit à une icône

Rôle

Ingénieur principal sur les trois dépôts, du modèle de données au déploiement sur le VPS du client. J'ai travaillé avec l'équipe de l'agence pendant le premier mois ; à partir de juin, j'ai travaillé seul. Conçu pour Nightbyte ; les dépôts sont privés.

Stack

Next.js 16React 19TypeScriptnext-intlNestJS 11Prisma 7PostgreSQLRefineTipTapTailwind CSSJWT + CSRFGoogle Sheets APISharpJestnginx

Liens

shohraty.dz

Carte du système

3 dépôts / 1 schéma
Site publicNext 16 · AR/FR/EN · RTL16 k lignes · 234 commitsBack-officeRefine · TipTap · Vite18 k lignes · 145 commits/api/public/*ouvert · limité/api/admin/*JWT cookie + CSRFNestJS 1121 modules147 endpoints48 fichiers de testPostgreSQLPrisma 7 · 30 modelsServiceFormVersionschéma immuableétapes → champs · AR/FR/ENSheetsun onglet parservice-vNlitécritassistant en 8 étapesrepriseDÉPLOYÉshohraty.dz · VPS du client · nginx · v1.0.0MESURÉ LE 4 SEPT. 2026TTFB 87 ms · FCP 568 ms · LCP 1,02 s · 63 Ko
Deux applications clientes, deux surfaces d'API, un seul schéma. Le chemin violet est la partie à interroger : un administrateur compose un formulaire, le backend le fige en version immuable, l'assistant public affiche cette version, et chaque soumission est estampillée de la version à laquelle elle a répondu avant qu'une tâche avec reprises ne la recopie dans un onglet de tableur propre à cette version.

Captures d'écran : Shohraty

7 vues
La page d'accueil arabe en ligne. L'arabe est la langue par défaut et toute la mise en page est de droite à gauche, pas un miroir ajouté après coup.
La même page en anglais. La direction, l'ordre de la navigation et la suite des cartes s'inversent à partir d'un seul arbre de contenu — la paire est la preuve la plus claire que le travail RTL est réel.
Étape 3 sur 8 de l'assistant de demande de service. Aucun de ces champs n'est dans le code du frontend : un administrateur les a composés en trois langues et le backend a figé cette définition en version de formulaire immuable.
L'assistant affiche ce que la version courante du schéma définit, y compris le nombre d'étapes. L'indicateur de progression est généré, pas codé en dur.
Les services sont des enregistrements du CMS, pas des routes. Chacun porte ses propres traductions, sa FAQ, ses phases de travail et son formulaire de demande.
Le consentement repose sur la loi algérienne 18-07, avec adhésion par catégorie. Les pixels d'analyse et publicitaires ne se déclenchent via GTM qu'une fois la catégorie correspondante acceptée.
La page d'accueil arabe à 390 px. Le RTL doit tenir à chaque point de rupture, pas seulement sur ordinateur.