# renu-123-pixel/leetcode-patterns architecture

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

- Interactive diagram: https://gitdiagram.com/renu-123-pixel/leetcode-patterns
- Repository: https://github.com/renu-123-pixel/leetcode-patterns

## Overview

Leetcode Patterns is a web study guide for preparing for software-engineering interviews. Users browse a pattern-organized question list, filter questions, track completion, and see pattern-frequency summaries; separate tabs provide problem-solving tips and acknowledgements. The React entry point assembles navigation and tab content, while question metadata is loaded from a bundled JSON dataset. A scheduled Python updater fetches metadata from LeetCode and writes it back to that dataset. The graph reflects documented capabilities; some table internals and their exact wiring are only partially sampled.

Main entry points: [`src/components/Shared/Tracking/index.js`](https://github.com/renu-123-pixel/leetcode-patterns/blob/main/src/components/Shared/Tracking/index.js) (Tracking module), [`src/components/Tabs/index.js`](https://github.com/renu-123-pixel/leetcode-patterns/blob/main/src/components/Tabs/index.js) (Content tabs), [`src/components/Table/index.js`](https://github.com/renu-123-pixel/leetcode-patterns/blob/main/src/components/Table/index.js) (Question table), [`src/components/App.js`](https://github.com/renu-123-pixel/leetcode-patterns/blob/main/src/components/App.js) (App shell)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Web application"]
  node_entry["React entry<br/>[index.js]"]
  node_app_shell["App shell<br/>[App.js]"]
  node_navigation["Navigation<br/>[index.js]"]
  node_dark_mode["Dark mode<br/>[index.js]"]
  node_tabs["Content tabs<br/>[index.js]"]
end

subgraph group_study["Study experience"]
  node_table["Question table<br/>[index.js]"]
  node_pattern_frequencies["Pattern frequencies<br/>[index.js]"]
  node_tips["Problem-solving tips<br/>[index.js]"]
  node_acknowledgements["Acknowledgements<br/>[index.js]"]
end

subgraph group_data["Question data"]
  node_data_loader["Question data loader<br/>[index.js]"]
  node_questions["Question dataset<br/>[questions.json]"]
  node_updater["Metadata updater"]
  node_browser_storage[("Browser local storage")]
end

subgraph group_telemetry["External services"]
  node_tracking["Tracking module<br/>[index.js]"]
  node_leetcode{{"LeetCode API"}}
  node_analytics{{"Analytics service"}}
end

node_learner(("Learner"))

node_learner -->|"opens app"| node_entry
node_entry -->|"renders"| node_app_shell
node_app_shell -->|"renders"| node_navigation
node_app_shell -->|"renders"| node_tabs
node_navigation -->|"renders"| node_dark_mode
node_tabs -->|"renders"| node_table
node_tabs -->|"renders"| node_tips
node_tabs -->|"renders"| node_acknowledgements
node_table -->|"uses questions"| node_data_loader
node_data_loader -->|"loads and sorts"| node_questions
node_table -->|"passes filtered rows"| node_pattern_frequencies
node_table -->|"reads and writes progress"| node_browser_storage
node_dark_mode -->|"reads and writes mode"| node_browser_storage
node_updater -->|"fetches metadata"| node_leetcode
node_updater -->|"reads and updates"| node_questions
node_app_shell -->|"initializes tracking"| node_tracking
node_tabs -->|"reports tab events"| node_tracking
node_navigation -->|"reports link events"| node_tracking
node_table -->|"reports table events"| node_tracking
node_acknowledgements -->|"reports link events"| node_tracking
node_tracking -->|"sends events"| node_analytics

click node_entry "https://github.com/renu-123-pixel/leetcode-patterns/blob/main/src/index.js"
click node_app_shell "https://github.com/renu-123-pixel/leetcode-patterns/blob/main/src/components/App.js"
click node_navigation "https://github.com/renu-123-pixel/leetcode-patterns/blob/main/src/components/Navigation/index.js"
click node_dark_mode "https://github.com/renu-123-pixel/leetcode-patterns/blob/main/src/components/Dark-Mode/index.js"
click node_tabs "https://github.com/renu-123-pixel/leetcode-patterns/blob/main/src/components/Tabs/index.js"
click node_table "https://github.com/renu-123-pixel/leetcode-patterns/blob/main/src/components/Table/index.js"
click node_pattern_frequencies "https://github.com/renu-123-pixel/leetcode-patterns/blob/main/src/components/PatternFrequencies/index.js"
click node_tips "https://github.com/renu-123-pixel/leetcode-patterns/blob/main/src/components/Tips/index.js"
click node_acknowledgements "https://github.com/renu-123-pixel/leetcode-patterns/blob/main/src/components/Acknowledgements/index.js"
click node_data_loader "https://github.com/renu-123-pixel/leetcode-patterns/blob/main/src/data/index.js"
click node_questions "https://github.com/renu-123-pixel/leetcode-patterns/blob/main/src/data/questions.json"
click node_updater "https://github.com/renu-123-pixel/leetcode-patterns/blob/main/cron/update_questions.py"
click node_tracking "https://github.com/renu-123-pixel/leetcode-patterns/blob/main/src/components/Shared/Tracking/index.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_shell,node_navigation,node_dark_mode,node_tabs toneBlue
class node_table,node_pattern_frequencies,node_tips,node_acknowledgements toneAmber
class node_data_loader,node_questions,node_updater,node_browser_storage toneMint
class node_tracking,node_leetcode,node_analytics toneRose
class node_learner toneIndigo
```

## Components

### Web application

- [React entry](https://github.com/renu-123-pixel/leetcode-patterns/blob/main/src/index.js): `src/index.js`
- [App shell](https://github.com/renu-123-pixel/leetcode-patterns/blob/main/src/components/App.js): `src/components/App.js`
- [Navigation](https://github.com/renu-123-pixel/leetcode-patterns/blob/main/src/components/Navigation/index.js): `src/components/Navigation/index.js`
- [Dark mode](https://github.com/renu-123-pixel/leetcode-patterns/blob/main/src/components/Dark-Mode/index.js): `src/components/Dark-Mode/index.js`
- [Content tabs](https://github.com/renu-123-pixel/leetcode-patterns/blob/main/src/components/Tabs/index.js): `src/components/Tabs/index.js`

### Study experience

- [Question table](https://github.com/renu-123-pixel/leetcode-patterns/blob/main/src/components/Table/index.js): `src/components/Table/index.js`
- [Pattern frequencies](https://github.com/renu-123-pixel/leetcode-patterns/blob/main/src/components/PatternFrequencies/index.js): `src/components/PatternFrequencies/index.js`
- [Problem-solving tips](https://github.com/renu-123-pixel/leetcode-patterns/blob/main/src/components/Tips/index.js): `src/components/Tips/index.js`
- [Acknowledgements](https://github.com/renu-123-pixel/leetcode-patterns/blob/main/src/components/Acknowledgements/index.js): `src/components/Acknowledgements/index.js`

### Question data

- [Question data loader](https://github.com/renu-123-pixel/leetcode-patterns/blob/main/src/data/index.js): `src/data/index.js`
- [Question dataset](https://github.com/renu-123-pixel/leetcode-patterns/blob/main/src/data/questions.json): `src/data/questions.json`
- [Metadata updater](https://github.com/renu-123-pixel/leetcode-patterns/blob/main/cron/update_questions.py): `cron/update_questions.py`
- **Browser local storage**

### External services

- [Tracking module](https://github.com/renu-123-pixel/leetcode-patterns/blob/main/src/components/Shared/Tracking/index.js): `src/components/Shared/Tracking/index.js`
- **LeetCode API**
- **Analytics service**

### Other components

- **Learner**

## Connections

- Learner → React entry: opens app
- React entry → App shell: renders
- App shell → Navigation: renders
- App shell → Content tabs: renders
- Navigation → Dark mode: renders
- Content tabs → Question table: renders
- Content tabs → Problem-solving tips: renders
- Content tabs → Acknowledgements: renders
- Question table → Question data loader: uses questions
- Question data loader → Question dataset: loads and sorts
- Question table → Pattern frequencies: passes filtered rows
- Question table → Browser local storage: reads and writes progress
- Dark mode → Browser local storage: reads and writes mode
- Metadata updater → LeetCode API: fetches metadata
- Metadata updater → Question dataset: reads and updates
- App shell → Tracking module: initializes tracking
- Content tabs → Tracking module: reports tab events
- Navigation → Tracking module: reports link events
- Question table → Tracking module: reports table events
- Acknowledgements → Tracking module: reports link events
- Tracking module → Analytics service: sends events