# 12. PLAN COMPLET DE LA SOLUTION (TECHNIQUE)

> Objectif : développer une plateforme EdTech **mobile-first** centrée sur WhatsApp + contenus sociaux, avec une brique IA pour générer des documents (pitch, pitch deck, one-pager, mini business plan, logo basique).

## 12.1 Produits livrables (MVP → V1)

### MVP (6–8 semaines)

- WhatsApp Learning Track (7–14 jours) : inscription, séquençage, exercices, suivi de complétion
- Admin dashboard : cohortes, progression, export CSV, tags, statistiques de base
- Générateur IA v0 : **Pitch (30s + 2min)** + **One-pager PDF** (1 page)
- Landing page : inscription, FAQ, contact

### V1 (8–16 semaines)

- Générateur IA v1 : Pitch deck (8–10 slides PPTX) + mini business plan (2–4 pages)
- Bibliothèque de templates (deck / one-pager) + styles
- Scoring pédagogique (auto-évaluation) : maturité business (non-financier complexe)
- Paiement (Wave / Orange Money) pour cohortes présentiel

### V2 (16–24 semaines)

- Personnalisation par filière (livreur, artisanat, commerce, transformation)
- Multi-langue (Wolof + Français)
- Data products (anonymisés) : tableaux de bord d’insights pour partenaires

---

# 13. ARCHITECTURE (SIMPLE, SCALABLE)

## 13.1 Vue d’ensemble

**Canaux**

- TikTok / Instagram : acquisition (contenus + CTA)
- WhatsApp : parcours structuré (learning track)
- Web : inscription + paiement + téléchargement documents

**Back-end**

- API principale (auth, learning, admin)
- Service WhatsApp (webhooks + envoi messages)
- Service IA (génération texte + génération PDF/PPTX)

**Données**

- Base Postgres (users, tracks, réponses, documents)
- Stockage fichiers (PDF/PPTX) : S3 compatible (ex: Cloudflare R2 / AWS S3 / OVH Object Storage)

## 13.2 Recommandation repo Git

✅ Démarrage conseillé : **Monorepo** (plus simple au début)

Structure type :

- `/apps/api` : API (Node/TS ou Python)
- `/apps/whatsapp-worker` : worker WhatsApp (queues + scheduling)
- `/apps/admin` : dashboard admin (Next.js)
- `/apps/web` : landing + paiement + portail apprenant
- `/packages/shared` : types, templates, prompts, contenu pédagogique

➡️ Séparer en plusieurs repos uniquement si l’IA devient un produit autonome.

---

# 14. STACK TECH RECOMMANDÉ

## 14.1 Front-end

- **Next.js** (React) : admin + web portal
- UI : TailwindCSS + component library (shadcn/ui)

## 14.2 Back-end

Option A (très simple, robuste) : **Node.js + TypeScript**

- Framework : Fastify ou NestJS
- Validation : Zod

Option B (si équipe plus Python) : **Python + FastAPI**

## 14.3 Base de données

- **PostgreSQL** (Neon / Supabase / OVH / RDS)
- ORM : Prisma (Node) ou SQLModel (Python)

## 14.4 Messaging / Jobs

- Queue : **BullMQ (Redis)** ou **Cloud Tasks**
- Objectif : envoi WhatsApp programmé, génération documents asynchrone

## 14.5 WhatsApp

- Recommandé : **WhatsApp Cloud API (Meta)**
- Alternative : Twilio (plus simple mais coûts + dépendances)

## 14.6 IA / Document generation

- Génération texte : via LLM (prompts + garde-fous)
- Génération PDF : HTML → PDF (Playwright) ou ReportLab
- Génération PPTX : PptxGenJS (templates) ou python-pptx
- Logos : au MVP, générer **logo basique** (icône + typographie) ou proposer 3 styles (pas de promesse “brand pro”)

---

# 15. CHARTE GRAPHIQUE – DESIGN SYSTEM PROPOSÉ

Objectif : créer une identité visuelle moderne, crédible, inclusive et technologique, adaptée au secteur informel africain mais suffisamment institutionnelle pour parler à des bailleurs et partenaires.

