R
R
Lab-XploreR
Mon tout premier site web : mon laboratoire d'exploration pour coder sans limites.

RX

XploreR
L'idée :
L'idée de départ était simple : créer un site web pour mettre en avant mon profil et mes compétences à travers un portfolio. Mais très vite, ce projet est devenu bien plus qu'une simple vitrine.

Je voulais en faire un véritable terrain d'exploration, un laboratoire personnel pour apprendre et expérimenter.
J'y ai intégré des fonctionnalités telles que la gestion des utilisateurs, les systèmes de connexion, de réinitialisation de mot de passe, un espace profil personnalisé, ainsi qu'un espace projet.
Cet espace me permet de tester nombreuses choses, comme la manipulation de bases de données, l'intégration d'API, et bien d'autres outils essentiels au développement web.

Pour ce projet, j'utilise Laravel pour le back-end, tandis que le front-end repose sur HTML pour la structure, CSS pour le style, et JavaScript pour les interactions dynamiques.
Les fonctionnalités du site :
Authentification et Admin
Pour ce projet, j'ai mis en place un système complet de gestion des utilisateurs.
J'ai utilisé Laravel Breeze pour gérer l'authentification (inscription, connexion, déconnexion), afin de partir d'un socle simple, rapide à configurer et facilement personnalisable.
J'ai ensuite modifié la table users pour y ajouter des champs supplémentaires comme le prénom, le genre, la ville, et le pays, ect. afin d'enrichir les profils et d'exploiter des données plus détaillées.

J'ai également développé un espace administrateur, incluant un tableau dynamique avec Livewire, permettant de consulter, trier et modifier les informations des utilisateurs, notamment leur rôle (utilisateur, admin).
Les données sont générées via des factories pour tester l'interface avec un grand nombre de profils.
Un système de soft delete a été mis en place, permettant de désactiver temporairement un compte utilisateur tout en conservant ses données, avec la possibilité de le restaurer si besoin.

Enfin, j'ai intégré une section statistiques, affichant des données utiles telles que le nombre total d'utilisateurs, la répartition par genre, le nombre d'inscriptions cette semaine, ect. ainsi qu'un tableau de répartition des utilisateurs selon leur tranche d'âge, genre et rôle.
Cette partie m'a permis de combiner traitement de données, visualisation, et logique métier.

Gestion du profil et suivi des modifications
J'ai ensuite conçu une page de profil et de paramètres permettant à chaque utilisateur de consulter, modifier ou supprimer ses données personnelles de manière autonome.
En parallèle, j'ai prévu un accès privilégié pour les administrateurs, leur permettant d'accéder aux profils des utilisateurs, de modifier ou de supprimer certaines informations, sans que l'utilisateur concerné en soit informé directement.

Pour garantir plus de transparence et de traçabilité, j'ai donc mis en place un système d'historique de connexions et de suivi des modifications.
Toute action effectuée sur un compte est enregistrée dans une table dédiée de la base de données : cela inclut notamment les modifications faites par un admin sur les données d'un utilisateur.
Ce suivi permet de vérifier à tout moment si un profil a été modifié et par qui.

De plus, pour renforcer la sécurité des accès administrateurs, j'ai intégré un suivi des connexions, incluant l'adresse IP, le navigateur utilisé le système d'exploitation, et une localisation approximative.
Ces données sont légalement collectables dans le cadre d'une administration, mais ne sont visibles que par les administrateurs eux-mêmes, et uniquement pour leurs propres connexions.

Création de mon portfolio
J'ai ensuite réalisé mon portfolio, qui était à l'origine le cœur du projet.
Cette fois, j'ai souhaité mettre davantage l'accent sur le design et l'expérience visuelle.
J'ai intégré des éléments dynamiques comme une carte de présentation interactive (effet de rotation) et un carrousel permettant de naviguer entre mes différents projets, afin de proposer une navigation plus fluide et agréable.

Pour faciliter la mise à jour de mes réalisations, j'ai également développé un système de gestion de projets connecté à une base de données, me permettant d'ajouter, modifier ou supprimer un projet facilement depuis une interface dédiée.

