How amir-moris/dupe-replica-front-end works
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: AppRouter.jsx Router and layout · HomePage.jsx Home page · Results.jsx Results view · ProductCard.jsx Alternative card
Components 24
App shell
- React entry
src/main.jsx - App root
src/App.jsx - Router and layout
src/AppRouter.jsx - Header
src/components/Header.jsx - Footer
src/components/Footer.jsx - Footer data
public/staticData.json - About page
pages/AboutPage.jsx - Blog page
pages/BlogPage.jsx - Press page
pages/PressPage.jsx - Error page
pages/ErrorPage.jsx
Product search
- Home page
pages/HomePage.jsx - Search bar
src/components/SearchBar.jsx
Results and display
- Idle examples
src/components/IdleElement.jsx - Loading state
src/components/LoadingElement.jsx - Results view
src/components/Results.jsx - Input product card
src/components/InputProductCard.jsx - Alternative card
src/components/ProductCard.jsx
Shared UI and helpers
- String classifier
src/utils/utilities.jsx - Price display
src/components/utilsElements.jsx - Product prop types
src/utils/propTypes.jsx - Home element
src/components/HomeElement.jsx - Loading text
src/components/LoadingText.jsx
Other components
- Visitor
- Search backend
Connections 22
- Visitor → Router and layout: opens
src/AppRouter.jsx - React entry → App root: renders
src/main.jsx - App root → Router and layout: renders
src/App.jsx - Router and layout → Header: renders
src/AppRouter.jsx - Router and layout → Footer: renders
src/AppRouter.jsx - Router and layout → Footer data: fetches
src/AppRouter.jsx - Router and layout → Home page: routes to
src/AppRouter.jsx - Router and layout → Error page: routes errors to
src/AppRouter.jsx - Router and layout → Footer: passes data
src/AppRouter.jsx - Home page → Search bar: renders
pages/HomePage.jsx - Home page → Idle examples: renders
pages/HomePage.jsx - Home page → Loading state: renders
pages/HomePage.jsx - Home page → Results view: renders
pages/HomePage.jsx - Search bar → String classifier: classifies input
src/components/SearchBar.jsx - Home page → Search backend: posts URL or image
pages/HomePage.jsx - Search backend → Home page: returns product data
pages/HomePage.jsx - Results view → Input product card: renders
src/components/Results.jsx - Results view → Alternative card: renders
src/components/Results.jsx - Alternative card → Price display: renders
src/components/ProductCard.jsx - Results view → Product prop types: validates props
src/components/Results.jsx - Input product card → Product prop types: validates props
src/components/InputProductCard.jsx - Alternative card → Product prop types: validates props
src/components/ProductCard.jsx