NeetFlex : Gestionnaire d'artistes et d'évènements
Quel est le commanditaire du projet et quelle est sa demande ?
Le commanditaire du projet est un client souhaitant une application web capable de gérer des évènements et des artistes musicaux. Le client souhaite deux parties, une s’orientant vers un développement full stack et une autre partie, avec l’utilisation d’une API.
Quelles sont les grandes lignes du cahier des charges ?
Pour la partie fullstack, l'application doit permettre de gérer les utilisateurs, les artistes et les évènements. La page d'accueil est publique, mais le reste de l'application est protégé par une connexion. Les administrateurs peuvent gérer les artistes et consulter la liste des utilisateurs, tandis que les utilisateurs peuvent créer, modifier ou supprimer leurs propres évènements, s'inscrire à des évènements et consulter les artistes. Les artistes doivent avoir un nom, une description et une image, et les évènements doivent inclure un nom, une date et un artiste associé.
La partie API est publique et accessible sans authentification. Elle permet de récupérer la liste des artistes et des évènements, ainsi que leurs détails. Une documentation Swagger doit être disponible à l'adresse /api/doc.
Pour la partie front-end, développée en React avec ViteJs, l'application doit afficher les listes et détails des artistes et évènements. Les utilisateurs peuvent filtrer et trier les artistes et évènements, et naviguer entre les pages via des liens cliquables.
Enfin, l'application doit utiliser SQLite, avec les migrations commitées mais pas la base de données. Les parties fullstack et API doivent être des applications distinctes, livrées dans un ou deux repositories publics.
Capture d'écran de la documentation de l'API Neetflex
Avant tout, c’est quoi fullstack ?
La partie fullstack désigne une application web qui combine à la fois un back-end (côté serveur) et un front-end (côté client) pour offrir une expérience utilisateur complète. Dans ce projet, le front-end et le back-end a été développé avec Symfony.
Mais c’est quoi une API ?
Une API (Application Programming Interface) est une interface qui permet à différentes applications ou systèmes de communiquer entre eux. Elle permet, par exemple, de récupérer la liste des artistes ou les détails d'un évènement via des requêtes HTTP. L'API est indépendante de l'application fullstack et peut être utilisée par d'autres systèmes, comme l'application front-end en React.
Description détaillée des différentes étapes de Neetflex
Étape 1 : Analyse des besoins et préparation
- Nous avons commencé par analyser le cahier des charges pour bien comprendre les fonctionnalités attendues et les contraintes techniques, comme l'utilisation de SQLite et la séparation des parties fullstack et API. Une planification a été mise en place pour répartir les tâches entre les deux membres de l'équipe : l'un s'est concentré sur la partie fullstack, tandis que l'autre s'est occupé de l'API et du front-end en React.
Étape 2 : Développement de la partie fullstack
- La partie fullstack a été développée en Symfony. Nous avons d'abord mis en place l'authentification et la gestion des rôles (admin et utilisateur). Ensuite, les fonctionnalités principales ont été implémentées : gestion des artistes (création, modification, suppression par l'admin), gestion des évènements (création, modification, suppression par les utilisateurs), et inscription/désinscription aux évènements. Une attention particulière a été portée à la navigation, qui s'adapte au rôle de l'utilisateur, et à la sécurisation des pages protégées. Enfin, des fonctionnalités supplémentaires, comme la recherche d'artistes par nom et le filtrage des évènements par date, ont été ajoutées.
Étape 3 : Développement de l'API
- En parallèle, l'API a été développée pour être publique et accessible sans authentification. Les routes principales ont été créées pour récupérer la liste des artistes, les détails d'un artiste, la liste des évènements et les détails d'un évènement. Une documentation Swagger UI a été mise en place pour faciliter l'utilisation de l'API. Cette partie a été conçue pour être indépendante de la partie fullstack, conformément aux exigences.
Étape 4 : Développement de la partie front-end
- La partie front-end a été réalisée en React avec ViteJs. Quatre pages principales ont été développées : une liste des artistes, une page de détails pour un artiste, une liste des évènements, et une page de détails pour un évènement. Les fonctionnalités de filtrage et de tri des artistes et évènements ont été implémentées côté client pour garantir une expérience utilisateur fluide. La navigation entre les pages a été rendue intuitive grâce à des liens cliquables.
Étape 5 : Tests et intégration
- Une fois les différentes parties développées, nous avons procédé à des tests pour vérifier le bon fonctionnement de chaque fonctionnalité. Les migrations ont été commitées, mais la base de données SQLite elle-même a été exclue des repositories, conformément aux contraintes.
Technologies, outils et langages utilisés
PHP
Langage de script côté serveur utilisé pour le développement web.
Symfony
Framework PHP pour le développement d'applications web robustes.
JavaScript
Langage de programmation utilisé pour rendre les pages web interactives.
React
Bibliothèque JavaScript pour la création d'interfaces utilisateur.
HTML5
Langage de balisage standard pour la création de pages web.
CSS3
Langage de style utilisé pour la mise en forme des pages web.
Git
Gestionnaire de versions
SQL
SQL est un langage informatique normalisé servant à exploiter des bases de données relationnelles.
Compétences techniques, transversales, humaines développées grâce à Neetflex
| Compétences techniques | ↪ Le développement de l'application a renforcé mes compétences en programmation avec des technologies modernes comme Symfony, React et SQLite. J’ai appris à concevoir une architecture fullstack robuste, à implémenter une API RESTful et à documenter celle-ci avec Swagger UI. La gestion des rôles et des permissions dans Symfony a permis de mieux comprendre les mécanismes de sécurité des applications web. Du côté front-end, l'utilisation de React a permis de maîtriser la création de composants dynamiques et réactifs, ainsi que la gestion des états pour une navigation fluide. Enfin, l'intégration de SQLite a renforcé mes compétences en gestion de bases de données légères et en migrations. |
| Compétences transversales | ↪ Le projet a également permis de développer des compétences en gestion de projet et en organisation. La séparation des tâches entre les deux membres de l'équipe a nécessité une planification rigoureuse et une communication claire pour garantir l'avancement simultané des différentes parties (fullstack, API et front-end). J’ai également appris à documenter mon travail de manière claire et concise, notamment pour l'API avec Swagger UI, afin de faciliter son utilisation par d'autres développeurs. |
| Compétences humaines | ↪ Travailler en équipe sur ce projet a renforcé nos compétences en collaboration et en communication. Nous avons appris à partager nos idées, à résoudre ensemble les problèmes rencontrés et à nous adapter aux contraintes et aux imprévus. La répartition des responsabilités a également permis de développer la confiance mutuelle et l'autonomie dans la réalisation des tâches. Enfin, le respect des délais et des exigences du cahier des charges a renforcé mon sens des responsabilités. |
Conclusion
Ce projet en duo a été une expérience enrichissante, tant sur le plan technique que collaboratif. Travailler avec plusieurs technologies différentes, comme Symfony, React, SQLite et Swagger UI, a représenté un défi majeur, car il a fallu non seulement maîtriser chacune d'elles, mais aussi les intégrer de manière cohérente pour qu'elles fonctionnent ensemble. Le rendu final témoigne de ma capacité à relever ces défis et à produire une application fonctionnelle conforme au cahier des charges. Cette expérience m’permis de développer une approche méthodique, de renforcer mes compétences techniques et humaines, et d'identifier des axes d'amélioration pour mes futurs projets.
Capture d'écran d'un évènement sur Neetflex en étant avec un compte administrateur (vue différente de la barre de navigation en tant qu'administrateur)