## 15.1 Positionnement visuel

Le design doit transmettre :

- Inclusion
- Modernité
- Technologie accessible
- Confiance financière
- Éducation structurée

Le style est :

- Mobile-first
- Clair et lisible
- Peu chargé
- Orienté impact

---

## 15.2 Palette Couleurs (proposition stratégique)

### 🎯 Couleur primaire – Vert Structuration

`#1C7C54`

Signification : croissance, stabilité, transformation progressive. Utilisation : boutons principaux, titres, éléments forts, KPI.

---

### 🎯 Couleur secondaire – Bleu Profondeur

`#1B3A57`

Signification : crédibilité, sérieux institutionnel, tech. Utilisation : header, footer, dashboard admin, slide de couverture.

---

### 🎯 Accent – Orange Activation

`#F4A261`

Signification : énergie, entrepreneuriat, action. Utilisation : CTA, highlights, icônes actives, progression.

---

### 🎯 Gris neutres

- Gris clair fond : `#F5F7F9`
- Gris texte secondaire : `#6B7280`
- Noir texte principal : `#111827`

---

## 15.3 Typographie

### Titres

**Montserrat Bold / SemiBold**

- Moderne
- Lisible
- Impact visuel fort

### Texte courant

**Inter / Poppins Regular**

- Optimisé mobile
- Lecture fluide
- Compatible PDF & PPT

Fallback system :

- Arial / Helvetica

---

## 15.4 Tokens Design (à utiliser dans le code)

```ts
export const theme = {
  colors: {
    primary: '#1C7C54',
    secondary: '#1B3A57',
    accent: '#F4A261',
    background: '#F5F7F9',
    textPrimary: '#111827',
    textSecondary: '#6B7280'
  },
  radius: {
    card: '12px',
    button: '8px'
  },
  shadow: {
    soft: '0 4px 12px rgba(0,0,0,0.08)'
  }
}
```

---

## 15.5 UI Components Standards

### Boutons

- Primary : fond vert `#1C7C54`, texte blanc
- Secondary : fond bleu `#1B3A57`, texte blanc
- Accent : fond orange `#F4A261`, texte noir

Hover : légère augmentation luminosité + shadow soft.

---

### Cards

- Fond blanc
- Border radius 12px
- Ombre douce
- Padding généreux (16–24px)

---

### Dashboard Admin

- Sidebar bleu foncé
- KPI cards vertes
- Alerts orange
- Graphiques simples (bar / line)

---

## 15.6 Style Documents Générés (PDF / PPT)

One-pager :

- Header bleu profond
- Titres verts
- Accent orange pour chiffres clés
- Icônes simples outline

Pitch deck :

- Slide couverture : fond bleu + titre blanc
- Slides contenu : fond blanc + titres verts
- Graphiques en vert + orange

---

## 15.7 Ton visuel global

Pas trop “startup Silicon Valley”. Pas trop “ONG traditionnelle”.

→ Tech africaine inclusive. → Sérieuse mais accessible.

---

# 16. WHATSAPP LEARNING TRACK – COMMENT LE CODER

WHATSAPP LEARNING TRACK – COMMENT LE CODER

## 16.1 Logique pédagogique

- Track = 7 ou 14 jours
- Chaque jour :
  - 1 audio (1–3 min)
  - 1 visuel (option)
  - 1 exercice (réponse texte/voice)
  - 1 validation (mot-clé “OK”, “SUIVANT”, bouton)

## 16.2 Parcours utilisateur

1. L’utilisateur envoie “INSCRIPTION”
2. Le bot demande : prénom, activité, ville, langue
3. Inscription au Track
4. Envoi Jour 1
5. Sauvegarde réponses + progression
6. Relance automatique si inactif (J+1)
7. Checkpoints (J7/J14) : mini pitch + données business

## 16.3 Modèle de données (minimum viable)

Tables :

