rf,kdgmlllllw fbbbbbbbbbbbbm

1. F R É D É R I C G . K O U T C H I H O U N
PLATEFORME DE VALORISATION
DES MÉTIERS EN VOIE DE
DISPARITION
FORMATION : DCLIC – DÉVELOPPEMENT WEB
COACH:
LISSASSI Paul Gildas
Romain DJOGBENAGNON
1

2. SOMMAIRRE
• Introduction
• Contexte du projet
• Problématique
• Objectif général du projet
• Justification du choix
• Présentation du projet
• Fonctionnement de la plateforme
• Public cible et cas dʼusage
• Choix des technologies
• Raisons des choix
• Conception de lʼapplication – Architecture
générale
• Organisation frontend/backend & modèle
de données
• Maquettes
• Fonctionnalités développées
• Démonstration ou captures
• Défis rencontrés & solutions
• Déploiement & tests
• Conclusion & perspectives
• Références
• Remerciements / Questions

3. Face aux menaces pesant sur le patrimoine culturel africain, notamment
la disparition des métiers traditionnels, la plateforme AfricaMétiers a été
créée comme solution numérique intuitive. Elle vise à préserver,
promouvoir et transmettre ces savoir-faire uniques en les rendant
accessibles aux artisans, aux passionnés et au grand public, comblant
ainsi les lacunes des plateformes existantes.
INTRODUCTIO
N
3

4. CONTEXTE DU
PROJET
• LʼAfrique possède un patrimoine artisanal et
culturel unique, incarné par des métiers
ancestraux (tissage, sculpture, guérison
traditionnelle etc..).
• Ces savoir-faire sont menacés par la
modernisation, lʼurbanisation et le manque de
valorisation.
• La numérisation offre une opportunité de
préserver et promouvoir ce patrimoine auprès dʼun
large public.
4

5. Comment préserver et promouvoir les savoir-faire traditionnels
africains en voie de disparition, tout en les rendant accessibles
et attractifs via une plateforme numérique moderne ?
PROBLÉMATIQU
E
5

6. Créer une plateforme web interactive pour valoriser
les métiers traditionnels africains menacés,
sensibiliser le public et encourager la transmission
des savoir-faire.
OBJECTIF
GÉNÉRAL DU
PROJET
6

7. Ma passion pour la culture africaine et le numérique, combinée
à ma volonté de préserver ce patrimoine, s'aligne parfaitement
avec mes compétences en développement web fullstack pour
ce projet.
JUSTIFICATION DU
CHOIX
7

8. AfricaMétiers
PRÉSENTATION DU PROJET
Est une Plateforme web permettant de
découvrir, promouvoir et de préserver
les métiers traditionnels africains via des
fiches métiers, événements, et outils
dʼinteraction communautaire.
8

9. La plateforme permet la découverte approfondie des métiers
grâce à des fiches détaillées incluant du texte, des images et
des vidéos(pour plus tard). Elle gère également l'inscription et
la connexion des utilisateurs, et assure l'organisation et la
promotion d'événements tels que des ateliers et des
expositions.
FONCTIONNEMENT DE
LA PLATEFORME
9

10. Public cible : Jeunes, artisans, chercheurs, organisateurs
dʼévénements, amateurs de culture africaine, personnes du
troisième âge.
Cas dʼusage : Un jeune découvre le métier de tisserand et sʼinscrit
à un atelier ; un artisan valorise son savoir-faire et offre même des
formations ; un admin gère les fiches métiers.
PUBLIC CIBLE ET CAS
DʼUSAGE
10

11. React.js + Vite,
Axios, CSS
CHOIX DES
TECHNOLOGIES
11
Frontend Backend
Node.js,
Express.js
Base de données :
MongoDB Atlas
Outils annexes : GitHub,
Render, Postman, Figma
MongoDB Compass

12. J’ai choisi Node.js et Express.js pour un backend JavaScript
performant, et MongoDB comme base de données NoSQL
flexible et évolutive.
RAISONS DES
CHOIX
TECHNOLOGIQUES
J’ai choisi React.js pour avoir une interface dynamique et
modulaire, Vite pour accélérer le développement, et Axios
pour une gestion robuste des requêtes API.
FRONTEND
BACKEND
12

