Potits Chats: Frontend

Le frontend de Potits Chats, une plateforme d'adoption de chats, développée avec Angular.

Table des Matières

Table des Matières

• Fonctionnalités
• Prérequis
• Installation
• Utilisation
• Documentation
• Technologies
• Détails de l'Architecture du Projet
• Linting et Formatage
• Extensions

Fonctionnalités

• ⚡️ Rapidité : Utilise Angular pour des performances rapides et efficaces.
• 🐱 Adoption de Chats : Une plateforme dédiée à l’adoption de chats avec des fonctionnalités modernes.
• 🎨 Interface Réactive : Utilisation des dernières technologies pour une interface utilisateur fluide et modulaire.
• 🔧 Modularité : Composants réutilisables et code bien structuré.

(retour au sommet)

Prérequis

Avant de commencer, assurez-vous d'avoir installé les éléments suivants :

• Node.js (version 18 ou supérieure)

• Serveur Backend en cours d'exécution (voir le dépôt backend)

(retour au sommet)

Installation

1. Clonez le dépôt du projet :

   git clone https://github.com/potits-chats/frontend.git
   cd frontend

2. Installez les dépendances du projet :

   npm install

3. Créez un fichier .env à la racine du projet et ajoutez les variables d'environnement nécessaires (voir un membre de l'équipe pour obtenir les valeurs).

(retour au sommet)

Utilisation

Pour démarrer le serveur de développement :

npm run start:dev

Pour construire une version de production :

npm run build

Documentation

Pour générer la documentation compodoc, exécutez la commande suivante :

npm run doc

Pour visualiser la documentation, ouvrez le fichier documentation/index.html dans votre navigateur.

Il y a aussi une documentation potits-chats disponible sur le google drive de l'équipe.

(retour au sommet)

Technologies

Ce projet est construit avec les principaux frameworks et bibliothèques suivants :

Framework/Bibliothèque	Description
	Framework web pour la création d'applications côté client modernes
	Framework CSS utilitaire pour un développement UI rapide
	Bibliothèque de composants UI pour Angular
	Programmation réactive avec des observables
	Langage de programmation typé qui se compile en JavaScript
	API de messagerie en temps réel pour les applications web et mobiles

(retour au sommet)

Détails de l'Architecture du Projet

• src/ : Contient tout le code source de l'application.
  • assets/ : Ce répertoire contient les ressources statiques comme les images, les fichiers CSS globaux, etc.
  • components/ : Ce répertoire contient des composants Angular réutilisables. Chaque composant représente une partie de l'interface utilisateur, comme un bouton ou un formulaire.
  • services/ : Ce répertoire contient les services de l'application, tels que les appels API via HttpClient, les fonctions utilitaires, etc.
  • views/ : Ce répertoire contient les composants Angular correspondant aux différentes pages de l'application.
  • app.module.ts : Le module racine de l'application où sont déclarés les composants et les services.
  • main.ts : Le fichier principal d'entrée où Angular est initialisé.

(retour au sommet)

Linting et Formatage

Pour garantir une haute qualité de code et maintenir la cohérence du style, nous utilisons ESLint et Prettier. Voici comment les configurer et les utiliser dans votre projet.

Installation des Plugins

Assurez-vous que les plugins ESLint et Prettier sont installés :

2. Vérifiez que les fichiers de configuration .eslintrc.js et .prettierrc sont présents à la racine du projet.

Exécuter ESLint

Pour analyser votre code et vérifier sa conformité avec les règles ESLint, exécutez :

npm run lint

Ce script analysera tous les fichiers JavaScript et Angular dans le répertoire src et signalera les erreurs ou les avertissements.

Pour corriger automatiquement les erreurs et les avertissements, exécutez :

npm run lint:fix

(retour au sommet)

Extensions

Extensions Nécessaires

Les extensions suivantes sont fortement recommandées pour une meilleure expérience de développement :

• ESLint : Intégration d'ESLint pour VS Code.
• Prettier : Extension de formatage de code pour VS Code.
• Angular Language Service : Service de langage pour Angular dans VS Code.

Extensions Recommandées

Les extensions suivantes sont recommandées pour améliorer la productivité et la qualité du code :

• Tailwind CSS IntelliSense : IntelliSense pour Tailwind CSS.
• Path Intellisense : Autocomplétion des noms de fichiers dans VS Code.
• Auto Rename Tag : Renommage automatique des balises HTML associées.
• Turbo Console Log : Améliore le logging dans la console de débogage.

(retour au sommet)