Africonet

La diaspora africaine vit entre deux mondes — un pays d'origine et un pays de résidence — souvent avec une connexion limitée, et sans lieu unique pour sa vie professionnelle et sociale. Africonet est une super-app professionnelle et sociale pour cette communauté : se connecter avec des Africains à proximité et dans le monde, créer son profil et son CV, suivre des personnes, discuter et trouver un emploi.

Le cap est une sensation : la structure professionnelle de LinkedIn avec la chaleur et la rapidité de WhatsApp — assez crédible pour les recruteurs, assez rapide et chaleureuse pour les échanges du quotidien.

Africonet en est à ses débuts. Ce qui existe aujourd'hui, c'est la conception produit de la version 1 et le design system avec sa bibliothèque de composants sur lesquels elle sera construite. Les fonctionnalités — comptes, profils, fil et volet emploi — sont conçues mais pas encore développées.

La version 1 en est la colonne vertébrale — comptes, profil/CV, abonnements, fil, messagerie, recherche et notifications — plus le volet emploi (en ligne, sur site et freelance). Les volets suivants, comme une place de marché, l'apprentissage et les paiements, ont chacun leur propre cahier de conception pour les versions ultérieures.

Le cahier de conception est le contrat unique auquel les plannings web et Android se réfèrent par identifiant d'écran, pour que les deux applications ne divergent pas. Ses principes :

• —L'origine partout. Chaque profil, publication et offre indique d'où l'on vient et où l'on vit — la signature d'Africonet, rendue visible par des drapeaux et des étiquettes.
• —Rapide et léger. Pensé pour les connexions faibles : squelettes de chargement, images progressives, mode économie de données et vrais états vides — jamais d'écran blanc.
• —Un système, deux interfaces. Les mêmes tokens et composants : navigation en bas sur Android, colonne latérale et barre supérieure sur le web, qui se replient en navigation basse sur mobile.
• —Accessible par défaut. Contrastes WCAG AA dans les deux thèmes, zones tactiles d'au moins 44 px, mode sombre complet.

L'application web repose sur Next.js 16 (App Router), React 19, TypeScript et Tailwind CSS 4. Les six premiers jours du planning web sont terminés :

• —Tous les tokens de couleur, clair et sombre, repris exactement du prototype validé et exposés en variables CSS et en @theme Tailwind, avec un gestionnaire de thème qui applique le thème avant le premier affichage pour éviter tout flash du mauvais thème.
• —Une échelle typographique, des tokens d'arrondis et des primitives de mise en page.
• —Une bibliothèque de 25 composants : boutons, champs texte et mot de passe, saisie de code à usage unique, recherche, étiquettes dont l'étiquette d'origine, avatars avec présence et badges de vérification, cartes de publication, d'offre, de profil et d'entreprise, lignes de liste, badges, onglets, panneaux, notifications, squelettes et états vides.
• —Un shell applicatif responsive : barre latérale, barre supérieure et navigation basse.

Un constat d'accessibilité est documenté plutôt que caché : le texte blanc sur le vert de la marque atteint environ 3,2:1 — suffisant pour les grands textes et les composants d'interface selon WCAG AA, pas pour les petits textes — d'où la consigne d'utiliser le vert plus foncé pour les petits textes sur vert.

Les prochaines étapes du planning web sont le modèle de données et les règles de sécurité Firebase, l'authentification et un parcours d'inscription qui recueille la double origine — puis le profil/CV, le fil et la messagerie, et le volet emploi. L'application Android suivra le même cahier avec Jetpack Compose.

• —Un contrat de conception écrit, référencé par identifiant d'écran, garde deux plateformes cohérentes.
• —Construire le système avant les écrans : chaque fonctionnalité réutilisera ces composants.
• —Noter les compromis d'accessibilité là où la personne suivante les verra.