# payetgabriel/tp-final-react-b2 architecture

> Architecture diagram of the GitHub repository payetgabriel/tp-final-react-b2, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/payetgabriel/tp-final-react-b2
- Repository: https://github.com/payetgabriel/tp-final-react-b2

## Overview

This React app lets users browse seafood recipes, search and filter the list, open recipe details, and maintain a session-only selection; it also provides a client-side contact form and not-found page. The entry point mounts routing and selection state, while page components own their API requests and interactions. Recipe details use a helper to format ingredients. The README describes a generic Vite template, so capabilities are inferred from sampled source; no contact-service integration or persistent storage is shown.

Main entry points: [`src/App.tsx`](https://github.com/payetgabriel/tp-final-react-b2/blob/main/src/App.tsx) (Route App), [`src/pages/Recette.tsx`](https://github.com/payetgabriel/tp-final-react-b2/blob/main/src/pages/Recette.tsx) (Recipe Detail), [`src/SelectionContext.tsx`](https://github.com/payetgabriel/tp-final-react-b2/blob/main/src/SelectionContext.tsx) (Selection State), [`src/main.tsx`](https://github.com/payetgabriel/tp-final-react-b2/blob/main/src/main.tsx) (React Entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["App Navigation"]
  node_entry["React Entry<br/>[main.tsx]"]
  node_app["Route App<br/>[App.tsx]"]
end

subgraph group_recipes["Recipe Browsing"]
  node_home["Recipe Home<br/>[Home.tsx]"]
  node_detail["Recipe Detail<br/>[Recette.tsx]"]
  node_ingredients["Ingredient Formatter<br/>[utils.ts]"]
end

subgraph group_selection["Selection State"]
  node_selection_page["Selection Page<br/>[Selection.tsx]"]
  node_selection_state["Selection State"]
end

subgraph group_other["Other Pages"]
  node_contact["Contact Form<br/>[Contact.tsx]"]
  node_notfound["Not Found<br/>[NotFound.tsx]"]
end

node_user(("Visitor"))
node_recipe_api(("Recipe API"))

node_user -->|"navigates"| node_app
node_entry -->|"mounts"| node_app
node_entry -->|"provides state"| node_selection_state
node_app -->|"routes"| node_home
node_app -->|"routes"| node_detail
node_app -->|"routes"| node_selection_page
node_app -->|"routes"| node_contact
node_app -->|"fallback route"| node_notfound
node_home -->|"fetches list"| node_recipe_api
node_detail -->|"fetches details"| node_recipe_api
node_detail -->|"formats ingredients"| node_ingredients
node_detail -->|"checks and updates"| node_selection_state
node_selection_page -->|"reads and removes"| node_selection_state

click node_entry "https://github.com/payetgabriel/tp-final-react-b2/blob/main/src/main.tsx"
click node_app "https://github.com/payetgabriel/tp-final-react-b2/blob/main/src/App.tsx"
click node_home "https://github.com/payetgabriel/tp-final-react-b2/blob/main/src/pages/Home.tsx"
click node_detail "https://github.com/payetgabriel/tp-final-react-b2/blob/main/src/pages/Recette.tsx"
click node_ingredients "https://github.com/payetgabriel/tp-final-react-b2/blob/main/src/utils.ts"
click node_selection_page "https://github.com/payetgabriel/tp-final-react-b2/blob/main/src/pages/Selection.tsx"
click node_selection_state "https://github.com/payetgabriel/tp-final-react-b2/blob/main/src/SelectionContext.tsx"
click node_contact "https://github.com/payetgabriel/tp-final-react-b2/blob/main/src/pages/Contact.tsx"
click node_notfound "https://github.com/payetgabriel/tp-final-react-b2/blob/main/src/pages/NotFound.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_entry,node_app toneBlue
class node_home,node_detail,node_ingredients toneAmber
class node_selection_page,node_selection_state,node_recipe_api toneMint
class node_contact,node_notfound toneRose
class node_user toneIndigo
```

## Components

### App Navigation

- [React Entry](https://github.com/payetgabriel/tp-final-react-b2/blob/main/src/main.tsx): `src/main.tsx`
- [Route App](https://github.com/payetgabriel/tp-final-react-b2/blob/main/src/App.tsx): `src/App.tsx`

### Recipe Browsing

- [Recipe Home](https://github.com/payetgabriel/tp-final-react-b2/blob/main/src/pages/Home.tsx): `src/pages/Home.tsx`
- [Recipe Detail](https://github.com/payetgabriel/tp-final-react-b2/blob/main/src/pages/Recette.tsx): `src/pages/Recette.tsx`
- [Ingredient Formatter](https://github.com/payetgabriel/tp-final-react-b2/blob/main/src/utils.ts): `src/utils.ts`

### Selection State

- [Selection Page](https://github.com/payetgabriel/tp-final-react-b2/blob/main/src/pages/Selection.tsx): `src/pages/Selection.tsx`
- [Selection State](https://github.com/payetgabriel/tp-final-react-b2/blob/main/src/SelectionContext.tsx): `src/SelectionContext.tsx`

### Other Pages

- [Contact Form](https://github.com/payetgabriel/tp-final-react-b2/blob/main/src/pages/Contact.tsx): `src/pages/Contact.tsx`
- [Not Found](https://github.com/payetgabriel/tp-final-react-b2/blob/main/src/pages/NotFound.tsx): `src/pages/NotFound.tsx`

### Other components

- **Visitor**
- **Recipe API**

## Connections

- Visitor → Route App: navigates
- React Entry → Route App: mounts
- React Entry → Selection State: provides state
- Route App → Recipe Home: routes
- Route App → Recipe Detail: routes
- Route App → Selection Page: routes
- Route App → Contact Form: routes
- Route App → Not Found: fallback route
- Recipe Home → Recipe API: fetches list
- Recipe Detail → Recipe API: fetches details
- Recipe Detail → Ingredient Formatter: formats ingredients
- Recipe Detail → Selection State: checks and updates
- Selection Page → Selection State: reads and removes