DeutschLernen/docs/architecture/frontend-structure.md

german-app-frontend/ │ ├── public/ # Static files │ ├── audio/ # Generated audio files (served statically) │ │ ├── vocabulary/ # Vocabulary word audio (e.g., 1.wav, 2.wav) │ │ ├── story/ # Story segment audio │ │ └── quiz/ # Quiz question audio │ │ │ ├── favicon.ico │ └── index.html # Single HTML entry point │ ├── src/ # Source code │ │ │ ├── assets/ # Static assets (images, fonts, etc.) │ │ ├── images/ │ │ │ ├── badges/ # Badge icons │ │ │ ├── flags/ # Language flags │ │ │ └── ... │ │ └── fonts/ │ │ │ ├── components/ # Reusable UI components │ │ │ │ │ ├── common/ # Generic, reusable components │ │ │ ├── AudioPlayer.tsx # Plays audio files (vocabulary, story, quiz) │ │ │ ├── Recorder.tsx # Records user speech for speaking exercises │ │ │ ├── Button.tsx # Reusable button with variants │ │ │ ├── Modal.tsx # Modal dialog │ │ │ ├── Spinner.tsx # Loading spinner │ │ │ ├── Card.tsx # Reusable card component │ │ │ └── index.ts # Exports all common components │ │ │ │ │ ├── layout/ # Layout-related components │ │ │ ├── Header.tsx # Top navigation bar │ │ │ ├── Footer.tsx # Footer component │ │ │ ├── Sidebar.tsx # Sidebar for navigation (if needed) │ │ │ └── Layout.tsx # Main layout wrapper │ │ │ │ │ ├── lesson/ # Lesson-specific components │ │ │ ├── VocabularyTab.tsx # Displays vocabulary words with audio │ │ │ ├── GrammarTab.tsx # Displays grammar explanations │ │ │ ├── StoryTab.tsx # Displays story segments with audio │ │ │ ├── PracticeTab.tsx # Speaking/writing/listening exercises │ │ │ └── index.ts # Exports lesson components │ │ │ │ │ ├── quiz/ # Quiz-specific components │ │ │ ├── McqQuestion.tsx # Multiple-choice question │ │ │ ├── FillInBlank.tsx # Fill-in-the-blank question │ │ │ ├── ListeningQuestion.tsx # Listening comprehension question │ │ │ ├── MatchingQuestion.tsx # Matching question (e.g., word to article) │ │ │ ├── QuizResults.tsx # Displays quiz results │ │ │ └── index.ts # Exports quiz components │ │ │ │ │ ├── story/ # Story-specific components │ │ │ ├── StorySegment.tsx # Displays a single story segment │ │ │ └── StoryPlayer.tsx # Handles story audio playback │ │ │ │ │ ├── dashboard/ # Dashboard-specific components │ │ │ ├── ProgressBar.tsx # Shows progress for a level │ │ │ ├── LessonCard.tsx # Card for a lesson (title, status, etc.) │ │ │ ├── StoryProgress.tsx # Shows story unlock progress │ │ │ ├── BadgeDisplay.tsx # Displays earned badges │ │ │ └── index.ts │ │ │ │ │ ├── practice/ # Practice-specific components │ │ │ ├── SpeakingExercise.tsx # Speaking practice with recorder │ │ │ ├── WritingExercise.tsx # Writing practice with Mistral feedback │ │ │ └── ListeningExercise.tsx # Listening practice │ │ │ │ │ └── shared/ # Shared logic/components │ │ ├── ProtectedRoute.tsx # Wraps routes that require auth │ │ ├── PrivateRoute.tsx # Alternative name for ProtectedRoute │ │ └── ErrorBoundary.tsx # Catches and displays errors │ │ │ ├── context/ # React Context providers │ │ ├── AuthContext.tsx # Manages authentication state │ │ ├── UserProgressContext.tsx # Manages user progress (optional) │ │ └── index.ts # Exports all contexts │ │ │ ├── hooks/ # Custom React hooks │ │ ├── useAuth.ts # Manages auth state (login, logout, etc.) │ │ ├── useAudio.ts # Handles audio playback logic │ │ ├── useRecorder.ts # Handles audio recording logic │ │ ├── useApi.ts # Axios API client with interceptors │ │ ├── useLessons.ts # Fetches and manages lesson data │ │ ├── useQuizzes.ts # Fetches and manages quiz data │ │ ├── useUserProgress.ts # Fetches and manages user progress │ │ ├── useStory.ts # Fetches and manages story segments │ │ └── index.ts # Exports all hooks │ │ │ ├── pages/ # Page-level components (routes) │ │ ├── DashboardPage.tsx # User dashboard (progress, next lesson, etc.) │ │ ├── LessonPage.tsx # Lesson page (tabs for vocabulary, grammar, story, quiz) │ │ ├── QuizPage.tsx # Standalone quiz page (if needed) │ │ ├── StoryPage.tsx # Full story viewer (all unlocked segments) │ │ ├── PracticePage.tsx # Practice exercises (speaking, writing, listening) │ │ ├── ProfilePage.tsx # User profile (badges, settings, etc.) │ │ ├── LoginPage.tsx # Login form │ │ ├── RegisterPage.tsx # Registration form │ │ ├── NotFoundPage.tsx # 404 page │ │ └── index.ts # Exports all pages │ │ │ ├── services/ # API service layer │ │ ├── api.ts # Axios instance with interceptors │ │ ├── authService.ts # Authentication API calls │ │ ├── lessonService.ts # Lesson-related API calls │ │ ├── quizService.ts # Quiz-related API calls │ │ ├── storyService.ts # Story-related API calls │ │ ├── speechService.ts # Speech recognition API calls │ │ ├── ttsService.ts # TTS API calls │ │ ├── userProgressService.ts # User progress API calls │ │ └── index.ts # Exports all services │ │ │ ├── store/ # State management (optional, if using Zustand/Redux) │ │ ├── slices/ # Redux slices (if using Redux) │ │ │ ├── authSlice.ts │ │ │ ├── userSlice.ts │ │ │ └── ... │ │ ├── store.ts # Redux store configuration │ │ └── hooks.ts # Redux hooks