1.6 Client
What you will find on this page 🦉
- Folder Structure - High-level folder structure of Next.js client explained
- State Management - Overview of Redux Toolkit integration
- UI Screenshots - UI screenshots of main pages & components
The client is a Next.js 14 application (using App Router) written in TypeScript.
client/src/
├── app/ # Next.js App Router pages
│ ├── (landing)/ # Landing page - topic + prior knowledge input
│ ├── learning-goal/ # Learning goal page - specify session learning goal
│ ├── session/[sessionId] # Session page - main view for block rendering + navigation
│ └── impressum/ # Legal notice
│
├── components/ # UI components
│ ├── blocks/ # One sub-folder per block type
│ │ ├── InformBlock/ # InformBlock components
│ │ ├── PracticeBlock/ # PracticeBlock components
│ │ └── SummaryBlock/ # SummaryBlock components
│ ├── learning-goals/ # LearningGoal specification cards
│ ├── learning-topic/ # Topic + prior knowledge input fields
│ ├── session/ # Block navigation + dialogs
│ └── shared/ # Shared UI components
│ ├── layout/ # Navbar
│ └── ui/ # Toast, LoadingScreen
│
├── config/ # App-wide configuration (logging.config.ts)
├── lib/ # Shared utilities (cute Owlbert loading messages)
├── providers/ # React context providers
│
├── store/ # Redux (Toolkit) (see State Management below for explanation)
│ ├── api/ # RTK Query endpoints (baseApi, sessionsApi, blocksAPi, learningGoalsApi)
│ ├── slices/ # sessionSlice, uiSlice
│ └── middleware/ # Logging middleware
│
├── types/
│ ├── domain/ # Domain types + enums (re-exported from generated/)
│ └── generated/ # Auto-generated from OpenAPI (do not edit)
│
└── styles/
├── globals.css # Global CSS stylesheet for ExplAIner (Tailwind base + custom utilities)
├── themes.css # CSS variables for ExplAIner
└── fonts.ts # Select global ExplAIner font here
ExplAIner uses Redux (Toolkit) incl. RTK Query for client state management: client components dispatch actions that trigger reducers to update the central store, as shown in the diagram below.
For a detailed explanation, see How To: Work with Redux Toolkit and RTK Query
Image credit: Redux Documentation
| Initial state | With prior knowledge |
|---|---|
 |
 |
| Learning topic input - initial state | Learning topic input - with prior knowledge |
The user interface begins with the learning topic input screen, where students enter their desired learning topic or question. Students can optionally provide prior knowledge keywords to help ExplAIner tailor the content to their existing understanding.
| Generated goals | Custom goal |
|---|---|
 |
 |
| Generated learning goals selection | Custom learning goal input |
After entering the learning topic, ExplAIner generates three learning goals based on the input using an LLM. Students can select one of the generated learning goals or enter a custom learning goal.
Inform Block
Inform block of learning sequence
Inform block with follow-up question
Once a learning goal is selected, ExplAIner generates and displays the inform block of the learning sequence, presenting the necessary concepts to the student. During this phase, students can ask follow-up questions to clarify any uncertainties, and ExplAIner provides contextual answers using the LLM while ensuring the questions remain aligned with the session's learning goal.
Practice Block
Practice question with three correct answer options answered correctly
Practice question with 1 correct answer option answered incorrectly
Following the inform block, students proceed to the practice block where they answer three questions designed to assess their understanding. ExplAIner provides immediate visual feedback, highlighting correct answers in green and incorrect or missed answers in red. This formative assessment approach enables the system to identify misconceptions and adapt subsequent learning sequences accordingly.
Summary Block
Session summary after successful learning session completion without mistakes
Upon successfully completing a learning sequence without mistakes, ExplAIner generates and displays a session summary that recaps the concepts covered and indicates the learning goal as "reached." The summary includes the session duration and provides students with an opportunity to rate the session on a scale from 1 (very unhelpful) to 5 (very helpful).
Navigation bar after successful learning session completion without mistakes
Throughout the session, the navigation bar at the top of the interface serves as a persistent progress indicator, displaying the number of completed blocks. Each block represents either an inform or practice block of a learning sequence. Students can utilize the navigation bar to move back and forth between previously completed blocks, enabling them to review content as needed.
Navigation bar after two learning sequences with potentially struggling learner
In cases where students struggle with the selected learning goal, ExplAIner implements an adaptive intervention strategy. After two consecutive learning sequences with mistakes during the practice blocks, as indicated by the eight completed blocks in the navigation bar, the system offers students the choice to either continue with the current learning goal or start a new session with an easier learning goal targeting fundamental concepts first. This adaptive mechanism ensures that students build a solid foundation before progressing to more complex topics.
| Change session focus | End session |
|---|---|
 |
 |
| Easier learning goal dialog | End session dialog |
At any point during the session, students can terminate their learning session through the "End Session" button in the navigation bar. ExplAIner displays a confirmation dialog to prevent accidental session termination.
