The German Gender app is designed to make learning German vocabulary and grammar engaging and effective by gamifying the learning process. Initially focused on helping users learn articles (der, die, das) hence the name of the app, the app has grown into a comprehensive vocabulary builder with tools for practice, revision, and sentence creation.
- Welcome Message: Upon launching, users see a welcome message: “Hello, [Name],” or “Hello, Guest” if not logged in.
- Offline Functionality: The app works offline with data saved locally via SQLite. Creating an account enables data synchronization across devices and ensures that the progress will not be lost if the app is deleted.
- Authentication: Logging into the app requires an email and password. If an account with the specified email does not exist, the user will be redirected to a page where he is asked to enter a username in order to create a new account.
- The place where all the progress can be seen, as well as the things that are planned for the future.
- Explore the vocabulary organized in Nouns, Verbs, Adjectives, Adverbs, Pronouns, Prepositions.
- Words are organized based on real-world frequency and display their type, subtype, translation, article if applicable and the mastery score.
- Search functionality tailored to the selected word type (e.g., “Search noun...”).
- Locked words are marked with a 🔒 padlock and can be unlocked by achieving full scores on already unlocked words in practice.
- Flashcards for unlocked words, including translations, usage examples, and grammar highlights.
- Sentence examples with Word Highlighting to emphasize the target word in context, even when it appears in an inflected form (e.g., "sein" in Ich bin müde highlights
binin orange). - Encourages mastery of words before progressing to the practice mode.
- Allows user to skip practice, but displays a
⚠️ warning.
- Users get prompted with up to 10 unlocked words and get tested on translations, articles (for nouns), and cases (for prepositions). The selection of words prioritizes words with low scores and tries to minimize the appearance of words with large scores.
- Dynamic hints guide users step-by-step (e.g., “Choose an article first” followed by “What is German for year?”).
- Colored progress indicators at the top of the screen show current (🔵 blue), correct (🟢 green), and incorrect (🔴 red) responses.
- The feedback is immediate, correct answers are highlighted in green, while errors are marked red and missing letters indicated by
?question marks.
- Motivational messages track streaks (e.g., X words in a row) and their color is dynamic to represent the size of the streak (green = low streak, yellow = medium streak, red = high streak). These messages are only displayed during the first round of practice and are not shown when retrying mistakes.
- If the user finishes the practice round and has made mistakes, he is asked if he would like to retry those words or if he would like to exit the practice round.
- They are displayed every time the user exits a practice round. Even if they exit it before finishing it.
- Provides a summary of progress, showing score changes for each word. Negative changes in score are highlighted red, while positive ones are green.
- Newly unlocked words are displayed with a 🏆 trophy and mastered words (those where a score of
4was reached) are displayed with a 🏆 green trophy. - Words with high scores are gradually phased out to ensure focus on weaker areas.
- The score of the words will only change during the first round of practice and not during the retrial rounds.
- If practice is ended early, the words that were not attempted will display a blue
0to indicate that their score was not affected.
- Use unlocked words to generate and understand sentences and their formation.
- Select the type of words you want to be used in a sentence and one word per type (noun, verb, etc.) to have a sentence automatically generated.
- The selected sentence components are highlighted with their own specific color codes. These color codes are used in the entire app, making it easier for the user to distinguish them.
- Beginner-friendly explanations below the sentence provide insights into word placement, forms, and grammatical rules.
- Interactive flashcards display translations, word types, and relevant grammar rules.
- Example: For Der Mann, the flashcard explains “A noun is a person, place, thing, or idea” and includes the article's function (e.g., Der is for masculine nouns).
- Words are scored from
-4to4based on performance. - Achieving a score of
4unlocks new words, and a trophy icon marks mastered words. - Newly unlocked words get a score of
0. - The system encourages consistent learning by balancing repetition with progress.
- Begin by reviewing unlocked words using flashcards.
- Example sentences show how words are used in context, with target words highlighted in their respective color.
- After reviewing, users can proceed to Practice or revisit missed words.
- Answer vocabulary questions, select articles (nouns), or identify cases (prepositions).
- Receive feedback on each response and track progress using visual indicators.
- Unlock new words by mastering the existing ones.
- Use unlocked words to construct sentences.
- Select one word per type, with each selection dynamically updating the list for ease of use.
- Generate sentences that maintain the selected word order and display them with translations and grammar explanations.
- Framework: React Native
- Platform: Expo (Managed Workflow)
- Navigation: Custom navigation (Component-based state)
- State Management: React Context API (
UserContext) - Styling:
StyleSheet,react-native-safe-area-context,react-native-vector-icons
- Authentication: Firebase Authentication
- Cloud Database: Cloud Firestore (for syncing user progress & unlocked words)
- Local Database: SQLite (via
expo-sqlite) used for offline storage of words and sentences. - Text-to-Speech: Expo Speech (
expo-speech) for pronunciation.
The project includes a separate Node.js/Express backend located in the
backend/directory, which uses PostgreSQL. An alternative to the Firebase implementation for users preferring a self-hosted SQL solution.
├── App.js # Main entry point
├── assets/ # Images and static assets
├── backend/ # Node.js/Express backend (Alternative)
├── components/ # UI Components (Home, Practice, Stats, etc.)
├── context/ # React Context (UserContext)
├── data/ # Static data files (wordsData.js)
├── firebase/ # Firebase configuration and helper functions
├── sqlite/ # Local SQLite database initialization and queries
├── styles/ # Global styles and colors
├── utils/ # Utility functions
└── package.json # Dependencies and scripts