Back & Front

Scaryview

Technologies

Logo SymfonySymfony
Logo API PlatformAPI Platform
Logo FigmaFigma
Logo Vue JSVue JS
Logo PostmanPostman
Logo GitGit

Présentation

Scaryview est un site de streaming fictif spécialisé dans les films horrifiques. Pour ce travail, j’ai dû réaliser un site avec une partie back à l’aide de Symfony et API Platform, et une partie front avec Vue JS. L’objectif était de faire un CRUD à partir de notre propre API, et donc de développer un véritable back-office.

Le site propose également un système de connexion sécurisé. Si l’utilisateur n’est pas connecté, il n’a pas accès au site et ne peut donc pas interagir avec l’API.

Partie back

J’ai utilisé le framework Symfony car il permet de créer facilement une API grâce à API Platform, puis de mettre en place un système d’authentification sécurisé avec un JWT.

L’API permet de gérer les entités Movie, Actor, Category, Nationality et User avec les requêtes HTTP GET, POST, PUT, DELETE et PATCH. Elles ont été créées au préalable par Symfony et envoyées sur une base de données grâce à l’ORM Doctrine. Toutes les données fictives ont été généré par des Fixtures. Pour tester mes requêtes, j’ai utilisé le logiciel Postman en créant une collection avec toutes les requêtes qui composent mon API.

J’ai aussi mis en place un système de connexion. Avec un formulaire côté front, l’utilisateur envoie une requête à l’API. Si les identifiants correspondent à un utilisateur de la base de données, il génère un token qui lui permet d’effectuer l’intégralité des requêtes pour récupérer les contenus en naviguant sur le site. Bien sûr, tout ça l’utilisateur ne le voit pas, c’est ce qu’il se passe côté serveur.

Partie front

Pour la partie front, j’ai utilisé le framework Vue JS. Il permet de construire des sites internet grâce à des composants réutilisables et des vues. Une fois qu’une fonctionnalité a été développé, elle peut être intégrée ailleurs facilement tout en étant adaptée. Ce fonctionnement permet de gagner un temps conséquent et d’avoir un espace de travail propre et organisé simple à maintenir sur le long terme.

Si l’utilisateur n’est pas connecté (et n’a donc pas de token), il est automatiquement redirigé vers la page de connexion du site. Une fois connecté, il est redirigé sur la page d’accueil qui affiche les derniers films, les acteurs du moment et les catégories les plus populaires. Aucune interaction avec le site n’est faisable si l’utilisateur n’est pas autorisé. Une double sécurité est mise en place, côté front et côté serveur.

Chaque entité possède sa propre page générale, où l’utilisateur peut faire des recherches, supprimer et modifier l’élément. Chaque carte permet d’avoir davantage d’informations sur l’entité. Il est aussi possible de modifier les informations du compte dans l’onglet “Account” du menu. Toutes les requêtes ont été réalisées avec Axios, un client HTTP performant et flexible.