- `users(id, phone, name, language, city, created_at)`
- `tracks(id, name, duration_days, language)`
- `track_days(id, track_id, day_number, content_type, content_url, prompt_text)`
- `enrollments(id, user_id, track_id, status, current_day, started_at, completed_at)`
- `responses(id, enrollment_id, day_number, text, media_url, created_at)`
- `messages(id, user_id, channel, direction, payload_json, created_at)`

## 16.4 Endpoints API (exemple)

- `POST /webhooks/whatsapp` : réception messages
- `POST /enroll` : créer inscription
- `POST /send/day` : envoyer contenu du jour N
- `GET /admin/metrics` : stats

## 16.5 Exemple (Node/TS) – Webhook WhatsApp (simplifié)

```ts
import Fastify from 'fastify'

const app = Fastify()

app.post('/webhooks/whatsapp', async (req, reply) => {
  const payload: any = req.body
  // 1) extraire phone + message
  const phone = payload?.entry?.[0]?.changes?.[0]?.value?.messages?.[0]?.from
  const text = payload?.entry?.[0]?.changes?.[0]?.value?.messages?.[0]?.text?.body?.trim()?.toUpperCase()

  if (!phone) return reply.code(200).send({ ok: true })

  // 2) router simple
  if (text === 'INSCRIPTION') {
    // TODO: créer user + enrollment
    // TODO: répondre avec questions profil
  }

  // TODO: progression track
  return reply.code(200).send({ ok: true })
})

app.listen({ port: 3000, host: '0.0.0.0' })
```

---

# 17. IA – GÉNÉRATION PITCH / ONE-PAGER / DECK

## 17.1 Par quoi commencer (recommandation)

1. **Pitch (30s + 2min)**
2. **One-pager PDF (1 page)** ➡️ Ensuite seulement : Pitch deck PPTX

## 17.2 Inputs (collectés via WhatsApp + formulaire web)

- Activité
- Client cible
- Problème
- Solution
- Prix / revenus
- Coûts principaux
- Preuves (photos, témoignages, traction)
- Besoin (montant, équipement, stock)

## 17.3 Sorties (MVP)

- Pitch 30 secondes (wolof/fr)
- Pitch 2 minutes (wolof/fr)
- One-pager PDF : 6 blocs (problème, solution, marché, modèle, traction, besoin)

## 17.4 Templates & garde-fous

- Templates de contenu (structure fixe)
- Pas de promesses irréalistes
- Toujours demander 1 preuve (même simple)
- Mentionner types de financement informel (microcrédit, crédit équipement, etc.)

## 17.5 Exemple (pseudo-code) – endpoint docgen

```ts
app.post('/ai/onepager', async (req, reply) => {
  const input = req.body // validated
  // 1) appeler modèle texte → sections
  const sections = await generateSectionsWithLLM(input)
  // 2) rendre HTML template
  const html = renderOnePagerHTML(sections)
  // 3) convertir en PDF
  const pdfUrl = await htmlToPdfAndUpload(html)
  return reply.send({ pdfUrl })
})
```

---

---

## 17.6 AI SLIDES ENGINE – VERSION “GENSPARK-LIKE”

Objectif : ne pas seulement générer du texte, mais produire un **pitch deck complet, designé, prêt à envoyer (PPTX/PDF)** avec :

- Couleurs appliquées automatiquement (charte interne)
- Icônes cohérentes
- Hiérarchie visuelle
- Mise en page intelligente

### Architecture recommandée

Le système ne repose pas uniquement sur un prompt texte. Il repose sur 3 couches :

### 1️⃣ LLM → Structure JSON avancée

Le modèle doit produire une structure riche, par exemple :

```json
[
  {
    "type": "cover",
    "title": "Nom du projet",
    "subtitle": "Pitch court",
    "themeVariant": "primary"
  },
  {
    "type": "problem",
    "title": "Problème",
    "bullets": ["...", "..."],
    "icon": "alert-circle",
    "highlightStat": "80% des clients..."
  }
]
```

Le LLM ne génère pas seulement du texte. Il génère une **intention de layout**.

---

### 2️⃣ Slide Renderer Engine

Un moteur interne transforme cette structure en slides réelles :

