# ishubh-10/webengage-campaigns architecture

> Architecture diagram of the GitHub repository ishubh-10/webengage-campaigns, 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/ishubh-10/webengage-campaigns
- Repository: https://github.com/ishubh-10/webengage-campaigns

## Overview

Campaign Hub is a gallery for browsing and reusing campaign ideas, with guest access and an admin workflow for managing campaign entries. The React app routes users from login to the gallery; the gallery supports search/filtering, previewing campaign code, and admin editing and deletion. The Express backend exposes campaign and admin-credential endpoints backed by MySQL. Image upload is visible in the gallery excerpt, but its cloud provider and request details are not. The separate API component is present but not shown as mounted or connected to the main app.

Main entry points: [`src/Frontend/App.jsx`](https://github.com/ishubh-10/webengage-campaigns/blob/main/src/Frontend/App.jsx) (App Routing), [`src/main.jsx`](https://github.com/ishubh-10/webengage-campaigns/blob/main/src/main.jsx) (React Entry), [`src/Frontend/CampaignGallery.jsx`](https://github.com/ishubh-10/webengage-campaigns/blob/main/src/Frontend/CampaignGallery.jsx) (Campaign Gallery), [`Backend/server.cjs`](https://github.com/ishubh-10/webengage-campaigns/blob/main/Backend/server.cjs) (HTTP API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application Shell"]
  node_entry["React Entry<br/>[main.jsx]"]
  node_routing["App Routing<br/>[App.jsx]"]
end

subgraph group_experience["User Experience"]
  node_login["Login and Guest Access<br/>[Login.jsx]"]
  node_gallery["Campaign Gallery"]
  node_header["Gallery Header<br/>[Header.jsx]"]
  node_legacy_api["Standalone API UI<br/>[API.jsx]"]
end

subgraph group_services["API Service"]
  node_backend["HTTP API<br/>[server.cjs]"]
end

subgraph group_data["Campaign Data"]
  node_mysql[("MySQL Campaign Store")]
end

node_visitor(("Visitor"))

node_visitor -->|"opens app"| node_entry
node_entry -->|"renders"| node_routing
node_routing -->|"routes to"| node_login
node_routing -->|"routes to"| node_gallery
node_gallery -->|"renders"| node_header
node_backend -->|"queries"| node_mysql

click node_entry "https://github.com/ishubh-10/webengage-campaigns/blob/main/src/main.jsx"
click node_routing "https://github.com/ishubh-10/webengage-campaigns/blob/main/src/Frontend/App.jsx"
click node_login "https://github.com/ishubh-10/webengage-campaigns/blob/main/src/Frontend/Login.jsx"
click node_gallery "https://github.com/ishubh-10/webengage-campaigns/blob/main/src/Frontend/CampaignGallery.jsx"
click node_header "https://github.com/ishubh-10/webengage-campaigns/blob/main/src/Frontend/Header.jsx"
click node_legacy_api "https://github.com/ishubh-10/webengage-campaigns/blob/main/src/Frontend/API.jsx"
click node_backend "https://github.com/ishubh-10/webengage-campaigns/blob/main/Backend/server.cjs"

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_routing toneBlue
class node_login,node_gallery,node_header,node_legacy_api toneAmber
class node_backend toneMint
class node_mysql toneRose
class node_visitor toneIndigo
```

## Components

### Application Shell

- [React Entry](https://github.com/ishubh-10/webengage-campaigns/blob/main/src/main.jsx): `src/main.jsx`
- [App Routing](https://github.com/ishubh-10/webengage-campaigns/blob/main/src/Frontend/App.jsx): `src/Frontend/App.jsx`

### User Experience

- [Login and Guest Access](https://github.com/ishubh-10/webengage-campaigns/blob/main/src/Frontend/Login.jsx): `src/Frontend/Login.jsx`
- [Campaign Gallery](https://github.com/ishubh-10/webengage-campaigns/blob/main/src/Frontend/CampaignGallery.jsx): `src/Frontend/CampaignGallery.jsx`
- [Gallery Header](https://github.com/ishubh-10/webengage-campaigns/blob/main/src/Frontend/Header.jsx): `src/Frontend/Header.jsx`
- [Standalone API UI](https://github.com/ishubh-10/webengage-campaigns/blob/main/src/Frontend/API.jsx): `src/Frontend/API.jsx`

### API Service

- [HTTP API](https://github.com/ishubh-10/webengage-campaigns/blob/main/Backend/server.cjs): `Backend/server.cjs`

### Campaign Data

- **MySQL Campaign Store**

### Other components

- **Visitor**

## Connections

- Visitor → React Entry: opens app (evidence: `src/main.jsx`)
- React Entry → App Routing: renders (evidence: `src/main.jsx`)
- App Routing → Login and Guest Access: routes to (evidence: `src/Frontend/App.jsx`)
- App Routing → Campaign Gallery: routes to (evidence: `src/Frontend/App.jsx`)
- Campaign Gallery → Gallery Header: renders (evidence: `src/Frontend/CampaignGallery.jsx`)
- HTTP API → MySQL Campaign Store: queries (evidence: `Backend/server.cjs`)