# 3132ganesh/reactlearning architecture

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

- Interactive diagram: https://gitdiagram.com/3132ganesh/reactlearning
- Repository: https://github.com/3132ganesh/reactlearning

## Overview

This repository is a collection of React learning projects: the React.labs dashboard is the central learning workflow, while separate projects demonstrate job cards, CSS styling, and props. The dashboard tracks roadmap completion, presents interactive labs, and persists progress in browser storage. Some README-described lab details are represented at their enclosing component path because their implementation was not sampled; the props and CSS examples also have limited sampled wiring evidence.

Main entry points: [`react_01/src/App.jsx`](https://github.com/3132ganesh/reactlearning/blob/main/react_01/src/App.jsx) (Dashboard), [`react_01/src/components/PlaygroundTab.jsx`](https://github.com/3132ganesh/reactlearning/blob/main/react_01/src/components/PlaygroundTab.jsx) (Interactive Playground), [`03_css/src/App.jsx`](https://github.com/3132ganesh/reactlearning/blob/main/03_css/src/App.jsx) (CSS Sandbox), [`04_cards/src/Components/Cards.jsx`](https://github.com/3132ganesh/reactlearning/blob/main/04_cards/src/Components/Cards.jsx) (Job Card Components)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_hub["Learning Hub"]
  node_hub_app["Dashboard<br/>[App.jsx]"]
  node_progress_store[("Completion Storage<br/>[App.jsx]")]
end

subgraph group_labs["Learning Modules"]
  node_roadmap["Learning Roadmap<br/>[RoadmapTab.jsx]"]
  node_playground["Interactive Playground<br/>[PlaygroundTab.jsx]"]
  node_profile["Profile Widget<br/>[ProfileWidget.jsx]"]
  node_visualizer["Visualizer Pad<br/>[VisualizerPad.jsx]"]
  node_hooks["Hooks Lab<br/>[HooksLabTab.jsx]"]
  node_tasklist["Task List<br/>[TaskList.jsx]"]
end

subgraph group_examples["UI Examples"]
  node_job_app["Job Cards App<br/>[App.jsx]"]
  node_job_cards["Job Card Components<br/>[Cards.jsx]"]
  node_root_job_app["Root Cards App<br/>[App.jsx]"]
  node_css_app["CSS Sandbox<br/>[App.jsx]"]
  node_css_button["Button Example<br/>[button.jsx]"]
  node_css_header["Header Example<br/>[header.jsx]"]
  node_props_app["Props Example<br/>[App.jsx]"]
  node_props_card["Props Card<br/>[Card.jsx]"]
end

node_learner(("Learner"))

node_learner -->|"uses"| node_hub_app
node_hub_app -->|"renders"| node_roadmap
node_hub_app -->|"renders"| node_playground
node_hub_app -->|"renders"| node_hooks
node_hub_app -->|"reads and writes"| node_progress_store
node_hub_app -->|"passes progress"| node_tasklist
node_playground -.->|"renders"| node_profile
node_playground -.->|"renders"| node_visualizer
node_job_app -->|"renders cards"| node_job_cards
node_root_job_app -.->|"renders cards"| node_job_cards
node_css_app -->|"renders"| node_css_button
node_css_app -.->|"intended header"| node_css_header
node_props_app -.->|"intended props"| node_props_card

click node_hub_app "https://github.com/3132ganesh/reactlearning/blob/main/react_01/src/App.jsx"
click node_roadmap "https://github.com/3132ganesh/reactlearning/blob/main/react_01/src/components/RoadmapTab.jsx"
click node_playground "https://github.com/3132ganesh/reactlearning/blob/main/react_01/src/components/PlaygroundTab.jsx"
click node_profile "https://github.com/3132ganesh/reactlearning/blob/main/react_01/src/components/ProfileWidget.jsx"
click node_visualizer "https://github.com/3132ganesh/reactlearning/blob/main/react_01/src/components/VisualizerPad.jsx"
click node_hooks "https://github.com/3132ganesh/reactlearning/blob/main/react_01/src/components/HooksLabTab.jsx"
click node_tasklist "https://github.com/3132ganesh/reactlearning/blob/main/react_01/src/components/TaskList.jsx"
click node_progress_store "https://github.com/3132ganesh/reactlearning/blob/main/react_01/src/App.jsx"
click node_job_app "https://github.com/3132ganesh/reactlearning/blob/main/04_cards/src/App.jsx"
click node_job_cards "https://github.com/3132ganesh/reactlearning/blob/main/04_cards/src/Components/Cards.jsx"
click node_root_job_app "https://github.com/3132ganesh/reactlearning/blob/main/src/App.jsx"
click node_css_app "https://github.com/3132ganesh/reactlearning/blob/main/03_css/src/App.jsx"
click node_css_button "https://github.com/3132ganesh/reactlearning/blob/main/03_css/src/components/button.jsx"
click node_css_header "https://github.com/3132ganesh/reactlearning/blob/main/03_css/src/components/header.jsx"
click node_props_app "https://github.com/3132ganesh/reactlearning/blob/main/03-props/src/App.jsx"
click node_props_card "https://github.com/3132ganesh/reactlearning/blob/main/03-props/src/Comp/Card.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_hub_app,node_progress_store toneBlue
class node_roadmap,node_playground,node_profile,node_visualizer,node_hooks,node_tasklist toneAmber
class node_job_app,node_job_cards,node_root_job_app,node_css_app,node_css_button,node_css_header,node_props_app,node_props_card toneMint
class node_learner toneIndigo
```

## Components

### Learning Hub

- [Dashboard](https://github.com/3132ganesh/reactlearning/blob/main/react_01/src/App.jsx): `react_01/src/App.jsx`
- [Completion Storage](https://github.com/3132ganesh/reactlearning/blob/main/react_01/src/App.jsx): `react_01/src/App.jsx`

### Learning Modules

- [Learning Roadmap](https://github.com/3132ganesh/reactlearning/blob/main/react_01/src/components/RoadmapTab.jsx): `react_01/src/components/RoadmapTab.jsx`
- [Interactive Playground](https://github.com/3132ganesh/reactlearning/blob/main/react_01/src/components/PlaygroundTab.jsx): `react_01/src/components/PlaygroundTab.jsx`
- [Profile Widget](https://github.com/3132ganesh/reactlearning/blob/main/react_01/src/components/ProfileWidget.jsx): `react_01/src/components/ProfileWidget.jsx`
- [Visualizer Pad](https://github.com/3132ganesh/reactlearning/blob/main/react_01/src/components/VisualizerPad.jsx): `react_01/src/components/VisualizerPad.jsx`
- [Hooks Lab](https://github.com/3132ganesh/reactlearning/blob/main/react_01/src/components/HooksLabTab.jsx): `react_01/src/components/HooksLabTab.jsx`
- [Task List](https://github.com/3132ganesh/reactlearning/blob/main/react_01/src/components/TaskList.jsx): `react_01/src/components/TaskList.jsx`

### UI Examples

- [Job Cards App](https://github.com/3132ganesh/reactlearning/blob/main/04_cards/src/App.jsx): `04_cards/src/App.jsx`
- [Job Card Components](https://github.com/3132ganesh/reactlearning/blob/main/04_cards/src/Components/Cards.jsx): `04_cards/src/Components/Cards.jsx`
- [Root Cards App](https://github.com/3132ganesh/reactlearning/blob/main/src/App.jsx): `src/App.jsx`
- [CSS Sandbox](https://github.com/3132ganesh/reactlearning/blob/main/03_css/src/App.jsx): `03_css/src/App.jsx`
- [Button Example](https://github.com/3132ganesh/reactlearning/blob/main/03_css/src/components/button.jsx): `03_css/src/components/button.jsx`
- [Header Example](https://github.com/3132ganesh/reactlearning/blob/main/03_css/src/components/header.jsx): `03_css/src/components/header.jsx`
- [Props Example](https://github.com/3132ganesh/reactlearning/blob/main/03-props/src/App.jsx): `03-props/src/App.jsx`
- [Props Card](https://github.com/3132ganesh/reactlearning/blob/main/03-props/src/Comp/Card.jsx): `03-props/src/Comp/Card.jsx`

### Other components

- **Learner**

## Connections

- Learner → Dashboard: uses
- Dashboard → Learning Roadmap: renders
- Dashboard → Interactive Playground: renders
- Dashboard → Hooks Lab: renders
- Dashboard → Completion Storage: reads and writes
- Dashboard → Task List: passes progress
- Interactive Playground → Profile Widget: renders
- Interactive Playground → Visualizer Pad: renders
- Job Cards App → Job Card Components: renders cards
- Root Cards App → Job Card Components: renders cards
- CSS Sandbox → Button Example: renders
- CSS Sandbox → Header Example: intended header
- Props Example → Props Card: intended props