# jamil-ibrahimli/quiz-app architecture

> Architecture diagram of the GitHub repository jamil-ibrahimli/quiz-app, 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/jamil-ibrahimli/quiz-app
- Repository: https://github.com/jamil-ibrahimli/quiz-app

## Overview

This is a browser-based quiz app for HTML, CSS, JavaScript, and accessibility topics. The main flow is choosing a subject, loading its questions, answering and advancing through the quiz, then viewing a score and optionally restarting. The page selects the welcome, question, or score screen from Redux quiz state; the store also restores saved quiz state from browser storage. The README is a generic Next.js template and documents no additional product capabilities. Some component and state wiring is inferred only from filenames; unsampled implementation details are not represented.

Main entry points: [`src/store/slices/quizSlice.ts`](https://github.com/jamil-ibrahimli/quiz-app/blob/main/src/store/slices/quizSlice.ts) (Quiz state), [`src/components/quiz/question-screen/QuestionScreen.tsx`](https://github.com/jamil-ibrahimli/quiz-app/blob/main/src/components/quiz/question-screen/QuestionScreen.tsx) (Question screen), [`src/app/page.tsx`](https://github.com/jamil-ibrahimli/quiz-app/blob/main/src/app/page.tsx) (Screen router), [`src/components/quiz/score-screen/ScoreScreen.tsx`](https://github.com/jamil-ibrahimli/quiz-app/blob/main/src/components/quiz/score-screen/ScoreScreen.tsx) (Score screen)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Quiz experience"]
  node_home["Screen router<br/>[page.tsx]"]
  node_welcome["Welcome screen<br/>[WelcomeScreen.tsx]"]
  node_subjects["Subject list<br/>[SubjectList.tsx]"]
  node_subject_card["Subject card<br/>[SubjectCard.tsx]"]
  node_question_screen["Question screen<br/>[QuestionScreen.tsx]"]
  node_question_card["Question card<br/>[QuestionCard.tsx]"]
  node_answers["Answer options<br/>[AnswerOptions.tsx]"]
  node_score["Score screen<br/>[ScoreScreen.tsx]"]
end

subgraph group_state["State and persistence"]
  node_quiz_store["Quiz store<br/>[store.ts]"]
  node_quiz_state["Quiz state<br/>[quizSlice.ts]"]
  node_browser_storage[("Browser storage<br/>[LocalStorage.ts]")]
  node_state_initializer["State initializer"]
end

subgraph group_questions["Question delivery"]
  node_quiz_api["Quiz API client<br/>[quizApi.tsx]"]
  node_quiz_route["Subject questions<br/>[route.ts]"]
end

subgraph group_presentation["Shared presentation"]
  node_header["Quiz header<br/>[Header.tsx]"]
  node_providers["App providers<br/>[Providers.tsx]"]
end

node_user(("Quiz taker"))

node_user -->|"opens quiz"| node_home
node_home -->|"shows welcome"| node_welcome
node_home -->|"shows questions"| node_question_screen
node_home -->|"shows score"| node_score
node_welcome -->|"renders subjects"| node_subjects
node_subjects -->|"renders cards"| node_subject_card
node_subject_card -->|"selects subject"| node_quiz_state
node_question_screen -->|"loads questions"| node_quiz_api
node_quiz_api -->|"requests subject"| node_quiz_route
node_quiz_route -->|"returns questions"| node_quiz_api
node_question_screen -->|"renders question"| node_question_card
node_question_screen -->|"renders answers"| node_answers
node_answers -->|"submits answer"| node_question_screen
node_question_screen -->|"updates progress"| node_quiz_state
node_score -->|"reads score"| node_quiz_state
node_score -->|"resets quiz"| node_quiz_state
node_quiz_store -->|"uses reducer"| node_quiz_state
node_quiz_store -->|"loads saved state"| node_browser_storage
node_providers -->|"provides store"| node_quiz_store
node_state_initializer -->|"initializes state"| node_quiz_state
node_header -->|"reads quiz state"| node_quiz_state

click node_home "https://github.com/jamil-ibrahimli/quiz-app/blob/main/src/app/page.tsx"
click node_welcome "https://github.com/jamil-ibrahimli/quiz-app/blob/main/src/components/quiz/welcome-screen/WelcomeScreen.tsx"
click node_subjects "https://github.com/jamil-ibrahimli/quiz-app/blob/main/src/components/quiz/welcome-screen/SubjectList.tsx"
click node_subject_card "https://github.com/jamil-ibrahimli/quiz-app/blob/main/src/components/quiz/welcome-screen/SubjectCard.tsx"
click node_question_screen "https://github.com/jamil-ibrahimli/quiz-app/blob/main/src/components/quiz/question-screen/QuestionScreen.tsx"
click node_question_card "https://github.com/jamil-ibrahimli/quiz-app/blob/main/src/components/quiz/question-screen/QuestionCard.tsx"
click node_answers "https://github.com/jamil-ibrahimli/quiz-app/blob/main/src/components/quiz/question-screen/AnswerOptions.tsx"
click node_score "https://github.com/jamil-ibrahimli/quiz-app/blob/main/src/components/quiz/score-screen/ScoreScreen.tsx"
click node_header "https://github.com/jamil-ibrahimli/quiz-app/blob/main/src/components/layout/Header.tsx"
click node_providers "https://github.com/jamil-ibrahimli/quiz-app/blob/main/src/components/providers/Providers.tsx"
click node_quiz_store "https://github.com/jamil-ibrahimli/quiz-app/blob/main/src/store/store.ts"
click node_quiz_state "https://github.com/jamil-ibrahimli/quiz-app/blob/main/src/store/slices/quizSlice.ts"
click node_browser_storage "https://github.com/jamil-ibrahimli/quiz-app/blob/main/src/utils/LocalStorage.ts"
click node_state_initializer "https://github.com/jamil-ibrahimli/quiz-app/blob/main/src/components/state_initializer/QuizStateInitializer.tsx"
click node_quiz_api "https://github.com/jamil-ibrahimli/quiz-app/blob/main/src/store/api/quizApi.tsx"
click node_quiz_route "https://github.com/jamil-ibrahimli/quiz-app/blob/main/src/app/api/quiz/%5Bsubject%5D/route.ts"

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_home,node_welcome,node_subjects,node_subject_card,node_question_screen,node_question_card,node_answers,node_score toneBlue
class node_quiz_store,node_quiz_state,node_browser_storage,node_state_initializer toneAmber
class node_quiz_api,node_quiz_route toneMint
class node_header,node_providers toneRose
class node_user toneIndigo
```

## Components

### Quiz experience

- [Screen router](https://github.com/jamil-ibrahimli/quiz-app/blob/main/src/app/page.tsx): `src/app/page.tsx`
- [Welcome screen](https://github.com/jamil-ibrahimli/quiz-app/blob/main/src/components/quiz/welcome-screen/WelcomeScreen.tsx): `src/components/quiz/welcome-screen/WelcomeScreen.tsx`
- [Subject list](https://github.com/jamil-ibrahimli/quiz-app/blob/main/src/components/quiz/welcome-screen/SubjectList.tsx): `src/components/quiz/welcome-screen/SubjectList.tsx`
- [Subject card](https://github.com/jamil-ibrahimli/quiz-app/blob/main/src/components/quiz/welcome-screen/SubjectCard.tsx): `src/components/quiz/welcome-screen/SubjectCard.tsx`
- [Question screen](https://github.com/jamil-ibrahimli/quiz-app/blob/main/src/components/quiz/question-screen/QuestionScreen.tsx): `src/components/quiz/question-screen/QuestionScreen.tsx`
- [Question card](https://github.com/jamil-ibrahimli/quiz-app/blob/main/src/components/quiz/question-screen/QuestionCard.tsx): `src/components/quiz/question-screen/QuestionCard.tsx`
- [Answer options](https://github.com/jamil-ibrahimli/quiz-app/blob/main/src/components/quiz/question-screen/AnswerOptions.tsx): `src/components/quiz/question-screen/AnswerOptions.tsx`
- [Score screen](https://github.com/jamil-ibrahimli/quiz-app/blob/main/src/components/quiz/score-screen/ScoreScreen.tsx): `src/components/quiz/score-screen/ScoreScreen.tsx`

### State and persistence

- [Quiz store](https://github.com/jamil-ibrahimli/quiz-app/blob/main/src/store/store.ts): `src/store/store.ts`
- [Quiz state](https://github.com/jamil-ibrahimli/quiz-app/blob/main/src/store/slices/quizSlice.ts): `src/store/slices/quizSlice.ts`
- [Browser storage](https://github.com/jamil-ibrahimli/quiz-app/blob/main/src/utils/LocalStorage.ts): `src/utils/LocalStorage.ts`
- [State initializer](https://github.com/jamil-ibrahimli/quiz-app/blob/main/src/components/state_initializer/QuizStateInitializer.tsx): `src/components/state_initializer/QuizStateInitializer.tsx`

### Question delivery

- [Quiz API client](https://github.com/jamil-ibrahimli/quiz-app/blob/main/src/store/api/quizApi.tsx): `src/store/api/quizApi.tsx`
- [Subject questions](https://github.com/jamil-ibrahimli/quiz-app/blob/main/src/app/api/quiz/%5Bsubject%5D/route.ts): `src/app/api/quiz/[subject]/route.ts`

### Shared presentation

- [Quiz header](https://github.com/jamil-ibrahimli/quiz-app/blob/main/src/components/layout/Header.tsx): `src/components/layout/Header.tsx`
- [App providers](https://github.com/jamil-ibrahimli/quiz-app/blob/main/src/components/providers/Providers.tsx): `src/components/providers/Providers.tsx`

### Other components

- **Quiz taker**

## Connections

- Quiz taker → Screen router: opens quiz
- Screen router → Welcome screen: shows welcome
- Screen router → Question screen: shows questions
- Screen router → Score screen: shows score
- Welcome screen → Subject list: renders subjects
- Subject list → Subject card: renders cards
- Subject card → Quiz state: selects subject
- Question screen → Quiz API client: loads questions
- Quiz API client → Subject questions: requests subject
- Subject questions → Quiz API client: returns questions
- Question screen → Question card: renders question
- Question screen → Answer options: renders answers
- Answer options → Question screen: submits answer
- Question screen → Quiz state: updates progress
- Score screen → Quiz state: reads score
- Score screen → Quiz state: resets quiz
- Quiz store → Quiz state: uses reducer
- Quiz store → Browser storage: loads saved state
- App providers → Quiz store: provides store
- State initializer → Quiz state: initializes state
- Quiz header → Quiz state: reads quiz state