Résumé coaching 3

+ Le groupe montre en démo que backend et frontend choisis sont installés et fonctionnent (au moins les bases).
+ Idéalement le groupe peut également faire le lien pour accéder à la base de données choisie.

+ Le groupe explique dans le wiki quelle est l'architecture et comment le projet est mis en place.
+ Le groupe doit maintenir à jour cette partie au fur et à mesure de l'avancement du projet et des choix effectués, en prévenant le coach.
+ Le schéma DB, ainsi que les autres schémas utiles, seront placés ici (datés!) Et mis à jour au fur et à mesure des changements.

1. Backend

1.1 Organisation du code

• 1 Dist : Il contient la version réduite du code source.
• 2 Node modules : Il contient les paquets externes du projet
• 3 Src : contient les fichiers et dossiers du projet.
• 4 Config : Ce dossier contient deux fichiers : le fichier de configuration pour la connexion à la base de données et le filtre utilisé pour enregistrer le fichier sur le système local et le "multer" utilisé pour enregistrer le fichier sur le système local.
• 5 Controllers : Ce dossier contient les fichiers qui gèrent la logique des requêtes HTTP. Chaque fichier de ce dossier définit des fonctions pour manipuler les données en fonction des requêtes reçues.
• 6 Middlewares : Ce dossier contient les middlewares, qui sont des fonctions qui s'exécutent pendant le cycle de traitement des requêtes HTTP. Ils peuvent modifier les requêtes et les réponses, terminer les requêtes, ou appeler les middlewares suivants dans la chaîne.
• 7 Model : Ce dossier contient les modèles de données pour MongoDB. Chaque modèle définit la structure d'un type de document dans la base de données.
• 8 Routes : Ce dossier contient les fichiers qui définissent les routes de l'API. Chaque fichier de ce dossier associe des routes spécifiques aux contrôleurs correspondants.
• 9 Utils : contient des fichiers utilitaires comme des messages de validation etc...
• 10 Validations : Ce dossier contient les fichiers qui définissent les schémas de validation pour les données d'entrée.
• 11 App.ts : Point d'entrée principal du serveur Express. Configure les middlewares globaux, les routes principales et initialise le serveur.
• 12 Package json : Les dépendances utilisées dans le projet

1.2 Diagramme de classes UML

[Diagramme de classes] [Explication textuelle du diagramme de classes]

2. Schémas, diagrammes et infos

2.1 Diagrammes liés à la base de données

Collection artists

Collection comments

Collection likes

Collection tattoos

Collection users

2.2 Résumé du fonctionnement général de l'application

Fonctionnalités Principales

Gestion des utilisateurs :

• Inscription et connexion des utilisateurs et des tatoueurs.
• Gestion des favoris des utilisateurs.
• Protection des routes sensibles via l'authentification.

Gestion des tatoueurs :

• Affichage et modification des informations des tatoueurs.
• Affichage des profils détaillés des tatoueurs.
• Géolocalisation des tatoueurs sur une carte.

Gestion des tatouages :

• Ajout de nouveaux tatouages avec téléchargement d'images.
• Affichage des tatouages sur les profils des tatoueurs.

Commentaires et avis :

• Possibilité pour les utilisateurs de laisser des avis sur les tatoueurs.
• Affichage des avis sur les profils des tatoueurs.

Flux de Travail

Inscription et connexion :

• Les utilisateurs et tatoueurs s'inscrivent et se connectent via des formulaires.
• Les informations sont envoyées au backend qui gère l'authentification et stocke les données dans MongoDB.

Affichage des informations :

• Le frontend récupère les données des tatoueurs et des tatouages depuis le backend via des appels API.
• Les données sont affichées dans des composants React, avec des options de filtrage et de recherche.

Interaction utilisateur :

• Les utilisateurs peuvent ajouter des tatoueurs à leurs favoris, laisser des avis et consulter les profils détaillés.
• Les tatoueurs peuvent ajouter de nouveaux tatouages et modifier leurs informations.

Protection et validation :

• Les middlewares d'authentification protègent les routes sensibles.
• Les middlewares de validation s'assurent que les données envoyées sont correctes.

3. Frontend

3.1 Organisation du code

Public :

Ce dossier contient les fichiers statiques qui sont directement servis par le serveur.

Src :

Ce dossier contient tout le code source de l'application React.

Components

• AddTattoo.js : Formulaire permettant d'ajouter un nouveau tatouage. Il utilise des champs de texte et un sélecteur pour les styles de tatouage, ainsi que la possibilité de télécharger une image.
• Carte.js : Affiche une carte avec les emplacements des tatoueurs en utilisant la bibliothèque Leaflet.
• Connect.js : Formulaire de connexion pour les utilisateurs et les tatoueurs. Il gère l'état de connexion et les redirections après la connexion.
• Create.js : Formulaire de création de compte pour les utilisateurs et les tatoueurs.
• Edit.js : Formulaire permettant de modifier les informations d'un tatoueur existant.
• Favoris.js : Affiche les tatoueurs favoris de l'utilisateur connecté.
• Navbar.js : Barre de navigation permettant d'accéder aux différentes sections de l'application.
• TatoueurProfil.js : Affiche le profil détaillé d'un tatoueur, y compris les avis des utilisateurs et la possibilité de laisser un avis.
• Tatoueurs.js : Composant pour afficher les détails d'un tatoueur dans une carte ou une liste.
• PrivateRoute.js : Composant de route protégée qui vérifie si l'utilisateur est authentifié avant d'accéder à certaines routes.

assets/styles

• Ce dossier contient les fichiers CSS pour la mise en forme de l'application.

App.js

• Le composant racine de l'application. Il configure les routes principales en utilisant react-router-dom et inclut des composants comme Navbar, Content, Favoris, etc.

index.js

• Le point d'entrée principal de l'application React. Il monte le composant App dans le DOM à l'élément avec l'ID root.

Fonctionnement général du frontend

Navigation et Routage :

• Utilisation de react-router-dom pour gérer les routes de l'application.
• Le composant Navbar fournit une navigation entre les différentes pages comme l'accueil, les favoris, la carte, etc.

Authentification :

• Le composant Connect gère la connexion des utilisateurs et des tatoueurs.
• Le composant PrivateRoute protège les routes sensibles en vérifiant l'authentification de l'utilisateur.

Gestion des Tatoueurs et Tatouages :

• Content affiche la liste des tatoueurs avec des options de recherche et de filtrage.
• TatoueurProfil affiche les détails d'un tatoueur spécifique et permet aux utilisateurs de laisser des avis.
• AddTattoo permet aux tatoueurs d'ajouter de nouveaux tatouages avec des images.

Interactions Utilisateur :

• Les utilisateurs peuvent ajouter des tatoueurs à leurs favoris via le composant Favoris.
• Ils peuvent également laisser des avis sur les tatoueurs via TatoueurProfil.

Styling :

• Les styles sont organisés en plusieurs fichiers CSS pour une meilleure modularité et maintenabilité.

3.2 Apparence