Le showroom de la Tech Béninoise

## FingerLock verrouille automatiquement votre ordinateur après une période d'inactivité, détectée via votre clavier et votre souris. Plus besoin de verrouiller manuellement votre PC quand vous partez !

# 📚 DocScrap **DocScrap** est un projet de **web scraping pédagogique** dont l’objectif est de transformer des documentations techniques officielles (React, Node.js, Laravel, etc.) en **contenu structuré, traduit et exploitable** sous forme de **cours en Markdown**, exposés via une **API JSON** et affichés sur un site web. Le projet vise à faciliter l’apprentissage **par la documentation**, en la rendant plus accessible, organisée et lisible. --- ## 🎯 Objectifs du projet - Scraper des **documentations officielles** (React, Node, Laravel, etc.) - Extraire et structurer le contenu par : - langage - concepts - chapitres / sections - Convertir les données en **JSON propre** - Traduire le contenu (ex : EN → FR) - Afficher les cours sous forme **Markdown** sur un site web - Offrir une base exploitable pour : - apprentissage - révision - génération de cours personnalisés --- ## 🧠 Concept général ``` Documentation officielle ↓ Web Scraping ↓ Nettoyage & Parsing ↓ JSON structuré ↓ Traduction (optionnelle) ↓ Rendu Markdown ↓ Interface Web ``` --- ## 🧩 Stack technique (Phase 1) ### Backend / Scraping - **Node.js** - **Cheerio** (parsing HTML) - **Axios / Fetch** (requêtes HTTP) - **fs** (stockage local des données) - **Markdown-it** (ou équivalent pour le rendu) ### Format de données - **JSON** (structure des cours) - **Markdown** (affichage final) ### Frontend (plus tard) - interface implémenté https://docscrap.vercel.app/ [https://docscrap.vercel.app/] - Framework JS (React / Vue / autre) - Rendu Markdown dynamique - Navigation par langage → cours → sections --- ## 📁 Arborescence prévue (Phase 1) ``` docscrap/ │ ├── scraper/ │ ├── sources/ │ │ ├── react.js │ │ ├── node.js │ │ └── laravel.js │ │ │ ├── utils/ │ │ ├── fetchPage.js │ │ ├── parseHtml.js │ │ └── cleanText.js │ │ │ └── index.js │ ├── data/ │ ├── react/ │ │ └── hooks.json │ ├── node/ │ └── laravel/ │ ├── api/ │ └── server.js │ ├── frontend/ │ └── (à venir) │ ├── README.md └── package.json ``` --- ## 📌 Phase actuelle ### ✅ Phase 1 — Initialisation (EN COURS) - Définition du concept - Choix du stack - Définition de l’arborescence - Installation des dépendances 🛑 **Le développement fonctionnel commence après cette phase** --- ## 🚧 Phases futures (aperçu) ### Phase 2 – Scraping fonctionnel - Scraper une documentation cible - Extraire titres, paragraphes, blocs de code - Structuration JSON cohérente ### Phase 3 – Traduction - Intégration d’un système de traduction - Cache des traductions ### Phase 4 – API - Endpoints par langage / cours - Pagination et recherche ### Phase 5 – Frontend - Interface simple - Rendu Markdown - Navigation intuitive --- ## ⚠️ Avertissement légal Ce projet est à **but éducatif**. Le scraping doit : - respecter les **conditions d’utilisation** des sites sources - éviter toute surcharge de requêtes - citer clairement les sources originales --- ## 🤝 Contribution Le projet est en phase exploratoire. Les idées, améliorations et retours sont bienvenus. ``` Démarrez l'interface front avec cd front ``` ``` --- ## ✨ Vision long terme * Génération de parcours d’apprentissage * Comparaison entre frameworks * Mode offline * IA pour résumé et reformulation * Plateforme d’apprentissage basée sur la documentation --- --- ## 📝 Licence Ce projet est sous licence MIT. Voir le fichier [LICENSE](LICENSE) pour plus de détails. --- **Auteur:** Octave BAHOUN-HOUTOUKPE **Repository:** [github.com/octavebahoun/docscrap](https://github.com/octavebahoun/docscrap)

**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 | --- ## 🚀 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 | --- ## 📖 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. ---

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