# sarzam/miscursions_portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/sarzam/miscursions_portfolio
- Repository: https://github.com/sarzam/miscursions_portfolio

## Overview

Miscursions is a magazine-style portfolio presenting Misbah Shaikh’s profile and work. A visitor enters the React app, follows the cover or issue route, and reads an interactive page-flip issue; a secret-margin route adds an easter-egg page. Content is supplied by local mock data, while shared magazine components handle navigation, page layout, reader count, and theme. The backend and development health-check code are not mapped because the supplied evidence does not establish their role in this visitor workflow; the issue’s detailed interactions are only partly excerpted.

Main entry points: [`frontend/src/App.js`](https://github.com/sarzam/miscursions_portfolio/blob/main/frontend/src/App.js) (App Router), [`frontend/src/pages/CoverPage.jsx`](https://github.com/sarzam/miscursions_portfolio/blob/main/frontend/src/pages/CoverPage.jsx) (Cover Page), [`frontend/src/pages/IssuePage.jsx`](https://github.com/sarzam/miscursions_portfolio/blob/main/frontend/src/pages/IssuePage.jsx) (Flipbook Issue), [`frontend/src/components/magazine/MagazineTopBar.jsx`](https://github.com/sarzam/miscursions_portfolio/blob/main/frontend/src/components/magazine/MagazineTopBar.jsx) (Magazine Navigation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application Routing"]
  node_app_root["App Router<br/>[App.js]"]
  node_not_found["Not Found<br/>[NotFound.jsx]"]
end

subgraph group_editorial["Magazine Experience"]
  node_cover["Cover Page<br/>[CoverPage.jsx]"]
  node_issue["Flipbook Issue<br/>[IssuePage.jsx]"]
  node_secret["Secret Margin<br/>[EasterEggPage.jsx]"]
end

subgraph group_content["Editorial Content"]
  node_parts_a["Profile Pages<br/>[PagesPartA.jsx]"]
  node_parts_b["Portfolio Pages<br/>[PagesPartB.jsx]"]
  node_mock_content["Portfolio Data<br/>[mock.js]"]
end

subgraph group_shared["Shared Presentation"]
  node_page_shell["Page Shell<br/>[PageShell.jsx]"]
  node_top_bar["Magazine Navigation<br/>[MagazineTopBar.jsx]"]
  node_reader_counter["Reader Counter<br/>[ReaderCounter.jsx]"]
  node_theme["Theme State<br/>[ThemeContext.jsx]"]
  node_notifications["Toast UI<br/>[sonner.jsx]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_app_root
node_app_root -->|"routes to"| node_cover
node_app_root -->|"routes to"| node_issue
node_app_root -->|"routes to"| node_secret
node_app_root -->|"routes to"| node_not_found
node_app_root -->|"provides theme"| node_theme
node_app_root -->|"renders"| node_notifications
node_cover -->|"reads"| node_mock_content
node_cover -->|"renders"| node_top_bar
node_cover -->|"renders"| node_reader_counter
node_cover -->|"reads theme"| node_theme
node_issue -->|"renders"| node_top_bar
node_issue -->|"renders"| node_parts_a
node_issue -->|"renders"| node_parts_b
node_issue -->|"renders"| node_page_shell
node_secret -->|"reads"| node_mock_content
node_secret -->|"renders"| node_top_bar
node_parts_a -->|"wraps pages"| node_page_shell
node_parts_a -->|"reads"| node_mock_content
node_parts_b -->|"wraps pages"| node_page_shell
node_parts_b -->|"reads"| node_mock_content
node_top_bar -->|"reads theme"| node_theme

click node_app_root "https://github.com/sarzam/miscursions_portfolio/blob/main/frontend/src/App.js"
click node_cover "https://github.com/sarzam/miscursions_portfolio/blob/main/frontend/src/pages/CoverPage.jsx"
click node_issue "https://github.com/sarzam/miscursions_portfolio/blob/main/frontend/src/pages/IssuePage.jsx"
click node_secret "https://github.com/sarzam/miscursions_portfolio/blob/main/frontend/src/pages/EasterEggPage.jsx"
click node_not_found "https://github.com/sarzam/miscursions_portfolio/blob/main/frontend/src/pages/NotFound.jsx"
click node_parts_a "https://github.com/sarzam/miscursions_portfolio/blob/main/frontend/src/components/magazine/pages/PagesPartA.jsx"
click node_parts_b "https://github.com/sarzam/miscursions_portfolio/blob/main/frontend/src/components/magazine/pages/PagesPartB.jsx"
click node_mock_content "https://github.com/sarzam/miscursions_portfolio/blob/main/frontend/src/mock.js"
click node_page_shell "https://github.com/sarzam/miscursions_portfolio/blob/main/frontend/src/components/magazine/PageShell.jsx"
click node_top_bar "https://github.com/sarzam/miscursions_portfolio/blob/main/frontend/src/components/magazine/MagazineTopBar.jsx"
click node_reader_counter "https://github.com/sarzam/miscursions_portfolio/blob/main/frontend/src/components/magazine/ReaderCounter.jsx"
click node_theme "https://github.com/sarzam/miscursions_portfolio/blob/main/frontend/src/context/ThemeContext.jsx"
click node_notifications "https://github.com/sarzam/miscursions_portfolio/blob/main/frontend/src/components/ui/sonner.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_app_root,node_not_found toneBlue
class node_cover,node_issue,node_secret toneAmber
class node_parts_a,node_parts_b,node_mock_content toneMint
class node_page_shell,node_top_bar,node_reader_counter,node_theme,node_notifications toneRose
class node_visitor toneIndigo
```

## Components

### Application Routing

- [App Router](https://github.com/sarzam/miscursions_portfolio/blob/main/frontend/src/App.js): `frontend/src/App.js`
- [Not Found](https://github.com/sarzam/miscursions_portfolio/blob/main/frontend/src/pages/NotFound.jsx): `frontend/src/pages/NotFound.jsx`

### Magazine Experience

- [Cover Page](https://github.com/sarzam/miscursions_portfolio/blob/main/frontend/src/pages/CoverPage.jsx): `frontend/src/pages/CoverPage.jsx`
- [Flipbook Issue](https://github.com/sarzam/miscursions_portfolio/blob/main/frontend/src/pages/IssuePage.jsx): `frontend/src/pages/IssuePage.jsx`
- [Secret Margin](https://github.com/sarzam/miscursions_portfolio/blob/main/frontend/src/pages/EasterEggPage.jsx): `frontend/src/pages/EasterEggPage.jsx`

### Editorial Content

- [Profile Pages](https://github.com/sarzam/miscursions_portfolio/blob/main/frontend/src/components/magazine/pages/PagesPartA.jsx): `frontend/src/components/magazine/pages/PagesPartA.jsx`
- [Portfolio Pages](https://github.com/sarzam/miscursions_portfolio/blob/main/frontend/src/components/magazine/pages/PagesPartB.jsx): `frontend/src/components/magazine/pages/PagesPartB.jsx`
- [Portfolio Data](https://github.com/sarzam/miscursions_portfolio/blob/main/frontend/src/mock.js): `frontend/src/mock.js`

### Shared Presentation

- [Page Shell](https://github.com/sarzam/miscursions_portfolio/blob/main/frontend/src/components/magazine/PageShell.jsx): `frontend/src/components/magazine/PageShell.jsx`
- [Magazine Navigation](https://github.com/sarzam/miscursions_portfolio/blob/main/frontend/src/components/magazine/MagazineTopBar.jsx): `frontend/src/components/magazine/MagazineTopBar.jsx`
- [Reader Counter](https://github.com/sarzam/miscursions_portfolio/blob/main/frontend/src/components/magazine/ReaderCounter.jsx): `frontend/src/components/magazine/ReaderCounter.jsx`
- [Theme State](https://github.com/sarzam/miscursions_portfolio/blob/main/frontend/src/context/ThemeContext.jsx): `frontend/src/context/ThemeContext.jsx`
- [Toast UI](https://github.com/sarzam/miscursions_portfolio/blob/main/frontend/src/components/ui/sonner.jsx): `frontend/src/components/ui/sonner.jsx`

### Other components

- **Visitor**

## Connections

- Visitor → App Router: opens (evidence: `frontend/src/App.js`)
- App Router → Cover Page: routes to (evidence: `frontend/src/App.js`)
- App Router → Flipbook Issue: routes to (evidence: `frontend/src/App.js`)
- App Router → Secret Margin: routes to (evidence: `frontend/src/App.js`)
- App Router → Not Found: routes to (evidence: `frontend/src/App.js`)
- App Router → Theme State: provides theme (evidence: `frontend/src/App.js`)
- App Router → Toast UI: renders (evidence: `frontend/src/App.js`)
- Cover Page → Portfolio Data: reads (evidence: `frontend/src/pages/CoverPage.jsx`)
- Cover Page → Magazine Navigation: renders (evidence: `frontend/src/pages/CoverPage.jsx`)
- Cover Page → Reader Counter: renders (evidence: `frontend/src/pages/CoverPage.jsx`)
- Cover Page → Theme State: reads theme (evidence: `frontend/src/pages/CoverPage.jsx`)
- Flipbook Issue → Magazine Navigation: renders (evidence: `frontend/src/pages/IssuePage.jsx`)
- Flipbook Issue → Profile Pages: renders (evidence: `frontend/src/pages/IssuePage.jsx`)
- Flipbook Issue → Portfolio Pages: renders (evidence: `frontend/src/pages/IssuePage.jsx`)
- Flipbook Issue → Page Shell: renders (evidence: `frontend/src/pages/IssuePage.jsx`)
- Secret Margin → Portfolio Data: reads (evidence: `frontend/src/pages/EasterEggPage.jsx`)
- Secret Margin → Magazine Navigation: renders (evidence: `frontend/src/pages/EasterEggPage.jsx`)
- Profile Pages → Page Shell: wraps pages (evidence: `frontend/src/components/magazine/pages/PagesPartA.jsx`)
- Profile Pages → Portfolio Data: reads (evidence: `frontend/src/components/magazine/pages/PagesPartA.jsx`)
- Portfolio Pages → Page Shell: wraps pages (evidence: `frontend/src/components/magazine/pages/PagesPartB.jsx`)
- Portfolio Pages → Portfolio Data: reads (evidence: `frontend/src/components/magazine/pages/PagesPartB.jsx`)
- Magazine Navigation → Theme State: reads theme (evidence: `frontend/src/components/magazine/MagazineTopBar.jsx`)