Construisons l'avenir
Tech du Bénin ensemble

Prompt Studio est une application web intuitive qui aide les créateurs de contenu à générer des prompts efficaces pour les intelligences artificielles.

Ce que fait l'application : Génération de prompts pour différents types de contenu : posts Instagram, pubs Facebook, scripts TikTok, emails marketing, descriptions produit, idées de contenu, légendes Interface simplifiée : sélection du type de contenu → remplissage de 1-2 champs essentiels → génération instantanée Options avancées masquées par défaut pour éviter la surcharge cognitive Résultats professionnels prêts à copier et utiliser avec ChatGPT, Claude ou autres IA Philosophie :

Rendre le prompt engineering accessible à tous, sans expertise technique préalable, en privilégiant la simplicité et l'efficacité.

𝗘𝘀𝘁-𝗰𝗲 𝗾𝘂𝗲 𝘃𝗼𝘂𝘀 𝗽𝗲𝗻𝘀𝗲𝘇 𝗾𝘂𝗲 𝘃𝗼𝘂𝘀 𝗮𝘂𝗿𝗶𝗲𝘇 𝘀𝘂𝗿𝘃é𝗰𝘂 à 𝗯𝗼𝗿𝗱 𝗱𝘂 𝘁𝗶𝘁𝗮𝗻𝗶𝗰 ? 😆😹

Eh bien, moi, j’ai décidé de mettre l’intelligence artificielle à l’épreuve ! Testez mon modèle d'IA ici 👇🏽 https://titanic-app6.streamlit.app

Entrez votre âge, votre sexe: 0 si vous êtes un homme et 1 si vous êtes une femme !! et votre classe de voyage …. et découvrez si l’IA pense que vous auriez survécu !🔥🎉

SkillFlash Academy ⚡

Une plateforme de micro-learning moderne, rapide et gamifiée

Conçue pour offrir une expérience éducative premium et interactive

Démo Live

🔥 DÉFI RELEVÉ : Bénin 🇧🇯 vs Côte d'Ivoire 🇨🇮

Il y a 7 jours, j'ai lancé un défi à Auguste Adou : créer en une semaine une plateforme de micro-learning complète et fonctionnelle.

🎯 Le Challenge

Mission : Concevoir et développer une application de micro-formation permettant aux utilisateurs de suivre des mini-cours, de tester leurs connaissances et d'obtenir des certifications.

Les Règles :

⏱️ Durée : 7 jours (168 heures chrono) 🎨 Liberté : Même concept, exécution libre 🛠️ Stack : Aucune contrainte technique imposée 🏆 Juge : La communauté tech béninoise 🇧🇯 et ivoirienne 🇨🇮 🎉 Résultat : SkillFlash

7 jours. 0 compromis. 100% passion.

Aujourd'hui, je suis fier de présenter SkillFlash ⚡ - une plateforme complète qui prouve qu'avec de la détermination, on peut transformer une idée en réalité fonctionnelle en quelques jours.

✨ Ce que SkillFlash Propose 🎓 Fonctionnalités Principales

| Fonctionnalité | Description | Statut | |----------------|-------------|--------| | 🎯 Micro-modules | Cours ultra-ciblés de 15-20 minutes maximum | ✅ Opérationnel | | 📝 Quiz intelligents | QCM + réponses ouvertes analysées par mots-clés | ✅ Opérationnel | | 🎓 Certifications | Certificats PDF avec QR Code de vérification | 🔧 Fonctionnel (design à améliorer) | | 🏆 Gamification | Système de points, classements et badges | ✅ Opérationnel | | 🎨 Interface moderne | Design épuré et intuitif (React + TypeScript) | ✅ Opérationnel | | 📱 Responsive | Optimisé mobile-first pour tous les écrans | ✅ Opérationnel | | 💾 Mode hors ligne | Progression sauvegardée localement | ✅ Opérationnel | | 🔐 Auth sécurisée | Authentification via Supabase | ✅ Opérationnel |

📊 Quelques Chiffres 📦 3 800+ lignes de code TypeScript 🏗️ Architecture modulaire et scalable 🔐 Système d'authentification sécurisé 📄 Génération automatique de certificats PDF 💾 Mode hors ligne pour la progression 🎨 15+ composants réutilisables 📱 100% responsive (mobile-first) ⚡ Performance optimisée avec Vite 🚀 Stack Technique Frontend

