Création d’une Todolist de films avec VueJS : Mon premier projet Vue
Dans le cadre de mon cours « JavaScript Approfondi » lors de ma licence professionnelle Développement d’Applications Web et Innovation Numérique (DAWIN), j’ai eu l’opportunité de réaliser mon tout premier projet avec VueJS. Le but était de créer une todolist de films qui permet d’ajouter, modifier, afficher et supprimer des films, tout en découvrant les bases de ce framework JavaScript que je n’avais encore jamais utilisé.
Objectifs du projet
L’objectif principal était de mettre en pratique les concepts clés de VueJS, en créant une application simple et fonctionnelle. Le projet consistait en une application à page unique (SPA) où les utilisateurs pouvaient :
- Ajouter un film
- Modifier un film
- Consulter les détails
- Supprimer un film
- Rechercher un film
Chaque film enregistré dans la liste comportait plusieurs informations : le nom, la date de sortie, la langue, le réalisateur et la catégorie.
Technologies utilisées
Par manque de temps pour me concentrer sur le design, j’ai choisi d’intégrer le framework Bootstrap afin de styliser rapidement l’interface et garantir une expérience utilisateur fluide. VueJS a facilité l’implémentation de ces fonctionnalités, et pour la gestion des données, j’ai utilisé un store Vuex pour centraliser l’état de l’application, notamment les informations sur les films.
Fonctionnalités principales
Le projet s’est concentré sur les fonctionnalités de base :
- Ajout/Modification de films : Un formulaire dans une modale permettait d’ajouter un nouveau film ou de modifier les informations d’un film existant.
- Affichage détaillé des films : En cliquant sur un film, une modale affichait des informations plus complètes.
- Suppression sécurisée : Un message de confirmation apparaissait avant de supprimer définitivement un film.
- Barre de recherche : Cette barre permettait de filtrer les films par nom, facilitant ainsi la recherche dans la liste.
Axes d’amélioration
Bien que le projet réponde aux attentes initiales, il pourrait évoluer vers une application plus complète avec plusieurs améliorations :
- Mise en place d’une API REST pour stocker les films dans une base de données plutôt que dans le store local.
- Système d’authentification pour permettre à chaque utilisateur de gérer sa propre liste de films.
Ces fonctionnalités n’ont pas été développées, mais elles pourraient être des pistes intéressantes pour aller plus loin.
Ce projet m’a permis de découvrir VueJS. J’ai été agréablement surpris par sa simplicité et sa facilité de prise en main. VueJS est très intuitif, avec une architecture claire qui m’a permis d’être rapidement opérationnel. Grâce à ce projet, j’ai acquis des compétences fondamentales qui me servent actuellement sur des projets plus importants comme le projet « TMA Menuiseries » ou encore la création de ce porfolio.
