Le showroom de la Tech Béninoise

**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 ⚡  [](https://skill-flash.vercel.app/) [](https://github.com/REBCDR07/Skill-Flash.git) **Une plateforme de micro-learning moderne, rapide et gamifiée** *Conçue pour offrir une expérience éducative premium et interactive* [Démo Live](https://skill-flash.vercel.app/) --- ## 🔥 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. ```json { "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. ```json { "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. ```json { "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. ```json { "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 :** ```typescript 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 :** 1. Scanner le QR Code du certificat 2. Redirection vers `/verify?d=[BASE64_DATA]` 3. Décodage des données cryptées 4. 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 ```bash git clone https://github.com/REBCDR07/Skill-Flash.git cd Skill-Flash ``` ### 2. Installer les Dépendances ```bash npm install # ou yarn install # ou pnpm install ``` ### 3. Configuration de l'Environnement Créer un fichier `.env` à la racine du projet : ```env VITE_SUPABASE_URL=your_supabase_project_url VITE_SUPABASE_ANON_KEY=your_supabase_anon_key ``` > **Obtenir vos clés Supabase :** > 1. Créer un compte sur [supabase.com](https://supabase.com) > 2. Créer un nouveau projet > 3. Copier l'URL et la clé anonyme depuis Project Settings → API ### 4. Lancer le Serveur de Développement ```bash npm run dev ``` L'application sera accessible sur `http://localhost:8080` ### 5. Build de Production ```bash 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 |

Portfolio personnel conçu pour présenter mon parcours, mes compétences et mes projets. Il met en avant mon expertise en développement web et applicatif à travers une interface moderne, claire et professionnelle.

# Nom du projet react-benin-payments # URL du dépôt https://github.com/stvekoulo/react-benin-payments # Description react-benin-payments est une librairie Open Source développée pour les environnements React et Next.js. Elle vise à standardiser et simplifier l'intégration technique des passerelles de paiement béninoises (FedaPay et KKiaPay). L'objectif principal est de fournir une couche d'abstraction unifiée qui dispense les développeurs de la gestion manuelle des scripts externes, des iframes et des configurations redondantes. **Fonctionnalités techniques :** - **Composants Prêts à l'emploi :** Intégration rapide via des boutons pré-configurés (FedaPayButton, KkiaPayButton). - **Hooks Personnalisables :** Logique de paiement découplée de l'interface (Headless UI) via useFedaPay et useKkiaPay pour une intégration sur mesure. - **Support TypeScript :** Typage strict des props et des réponses d'API pour éviter les erreurs de développement. - **Compatibilité Next.js :** Fonctionne nativement avec l'App Router (gestion des directives client/serveur). - **Sécurité :** Mécanisme intégré pour déclencher une vérification de transaction côté backend avant de valider le paiement sur le frontend. # Installation Pour installer le paquet via NPM : ```bash npm install react-benin-payments ``` # Guide d'intégration ## 1. Configuration Globale (Context Provider) Pour éviter de répéter les clés d'API sur chaque bouton, il est recommandé d'envelopper votre application (ou la partie gérant les paiements) avec le composant `BeninPaymentProvider`. Ce composant permet de centraliser la configuration (clés publiques, mode test/live). ```tsx import { BeninPaymentProvider } from 'react-benin-payments'; export default function AppLayout({ children }) { return ( <BeninPaymentProvider fedaPayPublicKey="pk_live_votre_cle_publique_feda" kkiaPayPublicKey="pk_votre_cle_publique_kkia" isTestMode={false} // Basculez sur true pour activer le mode Sandbox > {children} </BeninPaymentProvider> ); } ``` ## 2. Utilisation des Composants Une fois le Provider configuré, vous pouvez utiliser les composants de paiement directement dans vos pages. Ils récupéreront automatiquement les configurations globales. ```tsx import { FedaPayButton, KkiaPayButton } from 'react-benin-payments'; export default function CheckoutPage() { // Fonction de rappel exécutée uniquement en cas de succès const handleSuccess = (transaction) => { console.log("Paiement validé avec succès. ID :", transaction.transactionId); // Ici, vous pouvez rediriger l'utilisateur ou mettre à jour l'état de la commande }; return ( <div style={{ display: 'flex', gap: '20px', alignItems: 'center' }}> {/* Intégration du bouton FedaPay */} <FedaPayButton config={{ amount: 5000, // Montant en FCFA description: "Achat de la formation React", customer: { email: "client@entreprise.com", lastname: "Doe", firstname: "John" } }} text="Payer via FedaPay" onSuccess={handleSuccess} /> {/* Intégration du bouton KKiaPay */} <KkiaPayButton config={{ amount: 5000, theme: "#000000", // Personnalisation de la couleur du widget paymentMethods: ["momo", "card"] // Restriction des méthodes de paiement }} text="Payer via KKiaPay" onSuccess={handleSuccess} /> </div> ); } ```

𝐥’a𝐩𝐩 𝐪𝐮𝐢 𝐯𝐨𝐮𝐬 𝐞𝐦𝐩ê𝐜𝐡𝐞 𝐝’𝐨𝐮𝐛𝐥𝐢𝐞𝐫 𝐯𝐨𝐬 𝐝𝐨𝐜𝐮𝐦𝐞𝐧𝐭𝐬 𝐢𝐦𝐩𝐨𝐫𝐭𝐚𝐧𝐭𝐬 ! Cartes d’identité, passeport, assurance, abonnement, certification… tout ce qui expire est désormais centralisé au même endroit avec des rappels automatiques par email. 𝐏𝐥𝐮𝐬 𝐣𝐚𝐦𝐚𝐢𝐬 𝐝𝐞 𝐦𝐚𝐮𝐯𝐚𝐢𝐬𝐞 𝐬𝐮𝐫𝐩𝐫𝐢𝐬𝐞 ! 📋 𝐅𝐨𝐧𝐜𝐭𝐢𝐨𝐧𝐧𝐚𝐥𝐢𝐭é𝐬 𝐜𝐥é𝐬 : 👉 Dashboard clair avec calendrier et statistiques. 👉 Upload sécurisé de vos documents. 👉 Rappels personnalisables (30j, 7j, 1j avant l'échéance). 👉 100% gratuit pour commencer.

# Portfolio — Refonte complète & mise en production J’ai récemment finalisé la **refonte complète de mon portfolio professionnel**, avec un objectif clair : présenter mes projets de manière **structurée, performante et moderne**, tout en respectant les bonnes pratiques web actuelles. 👉 Le portfolio est accessible ici : **[https://octavebahoun-houtoukpe.vercel.app](https://octavebahoun-houtoukpe.vercel.app/)** --- ## 🎯 Objectifs du projet * Présenter mes réalisations de façon claire et professionnelle * Offrir une expérience fluide sur **desktop et mobile** * Mettre en valeur les projets sans surcharger l’interface * Assurer de bonnes bases en **performance, accessibilité et référencement** --- ## 🛠️ Stack technique * **React** * **Framer Motion** (animations et transitions) * **Supabase** (gestion et affichage dynamique des projets) * **React Hooks** * **HTML / CSS / JavaScript** * Déploiement : **Vercel** --- ## ✨ Fonctionnalités clés * Interface **épurée et responsive** * Animations subtiles pour améliorer l’expérience utilisateur * Chargement dynamique des projets depuis Supabase * Liens directs vers : * Démonstrations en ligne * Dépôts GitHub * Structure optimisée pour le référencement (SEO de base) --- ## 📱 Expérience utilisateur * Conception **mobile-first** * Zones interactives claires et accessibles * Navigation simple et directe vers les projets * Mise en avant du contenu sans distraction inutile --- ## 🔍 Pourquoi ce portfolio Ce portfolio me permet de : * Présenter concrètement mon travail * Centraliser mes projets dans un espace maîtrisé * Offrir aux recruteurs et collaborateurs une vision claire de mes compétences --- ## 🔗 Accès * Je remercie aussi Mr Ben Ephraïm AGBANNON - Développeur Full-stack💻 •• Data Scientist qui m'aura inspiré par son travail 👉 **Voir les projets** [https://octavebahoun-houtoukpe.vercel.app/projects](https://octavebahoun-houtoukpe.vercel.app)/projects

# Web Wget | Premium Downloader ⚡ Télécharger des vidéos et fichiers via serveur distant avec **aria2c + ffmpeg** Supporte : DASH / HLS / MP4 / Vimeo / sites avec headers personnalisés --- ## Fonctionnalités * Téléchargement haute performance multi-segment * Suivi en temps réel des téléchargements via **SSE** * Historique des téléchargements et possibilité d’annulation * Support **User-Agent**, **Referer**, **Cookies** * Extension navigateur pour un clic-droit → télécharger directement depuis la page * Option fusion audio+video pour DASH / HLS --- ## Prérequis * Node.js >= 20 * npm ou yarn * aria2c installé ([https://aria2.github.io/](https://aria2.github.io/)) * ffmpeg installé (optionnel pour fusion audio/video) --- ## Installation 1. Cloner le dépôt ```bash git clone https://github.com/octavebahoun/Wget-manager-new cd Wget-manager-new ``` 2. Installer les dépendances ```bash npm install ``` 3. Créer le fichier `.env` à la racine ```env PORT=3000 ALLOWED_DOMAINS=vimeo.com,vimeocdn.com,youtube.com DOWNLOAD_TIMEOUT=3600 MAX_FILE_SIZE=5G ``` 4. Créer le dossier `downloads` à la racine si elle n'apparait pas apres npm install ```env Cela est necessaire pour récupérer vos téléchargement ``` --- ## Lancer le serveur ```bash node server.js ou utiliser nodemon server.js mais faire npm install nodemon en premier ``` Le serveur sera accessible à l’adresse : ``` http://localhost:3000 ``` --- ## Utilisation Web 1. Ouvrir `http://localhost:3000` dans votre navigateur 2. Coller l’URL du fichier / vidéo 3. Remplir les options facultatives : * Nom du fichier personnalisé * Referer (pré-rempli automatiquement par l’extension) * User-Agent (pré-rempli automatiquement) * Ignorer le certificat SSL si nécessaire 4. Cliquer sur **“Démarrer le téléchargement”** 5. Suivre la progression et gérer les téléchargements actifs ou l’historique --- ## Avec l’extension navigateur 1. Aller dans `chrome://extensions` (ou `edge://extensions`) 2. Activer **Mode développeur** 3. Cliquer sur **“Charger l’extension non empaquetée”** 4. Sélectionner le dossier `extension/` dans le dossier cloné 5. Cliquer droit sur un lien vidéo → **“Download with Web Wget”**// peut ne pas fonctionner 6. Vous pouvez aussi copier le lien clické sur l'icone de l'extension et telecharger la vidéo --- ## Endpoints disponibles * `POST /download` : démarrer un téléchargement * `GET /history` : récupérer l’historique * `GET /clear-history` : vider l’historique et supprimer les fichiers * `POST /cancel` : annuler un téléchargement * `POST /cancel-all` : annuler tous les téléchargements actifs * `GET /events` : SSE pour progression en temps réel * `GET /config` : récupérer la configuration (ALLOWED_DOMAINS, etc.) --- ## Contribution * Fork → branche → Pull Request * Issues pour bugs ou idées * Contributions possibles : * Extension Firefox * Support DASH/HLS avancé * Optimisation des performances et sécurité * Interface web / UI --- ## Licence MIT License © OctaveBAHOUN-HOUTOUKPE

## KeepBase 👌 C'est un projet qui vise à faciliter la maintenance en activité des solutions BaaS construites avec Supabase pour ne plus être supprimées en cas d'inactivité. Reste de la description, à venir....