| Technologie | Usage | Version | |-------------|-------|---------| | React 18 | Framework principal | ^18.3.1 | | TypeScript | Typage strict | ^5.6.2 | | Vite | Build tool ultra-rapide | ^5.4.2 | | Tailwind CSS | Styling utility-first | ^3.4.1 | | Shadcn UI | Composants UI (Radix UI) | Latest | | Lucide React | Bibliothèque d'icônes | ^0.460.0 |

État & Backend

| Service | Usage | |---------|-------| | Supabase Auth | Authentification (Email/Password) | | TanStack Query | Gestion du cache et des états | | localStorage | Sauvegarde locale de la progression |

Utilitaires

| Package | Usage | |---------|-------| | jsPDF | Génération de certificats PDF | | qrcode.react | QR Codes de vérification | | Zod | Validation de schémas | | React Router | Navigation SPA | | Sonner | Notifications toast |

🏗️ Architecture du Projet skill-flash/ ├── public/ # Assets statiques et données │ ├── courses/ # Définitions des cours (JSON) │ │ ├── index.json # Catalogue principal │ │ └── [courseId]/ # Dossier par cours │ │ ├── chapters.json # Liste des chapitres │ │ └── content/ # Contenu Markdown │ └── tests/ # Bases de données des quiz │ ├── qcm/ # Questions à choix multiples │ └── qr/ # Questions à réponses ouvertes │ ├── src/ │ ├── components/ # Composants réutilisables │ │ ├── ui/ # Composants de base (Shadcn) │ │ │ ├── button.tsx │ │ │ ├── card.tsx │ │ │ ├── progress.tsx │ │ │ └── ... │ │ ├── landing/ # Sections de la landing page │ │ │ ├── Hero.tsx │ │ │ ├── Features.tsx │ │ │ └── ... │ │ ├── Navbar.tsx # Navigation principale │ │ └── ErrorBoundary.tsx # Gestion des erreurs │ │ │ ├── hooks/ # Logique métier (Custom Hooks) │ │ ├── useAuth.ts # Gestion de l'authentification │ │ ├── useProgress.ts # Progression utilisateur │ │ └── useProfile.ts # Profil et points │ │ │ ├── lib/ # Clients et utilitaires │ │ ├── supabase.ts # Client Supabase │ │ ├── courses.ts # API des cours │ │ ├── pdf.ts # Génération de certificats │ │ └── utils.ts # Fonctions utilitaires │ │ │ ├── pages/ # Vues principales (Pages) │ │ ├── Landing.tsx # Page d'accueil │ │ ├── Dashboard.tsx # Tableau de bord │ │ ├── Catalog.tsx # Catalogue de cours │ │ ├── Course.tsx # Détails d'un cours │ │ ├── Quiz.tsx # Interface de quiz │ │ └── Profile.tsx # Profil utilisateur │ │ │ ├── types/ # Interfaces TypeScript │ │ └── index.ts # Types globaux │ │ │ ├── App.tsx # Composant racine │ ├── main.tsx # Point d'entrée │ └── index.css # Styles globaux │ ├── .env.example # Variables d'environnement ├── package.json # Dépendances du projet ├── tsconfig.json # Configuration TypeScript ├── tailwind.config.js # Configuration Tailwind ├── vite.config.ts # Configuration Vite └── vercel.json # Configuration Vercel 📖 Documentation Technique 1️⃣ Définition d'un Cours

Fichier : public/courses/index.json

Le catalogue central. Chaque objet définit une carte de cours visible dans le catalogue.

{ "id": "python", "title": "Python Intro", "description": "Introduction à Python pour le scripting.", "category": "development", "icon": "Terminal", "color": "python", "duration": "2 heures", "difficulty": "Débutant", "chapters": 10, "totalQuestions": 10 }

Propriétés :

