# evengene/harry-potter-quiz architecture

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

- Interactive diagram: https://gitdiagram.com/evengene/harry-potter-quiz
- Repository: https://github.com/evengene/harry-potter-quiz

## Overview

This is a React/Redux Harry Potter quiz: a user starts a 10-question quiz, answers questions with progress and feedback, sees a score-dependent result, and can restart. The active route setup and sampled components support this flow. Quiz difficulty selection appears in the README’s future-work list and is not active in the sampled router. The graph omits uncertain wiring; notably, the start handler calls the quiz-start action creator but does not dispatch it.

Main entry points: [`src/components/Question/Question.jsx`](https://github.com/evengene/harry-potter-quiz/blob/main/src/components/Question/Question.jsx) (Question screen), [`src/components/Result/Result.jsx`](https://github.com/evengene/harry-potter-quiz/blob/main/src/components/Result/Result.jsx) (Result screen), [`src/components/Quiz/Quiz.jsx`](https://github.com/evengene/harry-potter-quiz/blob/main/src/components/Quiz/Quiz.jsx) (Quiz intro), [`src/index.js`](https://github.com/evengene/harry-potter-quiz/blob/main/src/index.js) (Redux store)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_presentation["Quiz screens"]
  node_quiz["Quiz intro<br/>[Quiz.jsx]"]
  node_question["Question screen<br/>[Question.jsx]"]
  node_result["Result screen<br/>[Result.jsx]"]
  node_wrapper["Shared wrapper<br/>[Wrapper.jsx]"]
  node_quizdata["Question content<br/>[Quiz.constants.js]"]
  node_resultutils["Score messaging<br/>[Result.utils.js]"]
end

subgraph group_state["Quiz state"]
  node_actions["Quiz actions<br/>[actions.js]"]
  node_reducer["Quiz reducer<br/>[reducer.js]"]
  node_store["Redux store<br/>[index.js]"]
end

subgraph group_runtime["Application runtime"]
  node_bootstrap["App bootstrap<br/>[index.js]"]
  node_router["Route setup<br/>[index.js]"]
end

node_user(("Quiz user"))
node_analytics["Vercel Analytics"]

node_user -->|"starts quiz"| node_quiz
node_bootstrap -->|"configures routes"| node_router
node_router -->|"renders home"| node_quiz
node_router -->|"renders questions"| node_question
node_router -->|"renders results"| node_result
node_quiz -->|"navigates to"| node_question
node_user -->|"selects answer"| node_question
node_question -->|"calls answer"| node_actions
node_question -->|"calls go back"| node_actions
node_result -->|"calls restart"| node_actions
node_actions -->|"dispatches actions"| node_store
node_store -->|"reduces actions"| node_reducer
node_reducer -->|"returns state"| node_store
node_question -->|"reads quiz state"| node_store
node_result -->|"reads answers"| node_store
node_question -->|"reads questions"| node_quizdata
node_reducer -->|"reads question count"| node_quizdata
node_result -->|"reads question count"| node_quizdata
node_result -->|"calculates score"| node_resultutils
node_result -->|"navigates on restart"| node_quiz
node_quiz -->|"renders within"| node_wrapper
node_question -->|"renders within"| node_wrapper
node_result -->|"renders within"| node_wrapper
node_bootstrap -.->|"renders analytics"| node_analytics

click node_bootstrap "https://github.com/evengene/harry-potter-quiz/blob/main/src/index.js"
click node_router "https://github.com/evengene/harry-potter-quiz/blob/main/src/index.js"
click node_quiz "https://github.com/evengene/harry-potter-quiz/blob/main/src/components/Quiz/Quiz.jsx"
click node_question "https://github.com/evengene/harry-potter-quiz/blob/main/src/components/Question/Question.jsx"
click node_result "https://github.com/evengene/harry-potter-quiz/blob/main/src/components/Result/Result.jsx"
click node_wrapper "https://github.com/evengene/harry-potter-quiz/blob/main/src/components/Wrapper/Wrapper.jsx"
click node_quizdata "https://github.com/evengene/harry-potter-quiz/blob/main/src/components/Quiz/Quiz.constants.js"
click node_resultutils "https://github.com/evengene/harry-potter-quiz/blob/main/src/components/Result/Result.utils.js"
click node_actions "https://github.com/evengene/harry-potter-quiz/blob/main/src/actions.js"
click node_reducer "https://github.com/evengene/harry-potter-quiz/blob/main/src/reducer.js"
click node_store "https://github.com/evengene/harry-potter-quiz/blob/main/src/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_quiz,node_question,node_result,node_wrapper,node_quizdata,node_resultutils,node_user toneBlue
class node_actions,node_reducer,node_store toneAmber
class node_bootstrap,node_router toneMint
class node_analytics toneIndigo
```

## Components

### Quiz screens

- [Quiz intro](https://github.com/evengene/harry-potter-quiz/blob/main/src/components/Quiz/Quiz.jsx): `src/components/Quiz/Quiz.jsx`
- [Question screen](https://github.com/evengene/harry-potter-quiz/blob/main/src/components/Question/Question.jsx): `src/components/Question/Question.jsx`
- [Result screen](https://github.com/evengene/harry-potter-quiz/blob/main/src/components/Result/Result.jsx): `src/components/Result/Result.jsx`
- [Shared wrapper](https://github.com/evengene/harry-potter-quiz/blob/main/src/components/Wrapper/Wrapper.jsx): `src/components/Wrapper/Wrapper.jsx`
- [Question content](https://github.com/evengene/harry-potter-quiz/blob/main/src/components/Quiz/Quiz.constants.js): `src/components/Quiz/Quiz.constants.js`
- [Score messaging](https://github.com/evengene/harry-potter-quiz/blob/main/src/components/Result/Result.utils.js): `src/components/Result/Result.utils.js`

### Quiz state

- [Quiz actions](https://github.com/evengene/harry-potter-quiz/blob/main/src/actions.js): `src/actions.js`
- [Quiz reducer](https://github.com/evengene/harry-potter-quiz/blob/main/src/reducer.js): `src/reducer.js`
- [Redux store](https://github.com/evengene/harry-potter-quiz/blob/main/src/index.js): `src/index.js`

### Application runtime

- [App bootstrap](https://github.com/evengene/harry-potter-quiz/blob/main/src/index.js): `src/index.js`
- [Route setup](https://github.com/evengene/harry-potter-quiz/blob/main/src/index.js): `src/index.js`

### Other components

- **Quiz user**
- **Vercel Analytics**

## Connections

- Quiz user → Quiz intro: starts quiz
- App bootstrap → Route setup: configures routes
- Route setup → Quiz intro: renders home
- Route setup → Question screen: renders questions
- Route setup → Result screen: renders results
- Quiz intro → Question screen: navigates to
- Quiz user → Question screen: selects answer
- Question screen → Quiz actions: calls answer
- Question screen → Quiz actions: calls go back
- Result screen → Quiz actions: calls restart
- Quiz actions → Redux store: dispatches actions
- Redux store → Quiz reducer: reduces actions
- Quiz reducer → Redux store: returns state
- Question screen → Redux store: reads quiz state
- Result screen → Redux store: reads answers
- Question screen → Question content: reads questions
- Quiz reducer → Question content: reads question count
- Result screen → Question content: reads question count
- Result screen → Score messaging: calculates score
- Result screen → Quiz intro: navigates on restart
- Quiz intro → Shared wrapper: renders within
- Question screen → Shared wrapper: renders within
- Result screen → Shared wrapper: renders within
- App bootstrap → Vercel Analytics: renders analytics