HyCritics

HyCritics est une application web développée avec Angular qui permet aux utilisateurs de découvrir, noter et critiquer des médias (films, séries, livres).

Lancement du projet

1. Installer les dépendances :

   npm install

2. Lancer le serveur JSON (backend) :

   npm run json-server

3. Lancer l'application Angular (frontend) :

   npm start

   L'application sera accessible à l'adresse http://localhost:4200/.

Checklist des fonctionnalités implémentées

Ce projet respecte toutes les exigences techniques demandées. Voici un aperçu de leur implémentation :

1. Utilisation de JSON Server avec au moins 3 tables

Le backend de l'application est simulé à l'aide de JSON Server. La base de données se trouve dans backend/db.json et contient 5 tables :

• users : pour la gestion des utilisateurs.
• medias : pour les informations sur les médias.
• critics : pour les critiques rédigées par les utilisateurs.
• genres : pour les genres de médias.
• platforms : pour les plateformes de diffusion.

2. Système de connexion utilisateur

Un système d'authentification simple a été mis en place :

• Pages : Les composants pour la connexion et l'inscription se trouvent dans src/app/pages/login et src/app/pages/register.
• Service : La logique de connexion, d'inscription et de gestion de la session utilisateur est gérée par src/app/services/auth.service.ts.
• Garde de route : Un AuthGuard (src/app/guards/auth.guard.ts) protège les routes qui nécessitent une authentification.

3. Au minimum 3 routes (avec route param et query params)

Le fichier de routage src/app/app.routes.ts définit l'ensemble des routes de l'application. On y trouve :

• Plus de 3 routes en dehors de la page d'accueil (/medias, /critics, /login, etc.).
• Route avec paramètre (route param) : La route medias/:id permet d'afficher la page de détail d'un média spécifique. Le composant src/app/pages/detail-media/detail-media.ts récupère cet id pour charger les bonnes informations.
• Route avec paramètres de requête (query params) : La page src/app/pages/list-medias/list-medias.ts utilise les query params pour filtrer les médias par genre ou pour effectuer une recherche.

4. Un composant par page

Chaque page de l'application est un composant Angular dédié, situé dans le dossier src/app/pages. Par exemple :

• src/app/pages/home/home.ts pour la page d'accueil.
• src/app/pages/list-medias/list-medias.ts pour la liste des médias.
• src/app/pages/add-critic/add-critic.ts pour le formulaire d'ajout de critique.

5. Un composant réutilisable (avec @Input et @Output)

Le projet inclut plusieurs composants réutilisables, notamment :

• media-resume (src/app/components/media-resume/) :
  • @Input() : Reçoit un objet media à afficher.
  • @Output() : Émet un événement favoriteToggle lorsque l'utilisateur clique sur le bouton pour ajouter/retirer un média de ses favoris.
• stars-note (src/app/components/stars-note/) : Affiche une note sous forme d'étoiles et prend la note en @Input().
• card (src/app/components/card/) : Composant générique pour afficher des cartes génériques, avec des @Input() pour les données à afficher et un @Output() pour gérer les interactions.

6. Au minimum 2 services

Le projet utilise plusieurs services pour séparer la logique métier et la communication avec l'API. Ils se trouvent dans src/app/services/ :

• auth.service.ts : Gère l'authentification.
• medias.service.ts : Gère les opérations CRUD pour les médias.
• critics.service.ts : Gère les opérations CRUD pour les critiques.
• users.service.ts : Gère les informations des utilisateurs.

7. Un formulaire réactif (Reactive Form)

Le formulaire pour ajouter un média utilise également un ReactiveForm avec des validateurs similaires.

• Composant : src/app/pages/register-media/register-media.ts.
• Contrôles : Le formulaire contient plusieurs FormControl (title, type, year, description, etc.).
• Validateurs : Il utilise des validateurs tels que Validators.required, Validators.minLength, et Validators.pattern pour garantir la qualité des données saisies.

8. Une directive et un pipe custom

• Directive custom : La directive golden-border (src/app/directives/golden-border.directive.ts) ajoute une bordure dorée et une ombre à un élément lorsqu'on le survole. Elle est utilisée sur les cartes des médias.
• Pipes custom :
  • truncate.pipe.ts : Tronque un texte trop long et ajoute "...".
  • relative-time.pipe.ts : Affiche une date sous forme de temps relatif (ex: "il y a 2 heures").

Licence

Ce projet est sous licence MIT. Voir le fichier LICENSE pour plus de détails.

Auteurs

• Sébastien BRANLY
• Guillaume MAUGIN
• Louis RÉVILLE