- Mapping automatique des types (`cover`, `problem`, `solution`, `market`, etc.)
- Application des couleurs selon le `themeVariant`
- Injection des icônes (Lucide / Heroicons / custom SVG)
- Placement automatique des blocs (grille 2 colonnes, full width, etc.)

Avec **PptxGenJS** :

- Création slide
- Ajout titre
- Ajout shape colorée
- Ajout icône SVG
- Ajout bullets stylisées

---

### 3️⃣ Design System Binding

Le moteur doit utiliser les tokens définis section 15 :

- Primary → #1C7C54
- Secondary → #1B3A57
- Accent → #F4A261

Chaque type de slide a une règle :

- Cover → fond bleu profond
- Problem → bande accent orange
- Solution → titre vert
- Financial → chiffres en accent

Ainsi, le rendu est cohérent automatiquement.

---

### 4️⃣ Auto-Layout Rules

Le moteur doit :

- Limiter à 5 bullets max
- Couper les phrases trop longues
- Ajuster taille police selon longueur
- Éviter slide surchargée

Ce n’est pas seulement du texte. C’est une logique produit.

---

### 5️⃣ Pipeline complet

1. Collect inputs utilisateur
2. Générer JSON structuré via LLM
3. Valider JSON (Zod schema)
4. Mapper vers template engine
5. Générer PPTX
6. Stocker fichier (S3)
7. Retourner lien WhatsApp

---

### Important

Pour obtenir un résultat niveau Genspark :

- Toujours utiliser output JSON structuré (pas texte libre)
- Toujours passer par un renderer interne
- Toujours appliquer un design system cohérent

Le rendu final doit être :

"Document prêt à envoyer à un financeur"

et non

"Texte copié-collé dans PowerPoint"

---

# 18. ADMIN DASHBOARD (IGNITE.E / ÉQUIPE)

Fonctionnalités admin MVP :

- Liste des inscrits (WhatsApp)
- Progression par track
- Taux de complétion J1/J7/J14
- Export CSV
- Gestion des contenus (track\_days)
- Gestion des cohortes présentiel
- Paiements (V1)

---

# 19. SÉCURITÉ, DONNÉES & CONFORMITÉ

- Consentement explicite à l’inscription (WhatsApp) : utilisation pédagogique + données anonymisées
- Pseudonymisation : séparer identité (phone) des analytics
- Stockage chiffré des médias (si possible)
- Règles d’accès : admin role-based
- Journalisation (logs) + monitoring

---

# 20. PLAN D’EXÉCUTION (PHASÉ)

## Phase 0 – Préparation (1 semaine)

- Finaliser 2 tracks (Business Model 7j + Pitch 7j)
- Écrire scripts audios wolof + exercices
- Définir templates one-pager

## Phase 1 – MVP WhatsApp Track (2–3 semaines)

- Webhook WhatsApp + parsing
- Enrollment + progression
- Scheduling envoi jour N
- Dashboard metrics minimal
- Pilote 50–100 utilisateurs

## Phase 2 – IA v0 (2–3 semaines)

- Collect inputs
- Générer pitch + one-pager PDF
- Retour WhatsApp (lien)

## Phase 3 – V1 (4–8 semaines)

- Paiement cohorte présentiel
- Pitch deck PPTX
- Auto-évaluation (scoring pédagogique)

---

# 21. LISTE DES FONCTIONNALITÉS (CHECKLIST)

## Apprenants

- Inscription WhatsApp
- Parcours 7/14 jours
- Exercices + feedback
- Documents générés (liens)

## Admin

- Gestion contenus
- Stats complétion
- Exports
- Cohortes + paiements (V1)

## IA

- Pitch 30s / 2min
- One-pager PDF
- Pitch deck PPTX (V1)
- Logo basique (V1/V2)

---

# 22. NOTES IMPORTANTES

- Commencer simple : WhatsApp Track d’abord, puis IA.
- Le “logo IA” est optionnel au MVP.
- Mettre l’accent sur la qualité pédagogique + tracking.
- Les documents générés doivent rester réalistes et adaptés au financement informel.