76e8af4987
- Add comprehensive documentation in docs/ (architecture, features, roadmap) - Add german-app-frontend with Vite, TypeScript, ESLint configuration - Add AGENTS.md and .gitignore Generated by Mistral Vibe. Co-Authored-By: Mistral Vibe <vibe@mistral.ai>
119 lines
No EOL
7.5 KiB
Markdown
119 lines
No EOL
7.5 KiB
Markdown
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 |