id : Identifiant unique (utilisé dans l'URL) title : Titre affiché sur la carte description : Courte description (2-3 lignes) category : Catégorie (development, design, marketing, etc.) icon : Nom d'icône Lucide React color : Classe Tailwind pour la couleur du badge duration : Durée estimée du cours difficulty : Niveau (Débutant, Intermédiaire, Avancé) chapters : Nombre de chapitres totalQuestions : Nombre total de questions dans le quiz final 2️⃣ Structure des Chapitres

Fichier : public/courses/[courseId]/chapters.json

Définit la liste des modules d'un cours spécifique.

{ "courseId": "python", "chapters": [ { "id": 1, "title": "Introduction & Syntaxe", "description": "Premiers pas avec Python : variables, types, opérateurs.", "duration": "60 min" }, { "id": 2, "title": "Structures de Contrôle", "description": "Conditions, boucles et gestion du flux.", "duration": "45 min" } ] }

Contenu des chapitres : Le contenu de chaque chapitre est stocké dans public/courses/[courseId]/content/chapter-[id].md au format Markdown.

3️⃣ Format des Quiz QCM

Fichier : public/tests/qcm/[courseId]_qcm.json

Questions à choix multiples avec réponse unique.

{ "title": "Expertise Python", "passingScore": 70, "questions": [ { "id": 1, "question": "Quel mot-clé est utilisé pour créer une fonction en Python ?", "options": ["func", "def", "function", "lambda"], "correctAnswer": 1, "explanation": "Le mot-clé 'def' est utilisé pour définir une fonction en Python." } ] }

Propriétés :

title : Titre du quiz passingScore : Score minimum pour réussir (en %) questions : Tableau de questions id : Identifiant unique question : Énoncé de la question options : Tableau de réponses possibles correctAnswer : Index de la bonne réponse (commence à 0) explanation : Explication de la bonne réponse (optionnel) 4️⃣ Format des Quiz QR (Réponses Ouvertes)

Fichier : public/tests/qr/[courseId]_qr.json

Questions nécessitant une réponse rédigée, analysée par mots-clés.

{ "title": "Logique Python Avancée", "questions": [ { "id": 1, "question": "Pourquoi utiliser l'instruction 'with' pour ouvrir un fichier en Python ?", "expectedKeywords": ["fermeture", "automatique", "sécurité", "contexte"], "sampleAnswer": "L'instruction 'with' garantit que le fichier est fermé automatiquement après utilisation, même en cas d'erreur, ce qui améliore la sécurité et évite les fuites de ressources." } ] }

Propriétés :

title : Titre du quiz questions : Tableau de questions id : Identifiant unique question : Énoncé de la question expectedKeywords : Mots-clés attendus dans la réponse sampleAnswer : Exemple de bonne réponse (pour référence)

Algorithme de notation :

score = (nombre de mots-clés trouvés / nombre total de mots-clés) * 100 🎮 Fonctionnalités Avancées 🏆 Système de Gamification

Le système de points motive les utilisateurs à progresser :

| Action | Points Gagnés | |--------|---------------| | Compléter un chapitre | +10 points | | Réussir un quiz de module | +10 points | | Réussir le test de certification | +150 points |

Classement en temps réel : Le leaderboard affiche les 10 meilleurs utilisateurs, mis à jour automatiquement via le hook useProfile.

🎓 Système de Certification

Chaque utilisateur qui réussit un test final (score ≥ 80%) obtient un certificat PDF professionnel incluant :

✅ Nom complet de l'utilisateur ✅ Titre du cours ✅ Score final obtenu ✅ Date d'émission ✅ QR Code unique pour vérification ✅ Code de vérification alphanumérique

Processus de vérification :

Scanner le QR Code du certificat Redirection vers /verify?d=[BASE64_DATA] Décodage des données cryptées Affichage des informations de certification

Note : Le design du certificat PDF est fonctionnel mais sera amélioré dans une prochaine version pour un rendu plus professionnel.

💾 Mode Hors Ligne & Résilience

Sauvegarde automatique :

La progression est sauvegardée en temps réel dans localStorage Les réponses aux quiz sont stockées localement Possibilité de reprendre un test interrompu

Gestion des erreurs : Un ErrorBoundary global capture toutes les erreurs non gérées pour éviter les écrans blancs et offrir une expérience utilisateur fluide.

🛠️ Installation & Développement Prérequis Node.js : v18.x ou supérieur npm ou yarn ou pnpm Compte Supabase (gratuit) 1. Cloner le Repository git clone https://github.com/REBCDR07/Skill-Flash.git cd Skill-Flash 2. Installer les Dépendances npm install # ou yarn install # ou pnpm install 3. Configuration de l'Environnement

Créer un fichier .env à la racine du projet :

VITE_SUPABASE_URL=your_supabase_project_url VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

Obtenir vos clés Supabase :

Créer un compte sur supabase.com Créer un nouveau projet Copier l'URL et la clé anonyme depuis Project Settings → API 4. Lancer le Serveur de Développement npm run dev

L'application sera accessible sur http://localhost:8080

5. Build de Production npm run build

Le dossier dist/ contiendra les fichiers prêts pour le déploiement.

📜 Scripts Disponibles

| Commande | Description | |----------|-------------| | npm run dev | Lance le serveur de développement Vite | | npm run build | Génère le bundle de production | | npm run preview | Prévisualise le build de production localement | | npm run lint | Vérifie la qualité du code avec ESLint | | npm run type-check | Vérifie les types TypeScript |