CodeToWin - Hackathons Tech Africains

1. Présentation générale du projet :
CodeToWin.pro est une plateforme numérique innovante dédiée à l'émulation, à la découverte et à l'accélération des talents technologiques à travers l'Afrique. Orientée vers les hackathons compétitifs, les challenges de code et les projets appliqués, la plateforme crée une passerelle directe entre développeurs, designers, créateurs de solutions numériques et donneurs d'ordre (organisations, incubateurs, entreprises et sponsors internationaux).

L'ambition centrale de CodeToWin est de substituer aux CV traditionnels des preuves concrètes et vérifiables de compétences (proof of work, code déposé, soutenances vidéo et prototypes fonctionnels), tout en offrant aux organisateurs une solution clé en main pour animer des compétitions technologiques d'envergure.

2. Contexte et problématique terrain :
En Afrique, le vivier de jeunes compétences en programmation et en ingénierie logicielle connaît une croissance exponentielle. Pourtant, la mise en relation entre ces talents et les opportunités professionnelles réelles reste freinée par plusieurs obstacles structurels majeurs :

• Fragmentation et précarité des outils d'organisation : La majorité des hackathons reposent sur des outils disparates (formulaires Google éparpillés, groupes WhatsApp ou serveurs Discord désordonnés, tableurs de notation manuels), provoquant des pertes de données et une expérience dégradée pour les participants comme pour les juges.

• Difficulté de suivi et de recueil des livrables : Réceptionner simultanément des dizaines de projets avec dépôts GitHub, vidéos de pitch, démos interactives et réponses aux contraintes d'architecture requiert un pipeline de soumission rigoureux et sans faille.

• Absence de visibilité pérenne pour les talents : Une fois le hackathon clôturé, le travail fourni par les équipes est souvent oublié au lieu d'alimenter un profil public valorisable auprès de recruteurs et d'investisseurs.

Problématique centrale résolue :
Comment concevoir et développer une plateforme web unifiée, ergonomique et hautement réactive, capable d'orchestrer tout le cycle de vie d'un hackathon (onboarding, inscription d'équipe, espace de travail en direct, soumission multi-critères et classement) tout en offrant une expérience utilisateur stimulante et professionnelle ?

3. Besoins et objectifs métier identifiés :
Pour garantir la réussite des hackathons et l'engagement continu des communautés tech, la plateforme devait répondre à des impératifs précis :

• Parcours d'inscription et d'onboarding fluide : Permettre aux talents de s'inscrire en quelques secondes par email avec OTP sécurisé ou via OAuth (Google, GitHub) en choisissant leur rôle (Participant ou Organisateur).

• Espace de travail et soumission assistée : Mettre à disposition un wizard multi-étapes guidé permettant de renseigner l'équipe, la stack, le repo GitHub, le pitch vidéo et les critères d'évaluation sans risque de perte de données.

• Console événementielle pour les organisateurs : Permettre la création complète de challenges (dotations en FCFA/USD, dates limites, règles du jury et modération).

• Annuaire des talents et Leaderboard : Afficher le classement, les compétences vérifiées et l'historique de chaque développeur.

4. Mon rôle et périmètre d'intervention :
En tant que concepteur UI/UX et développeur frontend sur le projet, mon intervention a couvert l'ensemble du cycle de développement de l'interface et son articulation avec les services backend :

• Conception UI/UX & Système Visuel : Élaboration des maquettes, choix d'une identité sombre inspirée des meilleurs outils développeurs (accent émeraude #059669), typographie moderne (Satoshi, Inter, Space Grotesk) et ergonomie des tableaux de bord.

• Développement Frontend avec React & Next.js : Implémentation modulaire des pages, des composants interactifs, du stepper de soumission et des modales d'invitation d'équipe.

• Intégration complète des services & Connexion Backend :

  • Gestion d'authentification robuste (AuthContext) : login/register, vérification OTP, réinitialisation de mot de passe, sessions persistantes et social login OAuth.

  • Création du client HTTP centralisé avec injection automatique de tokens Bearer, gestion du rafraîchissement 401 et requêtes multipart.

  • Connexion aux endpoints métier : listing et détails des hackathons, inscription aux compétitions, annuaire des talents et dépôt des livrables.

7. Solutions techniques mises en œuvre :

• Composants réutilisables et architecture modulaire : Création d'un ensemble de composants réutilisables (cartes de hackathons, badges de prix, modales d'équipe, inputs avec validation instantanée).

