# 📘 Standards de Développement Frontend

## 1. Objectif du document

Ce document définit les standards et bonnes pratiques applicables aux projets frontend basés sur Next.js et l’écosystème React. L’objectif est d’assurer :

* Une base de code cohérente et lisible
* Une maintenance simple dans le temps
* Une expérience développeur fluide

---

## 2. Principes généraux

* Respect strict des conventions du framework Next.js
* Simplicité et clarté avant sophistication
* Séparation raisonnable des responsabilités sans sur‑abstraction
* Priorité à la lisibilité et à l’évolutivité

---

## 3. Stack Technique Standard

* **Framework** : Next.js (App Router)
* **Langage** : TypeScript (`strict: true` obligatoire)
* **Data fetching** : TanStack Query et Axios
* **État UI / local** : Zustand ou Redux Toolkit
* **Styling** : TailwindCSS
* **Composants UI** : shadcn/ui

---

## 4. Organisation du Code

### Principes

* Les pages et layouts suivent la structure App Router
* Les composants sont organisés par fonctionnalité ou par domaine UI
* Les hooks encapsulent la logique réutilisable
* Les appels API sont centralisés dans des services dédiés

### Règles

* Pas d’appels HTTP directs dans les composants visuels
* Pas de logique complexe dans les fichiers `page.tsx`
* Les composants doivent rester simples et prévisibles

---

## 5. Structure de Projet

* Utiliser la structure recommandée par notre template
* Découper chaque couche (components, hooks, services) par features
* Éviter les abstractions inutiles

### Notre template de la structure d'un projet frontend avec next.js

[https://github.com/kaeyros-analytics-org/nextjs-starter-template](https://github.com/kaeyros-analytics-org/nextjs-starter-template)


---

## 6. Conventions de Nommage

* Composants React : `PascalCase`
* Fichiers de composants : `PascalCase.tsx`
* Hooks : `useCamelCase`
* Fonctions et variables : `camelCase`
* Dossiers : `snake-case`

---

## 7. Gestion de l’État

* **TanStack Query**

    * Toute donnée venant du backend
    * Gestion du cache, du loading et des erreurs

* **Zustand / Redux Toolkit**

    * État UI
    * États temporaires ou locaux

---

## 8. Gestion des Erreurs

* Les erreurs API doivent être gérées explicitement
* Affichage utilisateur clair et non technique
* Utilisation d’Error Boundaries si nécessaire

---

## 9. Qualité UI & Performance

* Utiliser les composants shadcn avant d’en créer de nouveaux
* Responsive design obligatoire
* Éviter les re‑renders inutiles
* Exploiter les mécanismes natifs de Next.js (RSC, caching, streaming)

---

## 10. Tests

* Tests unitaires sur les hooks et fonctions critiques
* Tests E2E pour les parcours utilisateurs majeurs

---

## 11. Bonnes Pratiques

* Un composant = une responsabilité
* Code explicite avant commentaire
* Refactor régulier encouragé

---

## ✔️ Fin du document Frontend