Skip to content
/ Fix-It Public

🛠️ Fix-It: Incident management app built with React & Bootstrap. Focus on component architecture and CRUD workflow. Evolving towards a Fullstack model with Node.js and MongoDB for data persistence, showcasing a scalable backend and modern NoSQL database integration.

Notifications You must be signed in to change notification settings

Isaac1h/Fix-It

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

đź§  Architecture et Concepts Techniques

Ce projet a été conçu pour mettre en pratique les patterns fondamentaux de React. L'objectif était de créer une application modulaire respectant le principe de responsabilité unique.

1. Le Flux de Données Unidirectionnel (One-Way Data Flow)

L'application respecte strictement le flux de données descendant de React :

  • Parents vers Enfants : Les donnĂ©es (tickets) descendent via les Props.
  • Enfants vers Parents : Les Ă©vĂ©nements remontent via des fonctions de callback (onAddTicket, onDeleteTicket).
  • Pourquoi ? Cela rend l'application prĂ©dictible et facilite le dĂ©bogage.

2. Remontée d'État (Lifting State Up)

Plutôt que de gérer les tickets dans TicketList ou TicketForm, l'état a été remonté dans le composant parent App.jsx.

  • Code : const [tickets, setTickets] = useState([]) est situĂ© dans App.
  • IntĂ©rĂŞt : Cela permet de partager la mĂŞme "Source Unique de VĂ©ritĂ©" entre deux composants frères (le formulaire qui ajoute et la liste qui affiche).

3. Immutabilité des Données

Aucune modification directe du tableau (ex: push ou splice) n'est effectuée. L'application utilise des méthodes créant de nouvelles références mémoires pour déclencher les rendus React efficacement.

  • Ajout : Utilisation du Spread Operator [...tickets, newTicket].
  • Suppression : Utilisation de .filter() pour recrĂ©er un tableau sans l'Ă©lĂ©ment supprimĂ©.

4. Composants Contrôlés (Controlled Components)

Le formulaire TicketForm n'utilise pas le DOM direct. Ses champs sont entièrement pilotés par React :

  • La valeur affichĂ©e (value={title}) vient du State.
  • Chaque frappe dĂ©clenche une mise Ă  jour (onChange).
  • Avantage : Validation et manipulation des donnĂ©es en temps rĂ©el possibles avant la soumission.

5. Rendu de Liste Dynamique

Utilisation de la méthode .map() pour transformer le tableau de données en éléments JSX.

  • Gestion stricte de la propriĂ©tĂ© key (key={t.id}) pour optimiser l'algorithme de rĂ©conciliation de React (Virtual DOM) lors des ajouts/suppressions.

đź“‚ Structure du Code

  • App.jsx : Conteneur "intelligent" (Smart Component). Il dĂ©tient la logique mĂ©tier et le State.
  • TicketList.jsx & Navbar.jsx : Composants "bĂŞtes" (Dumb Components). Ils ne font qu'afficher ce qu'on leur donne via les Props.
  • TicketForm.jsx : Composant avec Ă©tat local (pour gĂ©rer la saisie temporaire de l'utilisateur).

About

🛠️ Fix-It: Incident management app built with React & Bootstrap. Focus on component architecture and CRUD workflow. Evolving towards a Fullstack model with Node.js and MongoDB for data persistence, showcasing a scalable backend and modern NoSQL database integration.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors