This is a React TypeScript application for learning Cantonese vocabulary. It's designed as a mobile-first language learning app with Swedish as the primary interface language, featuring interactive quizzes to help users practice Swedish-to-Cantonese translations.
- React 19.1.1 with TypeScript 4.9.5
- Material UI v7.3.2 for UI components and theming
- React Router DOM 7.9.1 for navigation
- Google Fonts (Open Sans) for typography
- localStorage for persisting user preferences
- Mobile-first responsive design
App.tsx
- Main application wrapper with theme provider and routingHeader.tsx
- Top navigation with app title and pinyin toggleBottomNav.tsx
- Fixed bottom navigation for mobile experienceHome.tsx
- Landing page with feature overviewQuiz.tsx
- Core quiz functionality with setup, questions, and resultstranslations/
- Internationalization system supporting Swedish (primary) and English
- React hooks for local component state
- localStorage integration for user preferences:
cantonese-quiz-difficulty
- Quiz difficulty settingcantonese-quiz-category
- Selected vocabulary categorycantonese-quiz-questionCount
- Number of questions per quiz
- Custom translation hook
useT()
for i18n
Vocabulary data is stored in JSON files with this structure:
interface VocabularyItem {
swedish: string; // Swedish word
characters: string; // Chinese characters
pinyin: string; // Romanized pronunciation
difficulty: number; // 1-5 difficulty rating
}
- Setup Screen: Category, difficulty, and question count selection (5, 10, 15, or 20 questions)
- Quiz Flow: Multiple choice questions with 3 options per question
- No Repeats: Ensures no Swedish word appears twice in a single quiz session
- Results Tracking: Detailed results showing all questions with correct/incorrect answers
- Pinyin Toggle: Optional display of pronunciation guides
- Settings Persistence: Remembers user preferences across sessions
- Animals (
animals.json
)
- Food (
food.json
)
- Family (
family.json
)
- Actions (
actions.json
)
- Items (
items.json
)
- Primary language: Swedish (
sv.ts
)
- Secondary language: English (
en.ts
)
- Translation keys organized by feature area (header, navigation, home, quiz, etc.)
- Helper function for string interpolation:
translate(key, params)
- Strict type checking enabled
- Interface definitions for all data structures
- Proper typing for React components and hooks
- Optional props with default values
- Functional components with hooks
- UseEffect for lifecycle management
- Custom hooks for shared logic (translations)
- Proper error boundaries and loading states
- Theme-based styling with custom Open Sans font
- Responsive breakpoints:
xs
(mobile), md+
(desktop)
- Container with maxWidth: 1000px for content
- CSS Grid for layout (
display: "grid"
)
- Consistent spacing using MUI spacing units
src/
├── components/ # React components
├── translations/ # i18n files
├── *.json # Vocabulary data files
├── App.tsx # Main app component
└── index.tsx # App entry point
- Add translations first - Update both
sv.ts
and en.ts
files
- Type everything - Create interfaces for new data structures
- Mobile-first - Design for mobile, enhance for desktop
- State management - Use localStorage for persistence when appropriate
- Error handling - Graceful fallbacks for missing data or errors
- Always validate vocabulary availability before allowing quiz start
- Maintain the
usedWords
Set to prevent duplicates
- Update results tracking for new question types
- Preserve user settings in localStorage
- Use MUI's
sx
prop for component styling
- Responsive design with
xs
, md
breakpoints
- Open Sans font family for consistency
- Material Design principles
- Consistent spacing and colors
- Vocabulary stored in separate JSON files by category
- Difficulty ratings: 1 (easy) to 5 (hard)
- Swedish words as primary keys for uniqueness
- Pinyin includes tone marks and proper formatting
interface ComponentProps {
required: string;
optional?: boolean;
withDefault?: number;
}
const Component: React.FC<ComponentProps> = ({ required, optional = false, withDefault = 10 }) => {
// component implementation
};
const { t, translate } = useT();
// Simple translation
<Typography>{t.home.welcome}</Typography>
// Translation with parameters
<Typography>
{translate(t.quiz.questionNumber, {
current: "1",
total: "10"
})}
</Typography>
const getSavedSetting = (key: string, defaultValue: any) => {
try {
const saved = localStorage.getItem(`cantonese-quiz-${key}`);
return saved ? JSON.parse(saved) : defaultValue;
} catch {
return defaultValue;
}
};
const saveSetting = (key: string, value: any) => {
try {
localStorage.setItem(`cantonese-quiz-${key}`, JSON.stringify(value));
} catch {
// Silently ignore localStorage errors
}
};
// Filter out used words to prevent repeats
const availableWords = vocabulary.filter((item) => !usedWords.has(item.swedish));
// Add to used words after selection
setUsedWords((prev) => {
const newSet = new Set(prev);
newSet.add(correctItem.swedish);
return newSet;
});
- Vocabulary data is imported statically (no API calls)
- localStorage operations wrapped in try-catch
- Efficient Set operations for tracking used words
- Lazy loading not needed due to small bundle size
- Material UI components are tree-shakeable
- Focus on quiz logic and state management
- Test localStorage persistence
- Verify translation interpolation
- Check responsive behavior at different breakpoints
- Validate vocabulary data integrity
- Lessons module (currently placeholder)
- User profiles and progress tracking
- Achievement system
- Audio pronunciation features
- Spaced repetition algorithms
- Additional language pairs
Remember: This app prioritizes user experience with smooth mobile interactions, persistent settings, and clear feedback. Always consider the mobile-first experience and Swedish language context when making changes.