13. CONCEPTION DE
LʼAPPLICATION –
ARCHITECTURE GÉNÉRALE
Utilisateur Frontend React Backend Node.js/Express) MongoDB
→ → →
ARCHITECTURE EN 3 COUCHES :
13
Il y a aussi la Communication via API REST lorsque l’utilisateur soumets
des données ou fait une requête.

14. ORGANISATION
FRONTEND/BACKEND &
MODÈLE DE DONNÉES
Composants réutilisables, navigation fluide,
formulaires sécurisés.
FRONTEND
14
Routes pour lʼauthentification, API développée avec
Express.js, gérant l'authentification et les utilisateurs.
BACKEND
Base MongoDB stockant les utilisateurs, et sessions,
avec Mongoose.
MODÈLE DE
DONNÉES

15. MAQUETTES
15
https://www.figma.com/design/oTXvdVbL5X
9iX7UaDd6gqb/
Maquette complète disponible sur:

16. FONCTIONNALITÉS
DÉVELOPPÉES
16
Fonctionnalités clés :
• Validation en temps réel des champs
• Authentification (inscription, connexion, mot de passe oublié)
• Hachage sécurisé des mots de passe avec bcrypt
• Vérification de l'unicité de l'email
• Messages d'erreur contextuels et informatifs
• Interface responsive et accessible
• Découverte des métiers (images, descriptions)

17. DÉMONSTRATION OU
CAPTURES
17

18. DÉFIS RENCONTRÉS &
SOLUTIONS
18
• Coder la maquette Figma
Difficultés initiales pour établir la communication entre
l'application React et l'API Express, notamment avec la gestion
des CORS et la configuration des requêtes Axios, résolus par
une configuration CORS correcte dans Express, centraliser la
gestion des erreurs via Axios et mis en place d’un middleware
de logging pour le débogage des requêtes
• Connexion Frontend-Backend
• Déploiement Render :
J’étais obligé de modifier le design de la plate-forme
Erreurs 404 lors du déploiement de l'application React sur
Render, problèmes de routage côté client non gérés par le
serveur. Pour y remédier, j’ai configuré une règle de réécriture
pour rediriger les routes vers index.html, différencié les
environnements de développement et de production via des
variables, et optimisé le build Vite.

19. DÉPLOIEMENT & TESTS
19
• Liens de l'application web :
https://africa-metiers.onrender.com/
• Lien du serveur :
• Difficultés de déploiement
https://africametiers.onrender.com/
Temps de réponse élevé au premier accès (30+ secondes). Causé
par la limitation du plan gratuit Render (mise en veille des
serveur après 15min d'inactivité).
La solution a été simple: Documentation du problème et mis en
place d'un agent IA qui ping le serveur chaque 10min évitant sa
mise en veille.
• Outils de test
Postman API , console du navigateur, tests manuels.

20. CONCLUSION &
PERSPECTIVES
20
• Ce que j’ai appris:
Grâce à cette formation et par le biais de ce projet, j’ai acquis
des connaissances en développement fullstack, en gestion de
projet, en résolution de problèmes techniques et la valorisation
du patrimoine par le numérique.
• Évolutions possibles :
1.Expansion Géographique et Culturelle Multilinguisme: Interface en
anglais, français, et langues locales (Yoruba, Swahili, Hausa)
2.Contenu régional : Adaptation aux spécificités culturelles par pays
3.Partenariats institutionnels : Collaboration avec l'UNESCO,
ministères de la culture
4.Réseau d'ambassadeurs : Artisans représentants par région
• Évolutions Technologiques :
J’ai prévu pour AfricaMétiers un tableau de bord admin, un système de
commentaires/évaluations et du contenu multimédia; une application mobile avec
React Native sera développée et accompagnée d’optimisations techniques pour
améliorer la sécurité et la performance.

21. REFERENCE
• GOOGLE
21
• QUANT
• Afrikatiss

22. 22

23. MERCI
P O U R V O T R E AT T E N T I O N