How jamil-ibrahimli/quiz-app works
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: quizSlice.ts Quiz state · QuestionScreen.tsx Question screen · page.tsx Screen router · ScoreScreen.tsx Score screen
Components 17
Quiz experience
- Screen router
src/app/page.tsx - Welcome screen
src/components/quiz/welcome-screen/WelcomeScreen.tsx - Subject list
src/components/quiz/welcome-screen/SubjectList.tsx - Subject card
src/components/quiz/welcome-screen/SubjectCard.tsx - Question screen
src/components/quiz/question-screen/QuestionScreen.tsx - Question card
src/components/quiz/question-screen/QuestionCard.tsx - Answer options
src/components/quiz/question-screen/AnswerOptions.tsx - Score screen
src/components/quiz/score-screen/ScoreScreen.tsx
State and persistence
- Quiz store
src/store/store.ts - Quiz state
src/store/slices/quizSlice.ts - Browser storage
src/utils/LocalStorage.ts - State initializer
src/components/state_initializer/QuizStateInitializer.tsx
Question delivery
- Quiz API client
src/store/api/quizApi.tsx - Subject questions
src/app/api/quiz/[subject]/route.ts
Shared presentation
- Quiz header
src/components/layout/Header.tsx - App providers
src/components/providers/Providers.tsx
Other components
- Quiz taker
Connections 21
- 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