Présentation
MardoTech Solutions est un projet de site vitrine moderne développé pour présenter une entreprise fictive spécialisée dans l’ingénierie numérique, le développement logiciel et les systèmes embarqués à Lubumbashi.
Le projet permet de démontrer la conception d’une présence numérique professionnelle sans présenter MardoTech comme un véritable client.
Objectifs
Le site a été conçu pour répondre à plusieurs objectifs :
- établir une identité visuelle professionnelle ;
- présenter clairement le catalogue des services ;
- exposer une galerie de projets ;
- faciliter la prise de contact ;
- offrir une navigation fluide sur ordinateur et téléphone.
Architecture technique
MardoTech Solutions est une Single Page Application développée avec React.js.
L’application utilise un point d’entrée unique. React Router DOM intercepte les changements d’adresse et affiche les différentes vues sans recharger complètement la page.
Le projet suit une architecture organisée autour de composants réutilisables et de pages distinctes.
Sections principales
Le site comprend cinq parties principales :
- Accueil ;
- À propos ;
- Services ;
- Projets ;
- Contact.
La Navbar et le Footer sont utilisés sur toutes les pages afin de conserver une navigation et une identité visuelle cohérentes.
Technologies utilisées
React.js
React constitue la bibliothèque principale de l’interface. Il permet de diviser le site en composants modulaires et réutilisables.
Vite.js
Vite est utilisé pour initialiser le projet, lancer le serveur de développement et produire les fichiers optimisés destinés à la production.
Tailwind CSS 4
Tailwind CSS assure la création de l’interface responsive, la gestion des couleurs et la mise en page du site.
React Router DOM
React Router DOM gère les différentes routes de la SPA sans rechargement complet de la page.
Lucide React
Lucide React fournit les icônes vectorielles utilisées dans les services, la navigation et les coordonnées.
Fonctionnalités
Le projet comprend notamment :
- une navigation fluide entre les différentes vues ;
- une interface responsive ;
- une présentation structurée des services ;
- une galerie de projets ;
- un formulaire de contact reposant sur un lien
mailto:; - des informations de localisation et de contact ;
- des icônes cohérentes grâce à Lucide React.
Déploiement
Le code source est versionné avec Git et stocké dans un dépôt GitHub privé.
Le site a été déployé sur Netlify à partir du dossier de production généré par Vite.
Un fichier _redirects permet à React Router de conserver le fonctionnement des routes après l’actualisation d’une page.
Limites actuelles
Le projet fonctionne uniquement côté frontend. Il ne possède pas encore de backend ni de base de données.
Le formulaire de contact ouvre le logiciel de messagerie de l’utilisateur au lieu d’envoyer directement les messages à travers un serveur.
Évolutions possibles
Le projet pourrait évoluer avec :
- un backend Node.js et Express ;
- une base de données ;
- un véritable système d’envoi de messages ;
- un CMS comme Strapi ou Contentful ;
- une version bilingue française et anglaise.
