# phongtoquach/freshfind_web architecture

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

- Interactive diagram: https://gitdiagram.com/phongtoquach/freshfind_web
- Repository: https://github.com/phongtoquach/freshfind_web

## Overview

FreshFind is a client-side farmers-market discovery and seasonal-produce guide. Users can search markets by produce category and day, explore market details and locations, and browse produce by season; bookmarks and notes support saving and revisiting finds. The app also includes contact/about and prototype login pages, plus a chatbot. The graph reflects documented zero-backend behavior and sampled source; several page-level interactions and the chatbot implementation were not inspected, so their internal wiring is omitted.

Main entry points: [`src/App.jsx`](https://github.com/phongtoquach/freshfind_web/blob/main/src/App.jsx) (Router and Providers), [`src/context/ProductsSeasonContext.jsx`](https://github.com/phongtoquach/freshfind_web/blob/main/src/context/ProductsSeasonContext.jsx) (Season and Product State), [`src/components/HomeMarketSearchBox.jsx`](https://github.com/phongtoquach/freshfind_web/blob/main/src/components/HomeMarketSearchBox.jsx) (Market Search Form), [`src/services/marketService.js`](https://github.com/phongtoquach/freshfind_web/blob/main/src/services/marketService.js) (Market Filtering)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application Shell"]
  node_app["Router and Providers<br/>[App.jsx]"]
  node_chatbot["Chatbot<br/>[Chatbox.jsx]"]
  node_chat_data["Chat Content<br/>[chatbox.json]"]
  node_other_pages["Other Pages"]
end

subgraph group_discovery["Market Discovery"]
  node_home["Home Search<br/>[Home.jsx]"]
  node_searchbox["Market Search Form"]
  node_markets_page["Markets Directory<br/>[MarketsPage.jsx]"]
  node_market_service["Market Filtering<br/>[marketService.js]"]
  node_market_data["Market Records<br/>[markets.json]"]
  node_categories["Produce Categories<br/>[categoryService.js]"]
  node_category_data["Category Records<br/>[categories.json]"]
  node_market_details["Market Details"]
  node_map["Market Map<br/>[MapLocation.jsx]"]
end

subgraph group_produce["Produce Guide"]
  node_product_data["Product Records<br/>[products.json]"]
  node_produce_guide["Produce Guide<br/>[ProduceGuide.jsx]"]
  node_season_page["Season Browser"]
  node_season_context["Season and Product State"]
  node_season_data["Season Definitions<br/>[seasons.js]"]
  node_product_service["Product Filtering<br/>[productService.js]"]
end

subgraph group_personal["Personal Tools"]
  node_bookmarks["Bookmarks and Export<br/>[BookMarks.jsx]"]
  node_bookmark_context["Bookmark State"]
  node_notes["Notes State<br/>[NoteContext.jsx]"]
  node_browser_storage[("Browser Storage")]
end

node_visitor(("Visitor"))
node_map_tiles["OpenStreetMap Tiles"]

node_visitor -->|"opens"| node_app
node_app -->|"routes"| node_home
node_app -->|"routes"| node_markets_page
node_app -->|"routes"| node_market_details
node_app -->|"routes"| node_produce_guide
node_app -->|"routes"| node_season_page
node_app -->|"routes"| node_bookmarks
node_app -->|"routes"| node_other_pages
node_app -->|"renders"| node_chatbot
node_home -->|"renders"| node_searchbox
node_searchbox -->|"reads categories"| node_categories
node_categories -->|"reads"| node_category_data
node_searchbox -->|"navigates"| node_markets_page
node_markets_page -->|"filters and sorts"| node_market_service
node_market_service -->|"reads"| node_market_data
node_market_service -->|"reads"| node_product_data
node_market_details -->|"renders location"| node_map
node_map -.->|"loads tiles"| node_map_tiles
node_produce_guide -->|"filters products"| node_product_service
node_product_service -->|"reads"| node_product_data
node_season_page -->|"uses season state"| node_season_context
node_season_context -->|"loads seasons"| node_season_data
node_season_context -->|"loads products"| node_product_data
node_season_context -->|"loads markets"| node_market_data
node_bookmarks -->|"uses bookmarks"| node_bookmark_context
node_bookmarks -->|"uses notes"| node_notes
node_notes -->|"reads and writes"| node_browser_storage
node_bookmark_context -->|"persists state"| node_browser_storage
node_chatbot -->|"reads content"| node_chat_data

click node_app "https://github.com/phongtoquach/freshfind_web/blob/main/src/App.jsx"
click node_home "https://github.com/phongtoquach/freshfind_web/blob/main/src/pages/Home.jsx"
click node_searchbox "https://github.com/phongtoquach/freshfind_web/blob/main/src/components/HomeMarketSearchBox.jsx"
click node_markets_page "https://github.com/phongtoquach/freshfind_web/blob/main/src/pages/MarketsPage.jsx"
click node_market_service "https://github.com/phongtoquach/freshfind_web/blob/main/src/services/marketService.js"
click node_market_data "https://github.com/phongtoquach/freshfind_web/blob/main/src/data/markets.json"
click node_product_data "https://github.com/phongtoquach/freshfind_web/blob/main/src/data/products.json"
click node_categories "https://github.com/phongtoquach/freshfind_web/blob/main/src/services/categoryService.js"
click node_category_data "https://github.com/phongtoquach/freshfind_web/blob/main/src/data/categories.json"
click node_market_details "https://github.com/phongtoquach/freshfind_web/blob/main/src/pages/MarketDetailsPage.jsx"
click node_map "https://github.com/phongtoquach/freshfind_web/blob/main/src/components/MapLocation.jsx"
click node_produce_guide "https://github.com/phongtoquach/freshfind_web/blob/main/src/pages/ProduceGuide.jsx"
click node_season_page "https://github.com/phongtoquach/freshfind_web/blob/main/src/pages/ProductsSeasons.jsx"
click node_season_context "https://github.com/phongtoquach/freshfind_web/blob/main/src/context/ProductsSeasonContext.jsx"
click node_season_data "https://github.com/phongtoquach/freshfind_web/blob/main/src/data/seasons.js"
click node_product_service "https://github.com/phongtoquach/freshfind_web/blob/main/src/services/productService.js"
click node_bookmarks "https://github.com/phongtoquach/freshfind_web/blob/main/src/pages/BookMarks.jsx"
click node_bookmark_context "https://github.com/phongtoquach/freshfind_web/blob/main/src/context/BookmarkContext.jsx"
click node_notes "https://github.com/phongtoquach/freshfind_web/blob/main/src/context/NoteContext.jsx"
click node_chatbot "https://github.com/phongtoquach/freshfind_web/blob/main/src/components/Chatbox.jsx"
click node_chat_data "https://github.com/phongtoquach/freshfind_web/blob/main/src/data/chatbox.json"
click node_other_pages "https://github.com/phongtoquach/freshfind_web/tree/main/src/pages"

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_app,node_chatbot,node_chat_data,node_other_pages toneBlue
class node_home,node_searchbox,node_markets_page,node_market_service,node_market_data,node_categories,node_category_data,node_market_details,node_map toneAmber
class node_product_data,node_produce_guide,node_season_page,node_season_context,node_season_data,node_product_service toneMint
class node_bookmarks,node_bookmark_context,node_notes,node_browser_storage toneRose
class node_visitor,node_map_tiles toneIndigo
```

## Components

### Application Shell

- [Router and Providers](https://github.com/phongtoquach/freshfind_web/blob/main/src/App.jsx): `src/App.jsx`
- [Chatbot](https://github.com/phongtoquach/freshfind_web/blob/main/src/components/Chatbox.jsx): `src/components/Chatbox.jsx`
- [Chat Content](https://github.com/phongtoquach/freshfind_web/blob/main/src/data/chatbox.json): `src/data/chatbox.json`
- [Other Pages](https://github.com/phongtoquach/freshfind_web/tree/main/src/pages): `src/pages`

### Market Discovery

- [Home Search](https://github.com/phongtoquach/freshfind_web/blob/main/src/pages/Home.jsx): `src/pages/Home.jsx`
- [Market Search Form](https://github.com/phongtoquach/freshfind_web/blob/main/src/components/HomeMarketSearchBox.jsx): `src/components/HomeMarketSearchBox.jsx`
- [Markets Directory](https://github.com/phongtoquach/freshfind_web/blob/main/src/pages/MarketsPage.jsx): `src/pages/MarketsPage.jsx`
- [Market Filtering](https://github.com/phongtoquach/freshfind_web/blob/main/src/services/marketService.js): `src/services/marketService.js`
- [Market Records](https://github.com/phongtoquach/freshfind_web/blob/main/src/data/markets.json): `src/data/markets.json`
- [Produce Categories](https://github.com/phongtoquach/freshfind_web/blob/main/src/services/categoryService.js): `src/services/categoryService.js`
- [Category Records](https://github.com/phongtoquach/freshfind_web/blob/main/src/data/categories.json): `src/data/categories.json`
- [Market Details](https://github.com/phongtoquach/freshfind_web/blob/main/src/pages/MarketDetailsPage.jsx): `src/pages/MarketDetailsPage.jsx`
- [Market Map](https://github.com/phongtoquach/freshfind_web/blob/main/src/components/MapLocation.jsx): `src/components/MapLocation.jsx`

### Produce Guide

- [Product Records](https://github.com/phongtoquach/freshfind_web/blob/main/src/data/products.json): `src/data/products.json`
- [Produce Guide](https://github.com/phongtoquach/freshfind_web/blob/main/src/pages/ProduceGuide.jsx): `src/pages/ProduceGuide.jsx`
- [Season Browser](https://github.com/phongtoquach/freshfind_web/blob/main/src/pages/ProductsSeasons.jsx): `src/pages/ProductsSeasons.jsx`
- [Season and Product State](https://github.com/phongtoquach/freshfind_web/blob/main/src/context/ProductsSeasonContext.jsx): `src/context/ProductsSeasonContext.jsx`
- [Season Definitions](https://github.com/phongtoquach/freshfind_web/blob/main/src/data/seasons.js): `src/data/seasons.js`
- [Product Filtering](https://github.com/phongtoquach/freshfind_web/blob/main/src/services/productService.js): `src/services/productService.js`

### Personal Tools

- [Bookmarks and Export](https://github.com/phongtoquach/freshfind_web/blob/main/src/pages/BookMarks.jsx): `src/pages/BookMarks.jsx`
- [Bookmark State](https://github.com/phongtoquach/freshfind_web/blob/main/src/context/BookmarkContext.jsx): `src/context/BookmarkContext.jsx`
- [Notes State](https://github.com/phongtoquach/freshfind_web/blob/main/src/context/NoteContext.jsx): `src/context/NoteContext.jsx`
- **Browser Storage**

### Other components

- **Visitor**
- **OpenStreetMap Tiles**

## Connections

- Visitor → Router and Providers: opens
- Router and Providers → Home Search: routes
- Router and Providers → Markets Directory: routes
- Router and Providers → Market Details: routes
- Router and Providers → Produce Guide: routes
- Router and Providers → Season Browser: routes
- Router and Providers → Bookmarks and Export: routes
- Router and Providers → Other Pages: routes
- Router and Providers → Chatbot: renders
- Home Search → Market Search Form: renders
- Market Search Form → Produce Categories: reads categories
- Produce Categories → Category Records: reads
- Market Search Form → Markets Directory: navigates
- Markets Directory → Market Filtering: filters and sorts
- Market Filtering → Market Records: reads
- Market Filtering → Product Records: reads
- Market Details → Market Map: renders location
- Market Map → OpenStreetMap Tiles: loads tiles
- Produce Guide → Product Filtering: filters products
- Product Filtering → Product Records: reads
- Season Browser → Season and Product State: uses season state
- Season and Product State → Season Definitions: loads seasons
- Season and Product State → Product Records: loads products
- Season and Product State → Market Records: loads markets
- Bookmarks and Export → Bookmark State: uses bookmarks
- Bookmarks and Export → Notes State: uses notes
- Notes State → Browser Storage: reads and writes
- Bookmark State → Browser Storage: persists state
- Chatbot → Chat Content: reads content