How payetgabriel/tp-final-react-b2 works
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: App.tsx Route App · Recette.tsx Recipe Detail · SelectionContext.tsx Selection State · main.tsx React Entry
Components 11
App Navigation
- React Entry
src/main.tsx - Route App
src/App.tsx
Recipe Browsing
- Recipe Home
src/pages/Home.tsx - Recipe Detail
src/pages/Recette.tsx - Ingredient Formatter
src/utils.ts
Selection State
- Selection Page
src/pages/Selection.tsx - Selection State
src/SelectionContext.tsx
Other Pages
- Contact Form
src/pages/Contact.tsx - Not Found
src/pages/NotFound.tsx
Other components
- Visitor
- Recipe API
Connections 13
- 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