# arminshaikhy/frontend-interview-questions architecture

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

- Interactive diagram: https://gitdiagram.com/arminshaikhy/frontend-interview-questions
- Repository: https://github.com/arminshaikhy/frontend-interview-questions

## Overview

This repository is a bilingual frontend-interview study collection, not an application runtime. The documented learner workflow is to browse the README’s topic index and study the linked question files; the README also documents a parallel Persian collection. The tree and README establish the category links, but no question-file contents or runtime behavior were sampled.

Main entry points: [`README.md`](https://github.com/arminshaikhy/frontend-interview-questions/blob/main/README.md) (Topic Index), [`persian`](https://github.com/arminshaikhy/frontend-interview-questions/tree/main/persian) (Persian Collection), [`core-react-vue-concepts/questions.md`](https://github.com/arminshaikhy/frontend-interview-questions/blob/main/core-react-vue-concepts/questions.md) (React and Vue), [`deep-frontend-development/questions.md`](https://github.com/arminshaikhy/frontend-interview-questions/blob/main/deep-frontend-development/questions.md) (Deep Frontend)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_catalog["Study Catalog"]
  node_readme["Topic Index<br/>[README.md]"]
  node_persian["Persian Collection"]
end

subgraph group_engineering["Frontend Engineering"]
  node_core["React and Vue<br/>[questions.md]"]
  node_deep["Deep Frontend<br/>[questions.md]"]
  node_typescript["TypeScript and JavaScript<br/>[questions.md]"]
  node_api["API Collaboration<br/>[questions.md]"]
  node_security["Frontend Security<br/>[questions.md]"]
  node_build["Build Tools<br/>[questions.md]"]
end

subgraph group_webcraft["Web Craft"]
  node_css["CSS and Styling<br/>[questions.md]"]
  node_cssmodels["CSS Mental Models<br/>[questions.md]"]
  node_html["HTML Mental Models<br/>[questions.md]"]
  node_accessibility["Web Accessibility<br/>[questions.md]"]
  node_performance["Performance Optimization<br/>[questions.md]"]
  node_budgets["Performance Budgets<br/>[questions.md]"]
  node_pwas["PWAs and Offline<br/>[questions.md]"]
  node_emerging["Emerging Trends<br/>[questions.md]"]
end

subgraph group_architecture["Systems and Architecture"]
  node_advanced["Advanced Features<br/>[questions.md]"]
  node_micro["Micro-Frontends<br/>[questions.md]"]
  node_spa["Single-Page Apps<br/>[questions.md]"]
  node_system["Frontend System Design<br/>[questions.md]"]
  node_patterns["Design Patterns<br/>[questions.md]"]
  node_state["State Management<br/>[questions.md]"]
end

subgraph group_practice["Practice and Collaboration"]
  node_scenarios["Scenario Questions<br/>[questions.md]"]
  node_testing["Testing<br/>[questions.md]"]
  node_teamwork["Teamwork Practices<br/>[questions.md]"]
  node_leadership["Leadership Collaboration<br/>[questions.md]"]
  node_cicd["CI/CD Monitoring<br/>[questions.md]"]
end

node_learner(("Learner"))

node_learner -->|"browses index"| node_readme
node_readme -->|"links collection"| node_persian
node_readme -->|"links questions"| node_advanced
node_readme -->|"links questions"| node_micro
node_readme -->|"links questions"| node_spa
node_readme -->|"links questions"| node_system
node_readme -->|"links questions"| node_patterns
node_readme -->|"links questions"| node_state
node_readme -->|"links questions"| node_core
node_readme -->|"links questions"| node_deep
node_readme -->|"links questions"| node_typescript
node_readme -->|"links questions"| node_api
node_readme -->|"links questions"| node_security
node_readme -->|"links questions"| node_build
node_readme -->|"links questions"| node_css
node_readme -->|"links questions"| node_cssmodels
node_readme -->|"links questions"| node_html
node_readme -->|"links questions"| node_accessibility
node_readme -->|"links questions"| node_performance
node_readme -->|"links questions"| node_budgets
node_readme -->|"links questions"| node_pwas
node_readme -->|"links questions"| node_emerging
node_readme -->|"links questions"| node_scenarios
node_readme -->|"links questions"| node_testing
node_readme -->|"links questions"| node_teamwork
node_readme -->|"links questions"| node_leadership
node_readme -->|"links questions"| node_cicd

click node_readme "https://github.com/arminshaikhy/frontend-interview-questions/blob/main/README.md"
click node_persian "https://github.com/arminshaikhy/frontend-interview-questions/tree/main/persian"
click node_advanced "https://github.com/arminshaikhy/frontend-interview-questions/blob/main/advanced-features-and-architecture/questions.md"
click node_micro "https://github.com/arminshaikhy/frontend-interview-questions/blob/main/micro-frontends/questions.md"
click node_spa "https://github.com/arminshaikhy/frontend-interview-questions/blob/main/single-page-applications/questions.md"
click node_system "https://github.com/arminshaikhy/frontend-interview-questions/blob/main/frontend-system-design/questions.md"
click node_patterns "https://github.com/arminshaikhy/frontend-interview-questions/blob/main/design-patterns/questions.md"
click node_state "https://github.com/arminshaikhy/frontend-interview-questions/blob/main/state-management/questions.md"
click node_core "https://github.com/arminshaikhy/frontend-interview-questions/blob/main/core-react-vue-concepts/questions.md"
click node_deep "https://github.com/arminshaikhy/frontend-interview-questions/blob/main/deep-frontend-development/questions.md"
click node_typescript "https://github.com/arminshaikhy/frontend-interview-questions/blob/main/typescript-and-javascript/questions.md"
click node_api "https://github.com/arminshaikhy/frontend-interview-questions/blob/main/frontend-backend-collaboration-and-api-design/questions.md"
click node_security "https://github.com/arminshaikhy/frontend-interview-questions/blob/main/frontend-security/questions.md"
click node_build "https://github.com/arminshaikhy/frontend-interview-questions/blob/main/build-tools-and-bundlers/questions.md"
click node_css "https://github.com/arminshaikhy/frontend-interview-questions/blob/main/css-and-styling/questions.md"
click node_cssmodels "https://github.com/arminshaikhy/frontend-interview-questions/blob/main/css-mental-models/questions.md"
click node_html "https://github.com/arminshaikhy/frontend-interview-questions/blob/main/html-mental-models/questions.md"
click node_accessibility "https://github.com/arminshaikhy/frontend-interview-questions/blob/main/web-accessibility/questions.md"
click node_performance "https://github.com/arminshaikhy/frontend-interview-questions/blob/main/performance-optimization-and-core-web-vitals/questions.md"
click node_budgets "https://github.com/arminshaikhy/frontend-interview-questions/blob/main/web-performance-budgets-and-optimization-strategies/questions.md"
click node_pwas "https://github.com/arminshaikhy/frontend-interview-questions/blob/main/pwas-and-offline-capabilities/questions.md"
click node_emerging "https://github.com/arminshaikhy/frontend-interview-questions/blob/main/emerging-trends-and-future-proofing/questions.md"
click node_scenarios "https://github.com/arminshaikhy/frontend-interview-questions/blob/main/scenario-based-questions/questions.md"
click node_testing "https://github.com/arminshaikhy/frontend-interview-questions/blob/main/testing/questions.md"
click node_teamwork "https://github.com/arminshaikhy/frontend-interview-questions/blob/main/teamwork-and-best-practices/questions.md"
click node_leadership "https://github.com/arminshaikhy/frontend-interview-questions/blob/main/leadership-and-team-collaboration/questions.md"
click node_cicd "https://github.com/arminshaikhy/frontend-interview-questions/blob/main/ci-cd-and-monitoring-tools/questions.md"

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_readme,node_persian toneBlue
class node_core,node_deep,node_typescript,node_api,node_security,node_build toneAmber
class node_css,node_cssmodels,node_html,node_accessibility,node_performance,node_budgets,node_pwas,node_emerging toneMint
class node_advanced,node_micro,node_spa,node_system,node_patterns,node_state toneRose
class node_scenarios,node_testing,node_teamwork,node_leadership,node_cicd,node_learner toneIndigo
```

## Components

### Study Catalog

- [Topic Index](https://github.com/arminshaikhy/frontend-interview-questions/blob/main/README.md): `README.md`
- [Persian Collection](https://github.com/arminshaikhy/frontend-interview-questions/tree/main/persian): `persian`

### Frontend Engineering

- [React and Vue](https://github.com/arminshaikhy/frontend-interview-questions/blob/main/core-react-vue-concepts/questions.md): `core-react-vue-concepts/questions.md`
- [Deep Frontend](https://github.com/arminshaikhy/frontend-interview-questions/blob/main/deep-frontend-development/questions.md): `deep-frontend-development/questions.md`
- [TypeScript and JavaScript](https://github.com/arminshaikhy/frontend-interview-questions/blob/main/typescript-and-javascript/questions.md): `typescript-and-javascript/questions.md`
- [API Collaboration](https://github.com/arminshaikhy/frontend-interview-questions/blob/main/frontend-backend-collaboration-and-api-design/questions.md): `frontend-backend-collaboration-and-api-design/questions.md`
- [Frontend Security](https://github.com/arminshaikhy/frontend-interview-questions/blob/main/frontend-security/questions.md): `frontend-security/questions.md`
- [Build Tools](https://github.com/arminshaikhy/frontend-interview-questions/blob/main/build-tools-and-bundlers/questions.md): `build-tools-and-bundlers/questions.md`

### Web Craft

- [CSS and Styling](https://github.com/arminshaikhy/frontend-interview-questions/blob/main/css-and-styling/questions.md): `css-and-styling/questions.md`
- [CSS Mental Models](https://github.com/arminshaikhy/frontend-interview-questions/blob/main/css-mental-models/questions.md): `css-mental-models/questions.md`
- [HTML Mental Models](https://github.com/arminshaikhy/frontend-interview-questions/blob/main/html-mental-models/questions.md): `html-mental-models/questions.md`
- [Web Accessibility](https://github.com/arminshaikhy/frontend-interview-questions/blob/main/web-accessibility/questions.md): `web-accessibility/questions.md`
- [Performance Optimization](https://github.com/arminshaikhy/frontend-interview-questions/blob/main/performance-optimization-and-core-web-vitals/questions.md): `performance-optimization-and-core-web-vitals/questions.md`
- [Performance Budgets](https://github.com/arminshaikhy/frontend-interview-questions/blob/main/web-performance-budgets-and-optimization-strategies/questions.md): `web-performance-budgets-and-optimization-strategies/questions.md`
- [PWAs and Offline](https://github.com/arminshaikhy/frontend-interview-questions/blob/main/pwas-and-offline-capabilities/questions.md): `pwas-and-offline-capabilities/questions.md`
- [Emerging Trends](https://github.com/arminshaikhy/frontend-interview-questions/blob/main/emerging-trends-and-future-proofing/questions.md): `emerging-trends-and-future-proofing/questions.md`

### Systems and Architecture

- [Advanced Features](https://github.com/arminshaikhy/frontend-interview-questions/blob/main/advanced-features-and-architecture/questions.md): `advanced-features-and-architecture/questions.md`
- [Micro-Frontends](https://github.com/arminshaikhy/frontend-interview-questions/blob/main/micro-frontends/questions.md): `micro-frontends/questions.md`
- [Single-Page Apps](https://github.com/arminshaikhy/frontend-interview-questions/blob/main/single-page-applications/questions.md): `single-page-applications/questions.md`
- [Frontend System Design](https://github.com/arminshaikhy/frontend-interview-questions/blob/main/frontend-system-design/questions.md): `frontend-system-design/questions.md`
- [Design Patterns](https://github.com/arminshaikhy/frontend-interview-questions/blob/main/design-patterns/questions.md): `design-patterns/questions.md`
- [State Management](https://github.com/arminshaikhy/frontend-interview-questions/blob/main/state-management/questions.md): `state-management/questions.md`

### Practice and Collaboration

- [Scenario Questions](https://github.com/arminshaikhy/frontend-interview-questions/blob/main/scenario-based-questions/questions.md): `scenario-based-questions/questions.md`
- [Testing](https://github.com/arminshaikhy/frontend-interview-questions/blob/main/testing/questions.md): `testing/questions.md`
- [Teamwork Practices](https://github.com/arminshaikhy/frontend-interview-questions/blob/main/teamwork-and-best-practices/questions.md): `teamwork-and-best-practices/questions.md`
- [Leadership Collaboration](https://github.com/arminshaikhy/frontend-interview-questions/blob/main/leadership-and-team-collaboration/questions.md): `leadership-and-team-collaboration/questions.md`
- [CI/CD Monitoring](https://github.com/arminshaikhy/frontend-interview-questions/blob/main/ci-cd-and-monitoring-tools/questions.md): `ci-cd-and-monitoring-tools/questions.md`

### Other components

- **Learner**

## Connections

- Learner → Topic Index: browses index
- Topic Index → Persian Collection: links collection
- Topic Index → Advanced Features: links questions
- Topic Index → Micro-Frontends: links questions
- Topic Index → Single-Page Apps: links questions
- Topic Index → Frontend System Design: links questions
- Topic Index → Design Patterns: links questions
- Topic Index → State Management: links questions
- Topic Index → React and Vue: links questions
- Topic Index → Deep Frontend: links questions
- Topic Index → TypeScript and JavaScript: links questions
- Topic Index → API Collaboration: links questions
- Topic Index → Frontend Security: links questions
- Topic Index → Build Tools: links questions
- Topic Index → CSS and Styling: links questions
- Topic Index → CSS Mental Models: links questions
- Topic Index → HTML Mental Models: links questions
- Topic Index → Web Accessibility: links questions
- Topic Index → Performance Optimization: links questions
- Topic Index → Performance Budgets: links questions
- Topic Index → PWAs and Offline: links questions
- Topic Index → Emerging Trends: links questions
- Topic Index → Scenario Questions: links questions
- Topic Index → Testing: links questions
- Topic Index → Teamwork Practices: links questions
- Topic Index → Leadership Collaboration: links questions
- Topic Index → CI/CD Monitoring: links questions