FakeFlix : v1

=> Vous trouverez une vidéo de présentation complète tout en bas de cette page <=

Présentation

Pour cette première version, concentrez vous sur les fonctionnalités essentielles de l'application. Essayez d'utiliser au maximum les bonnes pratiques, mais concentrez-vous d'abord sur le fonctionnel. Un deuxième exercice viendra ajouter quelques fonctionnalités, et quelques contraintes techniques (FakeFlix v2), car un logiciel n'est jamais "fini", et vous devez être assez à l'aise pour modifier un code déjà fonctionnel. Pensez bien à donner un maximum de souplesse à votre code pour pouvoir y rajouter les futures fonctionnalités...

Pages

Login

Cette page servira à l'authentification. Vous n'êtes pas obligé de commencer par celle-la, mais vous en aurez besoin pour certaines fonctionnalités. Pensez à gérer un minimum les erreurs de login (mauvais identifiants, etc...).

Accueil

Cette page contiens les résultats de recherche de l'utilisateur (vide si aucune recherche) et un carrousel permettant de découvrir les dernières sorties de films.

Page film

Cette page est le détail d'un film (affiche, synopsis, stats, etc...). Outre les données standard du film, elle contient trois fonctionnalités supplémentaires :

• afficher la bande annonce du film (si il y en a une)
• pouvoir mettre ce film dans les favoris
• pouvoir mettre ce film dans les films "à voir" (watch list)

Page favoris

Liste tous les films que vous avez marqué comme favoris. Et on rajoute le carrousel de découverte de nouveaux films.

Page "films à voir" (watch list)

Liste tous les films que vous avez marqué comme "a voir". Et on rajoute le carrousel de découverte de nouveaux films

Navigation

La navigation se fait via un header classique, présent sur toutes les pages sauf sur la page de login. En plus de contenir des liens vers les pages statiques, le header devra comprendre un champ de recherche qui permet à l'utilisateur d'effectuer une nouvelle recherche depuis n'importe ou dans le site.

Contraintes technique

• Utiliser vue CLI avec vue ui si vous le souhaitez
• utiliser au maximum toutes les notions abordées jusqu'ici (transitions, router, mixins, composants, modulesJS, vueX, etc etc...)
• builder une application finale accessible sur Internet
• faire un effort minimal au niveau de l'UI. Vous pouvez utiliser un framework CSS de votre choix, du SCSS, comme vous voulez. Mais faites moi un truc qui ne pique pas trop les yeux.
• passer du temps pour refactorer votre code, améliorer sa lisibilité, et factoriser tout ce qui est trop redondant. N'abusez pas des commentaires, un code propre doit être lisible sans trop de commentaires.

Assets

Il y a juste une image à récupérer en pièce jointe de cet exercice. C'est pour les films qui n'ont pas d'affiches. Vous n'avez besoin de rien d'autre.

Bonus

• utiliser lodash et debounce pour faire une barre de recherche plus optimisée
• utiliser un plugin carrousel pour la partie "nouveautés"
• utiliser des mixins pour les codes redondants et génériques
• utiliser au maximum les computed data pour les différentes routes d'accès à l'API

Vidéo de présentation