• Client API centralisé et typé : Mise en place d'une couche d'abstraction (client.js) encapsulant toutes les méthodes HTTP (GET, POST, PUT, PATCH, DELETE) avec injection automatique du Bearer token et détection automatique des requêtes JSON vs. FormData.

• Système d'authentification complet : Inscription avec OTP sécurisé, connexion par identifiants ou via GitHub et Google, changement de mot de passe et réinitialisation par email.

8. Fonctionnalités clés développées :

• Catalogue et filtres de Hackathons : Découverte des compétitions actives, passées et à venir, avec affichage clair des dotations en FCFA et USD.

• Wizard de dépôt de projet : Processus guidé en 4 étapes pour soumettre le code source GitHub, la démo en ligne, la vidéo de présentation et les réponses techniques demandées par le jury.

• Annuaire des Talents & Leaderboard : Répertoire des développeurs avec compétences vérifiées, projets réalisés et possibilité d'inviter des membres dans son équipe.

• Console d'administration et d'organisation : Espaces dédiés à la gestion des participants, des soumissions et de l'avancement des défis.

5. Défis techniques et d'ingénierie résolus :

• Persistance et résilience de l'espace de travail (Workspace State) : Durant un hackathon, le compte à rebours crée une pression intense. Pour éviter qu'un participant perde sa saisie en cas de fermeture accidentelle ou de déconnexion réseau, j'ai implémenté un système de synchronisation en temps réel dans le stockage local (hack_agent_workspace_state) sauvegardant chaque étape du formulaire (titre, pitch, repo, demo, membres d'équipe).

• Séparation stricte des rôles et des flux d'écrans : La plateforme dessert deux publics distincts : les développeurs compétiteurs et les organisateurs d'événements. Il a fallu orchestrer des navigations contextuelles, des permissions spécifiques et des interfaces adaptées à chaque rôle sans multiplier inutilement les bundles de code.

• Gestion fine des erreurs et résilience réseau : Prise en charge des interruptions réseau, des jetons JWT expirés avec invalidation propre du token et notification utilisateur instantanée.

6. Conception UI/UX et ergonomie orientée développeurs :

• Palette sombre technologique : Fond ardoise sombre et noir obsidienne réduisant la fatigue oculaire lors des nuits de hackathon, rehaussé de touches vert émeraude symbolisant l'énergie, l'innovation et la réussite.

• Composants de confiance et preuves visuelles : Badges de statut en temps réel (Live, En cours d'évaluation, Vérifié), chronomètres interactifs, médailles de classement et tags de technologies (React, Next.js, Python, AI/ML).

9. Choix technologiques et justification :

• React & Next.js : Rendu ultra-rapide, gestion modulaire des états, écosystème mature et facilité de maintenance du code.

• Tailwind CSS : Intégration rapide d'un design sur mesure, respect strict de la charte graphique et cohérence parfaite entre mobile, tablette et desktop.

• JWT & Bearer Tokens : Standard d'authentification robuste et sécurisé pour découpler le frontend des microservices backend.

• Typographies Satoshi, Space Grotesk & Inter : Alliance d'une typographie de titrage moderne et percutante avec une lisibilité optimale du code et des données chiffrées.

10. Valeur apportée et impact direct :

• Crédibilité et professionnalisme accrus : Une interface moderne qui rassure immédiatement les partenaires institutionnels et les sponsors internationaux finançant les prix des hackathons.

• Suppression des abandons lors des soumissions : Grâce au wizard à étapes et à la sauvegarde continue de l'état, les participants ne perdent plus leurs soumissions à l'approche de la clôture des dépôts.

• Valorisation durable des talents : La plateforme constitue un tremplin concret d'embauche et de visibilité pour les développeurs du continent.

11. Résultats et statut actuel :

• Plateforme en ligne et accessible : Disponible publiquement sur codetowin.pro.

• Parcours fluide et complet : Expérience sans couture de la page d'accueil jusqu'à la soumission de projet et la consultation des profils de talents.

• Architecture pérenne : Codebase frontend propre, modulaire et prête à évoluer pour accueillir de nouvelles fonctionnalités (chat en direct, vote du public, évaluation automatisée de code).

12. Synthèse et enseignements personnels :
Ce projet illustre ma capacité à intervenir sur des problématiques logicielles complètes : concevoir une identité visuelle attrayante adaptée à une cible exigeante de développeurs, structurer une architecture frontend robuste sous React/Next.js, et connecter avec rigueur des services métier et d'authentification réels.