E3 - Ethos Eclectique Engine

Plateforme de Creative Automation "Code-First" pour la génération automatisée de visuels marketing.

🎯 Concept

Le Problème : Une identité livrée sans outil est une identité morte. Le client casse les designs en voulant bien faire.

La Solution : E3. Une plateforme de Creative Automation "Code-First".

La Promesse :

• Zéro Latence : Rendu instantané (Techno Web)
• Zéro Risque : L'utilisateur remplit des cases, le CSS gère la forme
• 100% Propriétaire : Pas de dépendance API (Canva/Marq)

🏗️ Architecture

Stack Technique

• Frontend : Next.js 14 (App Router) + TypeScript
• Styling : Tailwind CSS + Geist Fonts
• State Management : Zustand (avec persist)
• Backend : Supabase (PostgreSQL + Auth + Storage)
• Export : html-to-image (PNG) + jspdf (PDF)
• Icons : Lucide React

Structure du Projet

/e3-platform
├── /app                    # Next.js Pages (App Router)
│   ├── /dashboard         # Espace Client
│   │   ├── /create        # Wizard de création
│   │   ├── /editor/[id]  # Éditeur Split Screen
│   │   └── /brand-center # Centre d'identité visuelle
│   └── /admin             # Back-Office Agence
├── /components
│   ├── /templates         # Templates React (Designs)
│   ├── /editor           # Moteur (FormRenderer, PreviewContainer)
│   ├── /admin            # Composants Admin
│   ├── /brand            # Composants Brand Center
│   └── /ui               # Composants UI réutilisables
├── /lib                   # Logique métier
│   ├── store.ts          # Zustand Store
│   ├── supabase.ts       # Service Supabase
│   └── design-tokens.ts   # Design System
└── /supabase             # Migrations SQL

🚀 Installation

Prérequis

• Node.js 18+
• npm ou yarn
• Compte Supabase

Setup

1. Cloner le repository

git clone https://github.com/[ton-username]/e3-platform.git
cd e3-platform

2. Installer les dépendances

npm install

3. Configurer les variables d'environnement

cp .env.local.example .env.local

Remplir .env.local avec tes credentials Supabase :

NEXT_PUBLIC_SUPABASE_URL=ton_url_supabase
NEXT_PUBLIC_SUPABASE_ANON_KEY=ton_anon_key
SUPABASE_SERVICE_ROLE_KEY=ton_service_role_key
RESEND_API_KEY=ton_resend_key
GOOGLE_FONTS_API_KEY=ton_google_fonts_key

4. Initialiser la base de données

# Exécuter le schéma SQL dans Supabase SQL Editor
# Fichier: supabase/schema.sql

5. Créer un utilisateur admin

node scripts/create-admin-tpare.js
# Ou utiliser le script générique: scripts/create-admin.js

6. Lancer le serveur de développement

npm run dev

Ouvre http://localhost:3000 dans ton navigateur.

📋 Fonctionnalités

Pour les Agences (Admin/Agency)

• ✅ Gestion des clients (Tenants)
• ✅ Création et configuration de templates
• ✅ Gestion des utilisateurs
• ✅ Traitement des demandes de modification
• ✅ Import d'assets (logos, polices, couleurs)

Pour les Utilisateurs

• ✅ Dashboard avec projets récents
• ✅ Wizard de création de visuels
• ✅ Éditeur Split Screen (Formulaire + Preview)
• ✅ Brand Center (identité visuelle)
• ✅ Export PNG/PDF haute qualité
• ✅ Système de demande de modification

Brand Center

• 🎨 Générateur de palette de couleurs
• 📐 Outils de typographie (Modular Scale, Baseline Grid)
• 🔤 Import de polices (TTF, OTF, WOFF, Google Fonts)
• 🖼️ Gestion de médiathèque (DAM)
• 📋 Import avancé de couleurs (Paste, Screenshot, Pipette)

🎨 Design System

Couleurs

• Neutral : Black, White, Gray (50-900)
• Mainstream : Palette 6 nuances (800-100)

Typographie

• Primary : Geist Sans
• Mono : Geist Mono

Principes

• Tone of Voice : "Juste. Clair. Impactant."
• Minimalisme : Interface épurée, focus sur le contenu
• Performance : Optimisé pour la vitesse

🔐 Rôles & Permissions

• Admin : Accès complet à la plateforme
• Agency : Gestion clients et templates
• User : Création de visuels uniquement

📝 Scripts Disponibles

npm run dev          # Serveur de développement
npm run build        # Build production
npm run start        # Serveur production
npm run lint         # Linter ESLint

🗄️ Base de Données

Tables Principales

• tenants : Clients/Marques
• users : Utilisateurs (extension de auth.users)
• templates : Templates de design
• assets : Médiathèque (DAM)
• requests : Demandes de modification

Row Level Security (RLS)

Toutes les tables sont protégées par RLS :

• Les utilisateurs voient uniquement leurs données
• Les admins/agences ont accès complet
• Les assets sont isolés par tenant

🚢 Déploiement

Vercel (Recommandé)

1. Connecter ton repo GitHub à Vercel
2. Configurer les variables d'environnement
3. Déployer

Autres Plateformes

Le projet est compatible avec toute plateforme supportant Next.js :

• Netlify
• Railway
• AWS Amplify
• etc.

📚 Documentation

• Guide de Production
• Création Admin User
• Design System

🤝 Contribution

Ce projet est privé. Pour toute question ou contribution, contacte l'équipe.

📄 Licence

Propriétaire - Tous droits réservés

---

Éclectique STUDIO - Juste. Clair. Impactant.