# amir-moris/dupe-replica-front-end architecture

> Architecture diagram of the GitHub repository amir-moris/dupe-replica-front-end, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-10). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/amir-moris/dupe-replica-front-end
- Repository: https://github.com/amir-moris/dupe-replica-front-end

## Overview

Calcos Front-end is a React product-discovery interface: users submit a product URL or image, the home page sends it to a backend search endpoint, and the returned product and alternatives are displayed. The graph also shows the router/layout and supporting interface states. The sampled files establish the search and rendering flow; other page implementations and some component details were not sampled, so their relationships are omitted.

Main entry points: [`src/AppRouter.jsx`](https://github.com/amir-moris/dupe-replica-front-end/blob/main/src/AppRouter.jsx) (Router and layout), [`pages/HomePage.jsx`](https://github.com/amir-moris/dupe-replica-front-end/blob/main/pages/HomePage.jsx) (Home page), [`src/components/Results.jsx`](https://github.com/amir-moris/dupe-replica-front-end/blob/main/src/components/Results.jsx) (Results view), [`src/components/ProductCard.jsx`](https://github.com/amir-moris/dupe-replica-front-end/blob/main/src/components/ProductCard.jsx) (Alternative card)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App shell"]
  node_main["React entry<br/>[main.jsx]"]
  node_app_root["App root<br/>[App.jsx]"]
  node_router["Router and layout<br/>[AppRouter.jsx]"]
  node_header["Header<br/>[Header.jsx]"]
  node_footer["Footer<br/>[Footer.jsx]"]
  node_static_data["Footer data<br/>[staticData.json]"]
  node_about_page["About page<br/>[AboutPage.jsx]"]
  node_blog_page["Blog page<br/>[BlogPage.jsx]"]
  node_press_page["Press page<br/>[PressPage.jsx]"]
  node_error_page["Error page<br/>[ErrorPage.jsx]"]
end

subgraph group_search["Product search"]
  node_home["Home page<br/>[HomePage.jsx]"]
  node_search_bar["Search bar<br/>[SearchBar.jsx]"]
end

subgraph group_display["Results and display"]
  node_idle["Idle examples<br/>[IdleElement.jsx]"]
  node_loading["Loading state<br/>[LoadingElement.jsx]"]
  node_results["Results view<br/>[Results.jsx]"]
  node_input_card["Input product card"]
  node_product_card["Alternative card<br/>[ProductCard.jsx]"]
end

subgraph group_shared["Shared UI and helpers"]
  node_classifier["String classifier<br/>[utilities.jsx]"]
  node_price["Price display<br/>[utilsElements.jsx]"]
  node_prop_types["Product prop types<br/>[propTypes.jsx]"]
  node_home_element["Home element<br/>[HomeElement.jsx]"]
  node_loading_text["Loading text<br/>[LoadingText.jsx]"]
end

node_user(("Visitor"))
node_backend{{"Search backend"}}

node_user -->|"opens"| node_router
node_main -->|"renders"| node_app_root
node_app_root -->|"renders"| node_router
node_router -->|"renders"| node_header
node_router -->|"renders"| node_footer
node_router -->|"fetches"| node_static_data
node_router -->|"routes to"| node_home
node_router -->|"routes errors to"| node_error_page
node_router -->|"passes data"| node_footer
node_home -->|"renders"| node_search_bar
node_home -->|"renders"| node_idle
node_home -->|"renders"| node_loading
node_home -->|"renders"| node_results
node_search_bar -->|"classifies input"| node_classifier
node_home -->|"posts URL or image"| node_backend
node_backend -->|"returns product data"| node_home
node_results -->|"renders"| node_input_card
node_results -->|"renders"| node_product_card
node_product_card -->|"renders"| node_price
node_results -->|"validates props"| node_prop_types
node_input_card -->|"validates props"| node_prop_types
node_product_card -->|"validates props"| node_prop_types

click node_main "https://github.com/amir-moris/dupe-replica-front-end/blob/main/src/main.jsx"
click node_app_root "https://github.com/amir-moris/dupe-replica-front-end/blob/main/src/App.jsx"
click node_router "https://github.com/amir-moris/dupe-replica-front-end/blob/main/src/AppRouter.jsx"
click node_home "https://github.com/amir-moris/dupe-replica-front-end/blob/main/pages/HomePage.jsx"
click node_search_bar "https://github.com/amir-moris/dupe-replica-front-end/blob/main/src/components/SearchBar.jsx"
click node_classifier "https://github.com/amir-moris/dupe-replica-front-end/blob/main/src/utils/utilities.jsx"
click node_idle "https://github.com/amir-moris/dupe-replica-front-end/blob/main/src/components/IdleElement.jsx"
click node_loading "https://github.com/amir-moris/dupe-replica-front-end/blob/main/src/components/LoadingElement.jsx"
click node_results "https://github.com/amir-moris/dupe-replica-front-end/blob/main/src/components/Results.jsx"
click node_input_card "https://github.com/amir-moris/dupe-replica-front-end/blob/main/src/components/InputProductCard.jsx"
click node_product_card "https://github.com/amir-moris/dupe-replica-front-end/blob/main/src/components/ProductCard.jsx"
click node_price "https://github.com/amir-moris/dupe-replica-front-end/blob/main/src/components/utilsElements.jsx"
click node_prop_types "https://github.com/amir-moris/dupe-replica-front-end/blob/main/src/utils/propTypes.jsx"
click node_header "https://github.com/amir-moris/dupe-replica-front-end/blob/main/src/components/Header.jsx"
click node_footer "https://github.com/amir-moris/dupe-replica-front-end/blob/main/src/components/Footer.jsx"
click node_static_data "https://github.com/amir-moris/dupe-replica-front-end/blob/main/public/staticData.json"
click node_home_element "https://github.com/amir-moris/dupe-replica-front-end/blob/main/src/components/HomeElement.jsx"
click node_loading_text "https://github.com/amir-moris/dupe-replica-front-end/blob/main/src/components/LoadingText.jsx"
click node_about_page "https://github.com/amir-moris/dupe-replica-front-end/blob/main/pages/AboutPage.jsx"
click node_blog_page "https://github.com/amir-moris/dupe-replica-front-end/blob/main/pages/BlogPage.jsx"
click node_press_page "https://github.com/amir-moris/dupe-replica-front-end/blob/main/pages/PressPage.jsx"
click node_error_page "https://github.com/amir-moris/dupe-replica-front-end/blob/main/pages/ErrorPage.jsx"

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_main,node_app_root,node_router,node_header,node_footer,node_static_data,node_about_page,node_blog_page,node_press_page,node_error_page toneBlue
class node_home,node_search_bar toneAmber
class node_idle,node_loading,node_results,node_input_card,node_product_card toneMint
class node_classifier,node_price,node_prop_types,node_home_element,node_loading_text toneRose
class node_user,node_backend toneIndigo
```

## Components

### App shell

- [React entry](https://github.com/amir-moris/dupe-replica-front-end/blob/main/src/main.jsx): `src/main.jsx`
- [App root](https://github.com/amir-moris/dupe-replica-front-end/blob/main/src/App.jsx): `src/App.jsx`
- [Router and layout](https://github.com/amir-moris/dupe-replica-front-end/blob/main/src/AppRouter.jsx): `src/AppRouter.jsx`
- [Header](https://github.com/amir-moris/dupe-replica-front-end/blob/main/src/components/Header.jsx): `src/components/Header.jsx`
- [Footer](https://github.com/amir-moris/dupe-replica-front-end/blob/main/src/components/Footer.jsx): `src/components/Footer.jsx`
- [Footer data](https://github.com/amir-moris/dupe-replica-front-end/blob/main/public/staticData.json): `public/staticData.json`
- [About page](https://github.com/amir-moris/dupe-replica-front-end/blob/main/pages/AboutPage.jsx): `pages/AboutPage.jsx`
- [Blog page](https://github.com/amir-moris/dupe-replica-front-end/blob/main/pages/BlogPage.jsx): `pages/BlogPage.jsx`
- [Press page](https://github.com/amir-moris/dupe-replica-front-end/blob/main/pages/PressPage.jsx): `pages/PressPage.jsx`
- [Error page](https://github.com/amir-moris/dupe-replica-front-end/blob/main/pages/ErrorPage.jsx): `pages/ErrorPage.jsx`

### Product search

- [Home page](https://github.com/amir-moris/dupe-replica-front-end/blob/main/pages/HomePage.jsx): `pages/HomePage.jsx`
- [Search bar](https://github.com/amir-moris/dupe-replica-front-end/blob/main/src/components/SearchBar.jsx): `src/components/SearchBar.jsx`

### Results and display

- [Idle examples](https://github.com/amir-moris/dupe-replica-front-end/blob/main/src/components/IdleElement.jsx): `src/components/IdleElement.jsx`
- [Loading state](https://github.com/amir-moris/dupe-replica-front-end/blob/main/src/components/LoadingElement.jsx): `src/components/LoadingElement.jsx`
- [Results view](https://github.com/amir-moris/dupe-replica-front-end/blob/main/src/components/Results.jsx): `src/components/Results.jsx`
- [Input product card](https://github.com/amir-moris/dupe-replica-front-end/blob/main/src/components/InputProductCard.jsx): `src/components/InputProductCard.jsx`
- [Alternative card](https://github.com/amir-moris/dupe-replica-front-end/blob/main/src/components/ProductCard.jsx): `src/components/ProductCard.jsx`

### Shared UI and helpers

- [String classifier](https://github.com/amir-moris/dupe-replica-front-end/blob/main/src/utils/utilities.jsx): `src/utils/utilities.jsx`
- [Price display](https://github.com/amir-moris/dupe-replica-front-end/blob/main/src/components/utilsElements.jsx): `src/components/utilsElements.jsx`
- [Product prop types](https://github.com/amir-moris/dupe-replica-front-end/blob/main/src/utils/propTypes.jsx): `src/utils/propTypes.jsx`
- [Home element](https://github.com/amir-moris/dupe-replica-front-end/blob/main/src/components/HomeElement.jsx): `src/components/HomeElement.jsx`
- [Loading text](https://github.com/amir-moris/dupe-replica-front-end/blob/main/src/components/LoadingText.jsx): `src/components/LoadingText.jsx`

### Other components

- **Visitor**
- **Search backend**

## Connections

- Visitor → Router and layout: opens (evidence: `src/AppRouter.jsx`)
- React entry → App root: renders (evidence: `src/main.jsx`)
- App root → Router and layout: renders (evidence: `src/App.jsx`)
- Router and layout → Header: renders (evidence: `src/AppRouter.jsx`)
- Router and layout → Footer: renders (evidence: `src/AppRouter.jsx`)
- Router and layout → Footer data: fetches (evidence: `src/AppRouter.jsx`)
- Router and layout → Home page: routes to (evidence: `src/AppRouter.jsx`)
- Router and layout → Error page: routes errors to (evidence: `src/AppRouter.jsx`)
- Router and layout → Footer: passes data (evidence: `src/AppRouter.jsx`)
- Home page → Search bar: renders (evidence: `pages/HomePage.jsx`)
- Home page → Idle examples: renders (evidence: `pages/HomePage.jsx`)
- Home page → Loading state: renders (evidence: `pages/HomePage.jsx`)
- Home page → Results view: renders (evidence: `pages/HomePage.jsx`)
- Search bar → String classifier: classifies input (evidence: `src/components/SearchBar.jsx`)
- Home page → Search backend: posts URL or image (evidence: `pages/HomePage.jsx`)
- Search backend → Home page: returns product data (evidence: `pages/HomePage.jsx`)
- Results view → Input product card: renders (evidence: `src/components/Results.jsx`)
- Results view → Alternative card: renders (evidence: `src/components/Results.jsx`)
- Alternative card → Price display: renders (evidence: `src/components/ProductCard.jsx`)
- Results view → Product prop types: validates props (evidence: `src/components/Results.jsx`)
- Input product card → Product prop types: validates props (evidence: `src/components/InputProductCard.jsx`)
- Alternative card → Product prop types: validates props (evidence: `src/components/ProductCard.jsx`)