# afnanaghai4/fyp-webapp architecture

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

- Interactive diagram: https://gitdiagram.com/afnanaghai4/fyp-webapp
- Repository: https://github.com/afnanaghai4/fyp-webapp

## Overview

MSCD is a React web app presenting melanoma information and a dermoscopic-image prediction interface. Visitors enter through the home page, navigate to the service, upload an image, and receive a displayed prediction response from a local HTTP endpoint. The app also provides doctor-oriented information, melanoma education, and research content. The graph reflects the routes and upload request shown in sampled source; no backend implementation was present in the supplied tree.

Main entry points: [`src/App.js`](https://github.com/afnanaghai4/fyp-webapp/blob/master/src/App.js) (Router and routes), [`src/services.js`](https://github.com/afnanaghai4/fyp-webapp/blob/master/src/services.js) (Image prediction UI), [`src/navbar.js`](https://github.com/afnanaghai4/fyp-webapp/blob/master/src/navbar.js) (Navigation bar), [`src/frontpage.js`](https://github.com/afnanaghai4/fyp-webapp/blob/master/src/frontpage.js) (Home page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["App shell"]
  node_entry["React mount<br/>[index.js]"]
  node_app["Router and routes<br/>[App.js]"]
  node_nav["Navigation bar<br/>[navbar.js]"]
  node_footer["Footer<br/>[footer1.js]"]
end

subgraph group_service["Prediction service"]
  node_service["Image prediction UI<br/>[services.js]"]
  node_predictor{{"Prediction endpoint"}}
end

subgraph group_content["Information pages"]
  node_home["Home page<br/>[frontpage.js]"]
  node_doctor["Doctor information<br/>[fordoctors.js]"]
  node_melanoma["Melanoma education<br/>[melanoma.js]"]
  node_research["Research content<br/>[research.js]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens app"| node_entry
node_entry -->|"mounts"| node_app
node_app -->|"routes to /"| node_home
node_app -->|"routes to /fordoctor"| node_doctor
node_app -->|"routes to /melanoma"| node_melanoma
node_app -->|"routes to /research"| node_research
node_app -->|"routes to /services"| node_service
node_app -->|"routes to /footer"| node_footer
node_home -->|"links to"| node_service
node_home -->|"renders"| node_nav
node_doctor -->|"renders"| node_nav
node_melanoma -->|"renders"| node_nav
node_research -->|"renders"| node_nav
node_service -->|"renders"| node_nav
node_visitor -->|"uploads image"| node_service
node_service -->|"posts image data"| node_predictor
node_predictor -->|"returns prediction"| node_service

click node_entry "https://github.com/afnanaghai4/fyp-webapp/blob/master/src/index.js"
click node_app "https://github.com/afnanaghai4/fyp-webapp/blob/master/src/App.js"
click node_nav "https://github.com/afnanaghai4/fyp-webapp/blob/master/src/navbar.js"
click node_footer "https://github.com/afnanaghai4/fyp-webapp/blob/master/src/footer1.js"
click node_home "https://github.com/afnanaghai4/fyp-webapp/blob/master/src/frontpage.js"
click node_doctor "https://github.com/afnanaghai4/fyp-webapp/blob/master/src/fordoctors.js"
click node_melanoma "https://github.com/afnanaghai4/fyp-webapp/blob/master/src/melanoma.js"
click node_research "https://github.com/afnanaghai4/fyp-webapp/blob/master/src/research.js"
click node_service "https://github.com/afnanaghai4/fyp-webapp/blob/master/src/services.js"

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_app,node_nav,node_footer toneBlue
class node_service,node_predictor toneAmber
class node_home,node_doctor,node_melanoma,node_research toneMint
class node_visitor toneIndigo
```

## Components

### App shell

- [React mount](https://github.com/afnanaghai4/fyp-webapp/blob/master/src/index.js): `src/index.js`
- [Router and routes](https://github.com/afnanaghai4/fyp-webapp/blob/master/src/App.js): `src/App.js`
- [Navigation bar](https://github.com/afnanaghai4/fyp-webapp/blob/master/src/navbar.js): `src/navbar.js`
- [Footer](https://github.com/afnanaghai4/fyp-webapp/blob/master/src/footer1.js): `src/footer1.js`

### Prediction service

- [Image prediction UI](https://github.com/afnanaghai4/fyp-webapp/blob/master/src/services.js): `src/services.js`
- **Prediction endpoint**

### Information pages

- [Home page](https://github.com/afnanaghai4/fyp-webapp/blob/master/src/frontpage.js): `src/frontpage.js`
- [Doctor information](https://github.com/afnanaghai4/fyp-webapp/blob/master/src/fordoctors.js): `src/fordoctors.js`
- [Melanoma education](https://github.com/afnanaghai4/fyp-webapp/blob/master/src/melanoma.js): `src/melanoma.js`
- [Research content](https://github.com/afnanaghai4/fyp-webapp/blob/master/src/research.js): `src/research.js`

### Other components

- **Visitor**

## Connections

- Visitor → React mount: opens app (evidence: `src/index.js`)
- React mount → Router and routes: mounts (evidence: `src/index.js`)
- Router and routes → Home page: routes to / (evidence: `src/App.js`)
- Router and routes → Doctor information: routes to /fordoctor (evidence: `src/App.js`)
- Router and routes → Melanoma education: routes to /melanoma (evidence: `src/App.js`)
- Router and routes → Research content: routes to /research (evidence: `src/App.js`)
- Router and routes → Image prediction UI: routes to /services (evidence: `src/App.js`)
- Router and routes → Footer: routes to /footer (evidence: `src/App.js`)
- Home page → Image prediction UI: links to (evidence: `src/frontpage.js`)
- Home page → Navigation bar: renders (evidence: `src/frontpage.js`)
- Doctor information → Navigation bar: renders (evidence: `src/fordoctors.js`)
- Melanoma education → Navigation bar: renders (evidence: `src/melanoma.js`)
- Research content → Navigation bar: renders (evidence: `src/research.js`)
- Image prediction UI → Navigation bar: renders (evidence: `src/services.js`)
- Visitor → Image prediction UI: uploads image (evidence: `src/services.js`)
- Image prediction UI → Prediction endpoint: posts image data (evidence: `src/services.js`)
- Prediction endpoint → Image prediction UI: returns prediction (evidence: `src/services.js`)