Enfin, j'ai mis en place un formulaire de contact simple et accessible, permettant à toute personne intéressée par mon travail de me contacter directement.
Le portfolio reste volontairement sobre et clair, tout en mettant en valeur mes compétences techniques et créatives.

Pages spécifique et pages systèmes
Pour rendre le site plus complet et conforme aux bonnes pratiques du web, j'ai ajouté plusieurs pages spécifiques : les mentions légales, la politique de confidentialité ainsi que le plan du site.
Ces pages permettent d'informer l'utilisateur sur l'usage de ses données, la responsabilité du site et d'améliorer l'organisation globale du contenu.

J'ai également mis en place des pages systèmes personnalisées, notamment pour les erreurs 404 (page non trouvée) et 503 (site en maintenance).
La page 404 est associée automatiquement aux chemins inexistants, tandis que la page de maintenance repose sur un middleware spécifique.
Celui-ci me permet de placer certaines routes ou pages en maintenance temporaire, tout en conservant le reste du site accessible normalement.
Cela offre plus de flexibilité pour les mises à jours futures.

Mini-projets en parallèle
Pour continuer à apprendre, pratiquer et élargir mes compétences, j'ai lancé une série de mini-projets techniques, chacun centré sur une problématique ou une technologie spécifique.
Le premier, intitulé Money Tracker, permet de gérer son budget personnel : l'utilisateur peut y enregistrer ses dépenses et revenus, définir un budget mensuel, et visualiser l'évolution financière à l'aide de graphiques clairs et dynamiques.

J'ai ensuite réalisé une application météo, basée sur l'API de WeatherAPI.
Ce projet m'a permis d'exploiter des données externes, tout en travaillant l'expérience utilisateur (UX).
L'interface propose un carrousel interactif pour afficher les données clés, ainsi qu'un graphique réalisé avec Chart.js représentant l'évolution de la température sur les 24 prochaines heures.
L'application se connecte directement à la ville renseignée dans le profil de l'utilisateur pour une expérience plus personnalisée.

Enfin, mon projet en cours, Artix, mêle art et mathématiques.
L'objectif est de créer des visualisations inspirées d'œuvres artistiques, en utilisant des algorithmes.
Le premier exemple reprend le style de Piet Mondrian, avec un générateur qui recrée aléatoirement des compositions visuelles.
Ce projet me permet d'explorer à la fois le code créatif, la géométrie, et la logique algorithmique.
Améliorations à venir :
Bien que le projet soit déjà fonctionnel, plusieurs axes d'amélioration sont prévus pour le rendre encore plus performant et professionnel.

Je compte optimiser les performances, amélioré la qualité du code grâce à un nettoyage approfondi et à l'ajout de tests automatisés pour garantir la robustesse des fonctionnalités.

Côté sécurité, je veillerai à maintenir le projet à jour afin de mieux protéger les données des utilisateurs.

L'expérience utilisateur sera également enrichie par des animations plus fluides, une navigation optimisée et des feedbacks clairs.

Enfin, je prévois d'améliorer l'accessibilité ainsi que le référencement SEO pour rendre le site plus visible et accessible à un public plus large.
Pour résumer :
J'ai vraiment adoré réaliser ce projet et explorer l'univers du développement web.

Apprendre un nouveau langage, concevoir toutes ces fonctionnalités, tester, corriger, améliorer... tout ça m'a passionné.
Je sais que le site est loin d'être parfait, mais c'est justement ce qui me motive : il me reste encore énormément de chose à découvrir, à apprendre et à maîtriser.
Ce qui devait être à l'origine un simple site vitrine est devenu un projet personnel dont je suis fier.

J'ai hâte de continuer, d'ajouter de nouvelles fonctionnalités, de créer d'autres mini-projets et de progresser pas à pas dans ce domaine fascinant.
Mon objectif :
Mon objectif avec ce projet est d'aller encore plus loin, de pousser mes limites.

Je souhaite explorer de nouveaux frameworks comme Tailwind CSS ou encore Vue.js, ajouter régulièrement de nouvelles fonctionnalités et développer de nouveaux projets au sein du site.

L'idée est d'expérimenter, d'apprendre en continu, et de gagner en confiance.

À terme, mon but est de créer une application ou un site web complet, capable de répondre à un besoin concret et d'apporter une vraie valeur ajoutée.