Application Fullstack complète
TerminéDans le cadre de mon stage de fin de formation, mon projet a été de réaliser le site internet du club de tennis dans lequel je suis adhérent. Ce projet s'est réalisé entre février 2025 et novembre 2025. Initialement, la durée du projet devait se caler sur le temps de stage soit 10 semaines, de mi-février 2025 à mi-mai 2025. Cependant, j'ai continué à développer ce projet jusqu'au
J'ai réalisé ce projet seul de la phase de conception à la modélisation, du développement du backend à la réalisation du front-end, puis à la mise en place du déploiement. J'ai également réalisé une partie de la rédaction web du site.
Technologies utilisées
Captures d'écran
Accueil du site
Dashboard administrateur
Editeur d'articles avec fil d'Ariane
Page des articles
Fonctionnalités principales
Page d'accueil
La page d'accueil du site comporte entre autres la récupération des 3 derniers articles écrits, affiche les dernières galeries photos mises en ligne, un bandeau avec les différents partenaires du club et un formulaire de contact.
Dashboard administrateur
Le dashboard administrateur permet aux administrateurs de créer des catégories et tags pour les articles, d'ajouter des équipes et saisir leurs résultats, ainsi que des partenaires et d'éditer des galeries photos.
Éditeur d'articles
L'éditeur d'articles permet de rédiger des articles en ajoutant différents tags et une catégorie auxquels l'article sera lié. Il y a un éditeur de texte (Quill) permettant une rédaction intuitive des articles. Il est également possible d'ajouter des photos et des PDF à l'article. Il est également possible d'affilier un ou plusieurs partenaires à l'article.
Pages des articles et des galeries photos
Cette page centralise les différents articles rédigés. A partir du douzième article, une pagination se met en place pour une meilleur expérience utilisateur. Il en va de même à compter de la douzième galerie.
Saisie des résultats
Dans le dashboard, il est possible de créer des profils de joueurs. Ces différents profils pourront être intégrés à des équipes. Enfin, une dernière partie du bloc Résultats permet à un administrateur de saisir les résultats de cette équipe en prenant différents paramètres en compte tel que : match à l'extérieur ou domicile, la date du match, etc...
Partenaires
A l'instar des catégories, des résultats et des galeries, le club a la possibilité d'ajouter des partenaires qu'ils soient institutionnels ou commerciaux. Un onglet du dashboard permet de créer ce nouveau partenaire et de lui assigner une card avec son logo, son nom, une description et un lien cliquable vers son site internet (au besoin).
Authentification sécurisée
Implémentation de rôles utilisateurs (administrateur et rédacteur), validation systématique des tokens JWT, et contrôle rigoureux des endpoints selon l'authentification. Hachage des mots de passe avec BCrypt pour renforcer la confidentialité des données sensibles. Afin d'améliorer l'expérience utilisateur, une notification viendra lui rappeler que sa session arrive à expiration bientôt et l’invitera à la prolonger ou à se déconnecter.
Sécurisation des données
Utilisation des Data Transfert Object (DTO) qui assurent un transfert sécurisé et précis des données entre les différentes couches sans exposer la totalité des entités. Création d'exceptions personnalisées dans le but de sécuriser l'accès aux données.
Informations complémentaires
Défis techniques
- Ce projet étant le premier à mener d'un bout à l'autre de son développement, j'ai connu plusieurs pics de difficultés comme ceux exposés ci-dessous.
- La conceptualisation et la modélisation ont été un premier enjeu de taille car ces étapes ont déterminé la direction que je devais prendre pour la suite de projet.
- La réalisation du backend a été également un moment difficile car il me fallait prendre en main Java et Spring Boot tout en devant réaliser au mieux la structure que j'avais établi à l'étape précédente.
- Le passage au front-end fut également un challenge de taille car il fallait faire le faire communiquer avec la base de données via mon backend. J'ai également découvert l'utilisation de React durant cette étape.
- Le déploiement a été un véritable challenge car c'était la première fois que je mettais en ligne une application de cette taille. Il a été effectué sur un serveur virtuel via la conteneurisation de l'application avec Docker, préalablement installé dans le VPS.
Résultats
Application en ligne
Challenges techniques relevés
Apprentissage de plusieurs nouvelles technologies
Intéressé par ce projet ?
N'hésitez pas à découvrir le site en ligne.