AkkDatGen: German Language Educational App

Job ID: 38727800

Budget: €30 – €250 EUR

App Description: akkdatgen

Purpose:
The "akkdatgen" app is an educational tool offering daily challenges to help users master German article declensions (Nominative, Accusative, Dative, and Genitive). The goal is to provide a fun, interactive experience with challenges that encourage daily learning and practice.

Pages and Features:

Home Screen:
- Displays the app name and logo at the top.
- Introduction text: "Daily new German challenges. Are you ready to ace German declensions?"
- Three challenge modes:
- Quick (5 questions)
- Standard (10 questions)
- Challenge (20 questions)

Each mode starts a set of questions with varying difficulty levels.

Declension Reminder Screen:
- Color-coded table showing a reminder of German declensions:
- Displays declensions for both definite articles (Der, Die, Das) and indefinite articles (Ein, Eine).
- "Start" button to begin the challenge.

Question Screen:

Displays a German sentence with a blank space for the user to input the correct article.
User can click "Submit" after entering their answer.

Additional features:
- Streak counter (to count how many questions in a row the user has made correctly)
- "Hint" button to assist if the user struggles (shows the blue part)
- Displays the correct grammatical case ("Fall") and the noun with the correct article.
Answer Feedback Screen

After submitting an answer, the app provides feedback:
If the answer is correct, a positive message is displayed, allowing the user to proceed.
If the answer is incorrect, it shows the correct answer with an option to "Continue."


Final Score Screen

Shows the user's final result with the total score and percentage correct.
Encouraging message to return the next day for new challenges.
"Play again" button to restart the challenge.
Technical Requirements:

Web-based: The app should be accessible via browser and optimized for both mobile and desktop devices.
Interactivity and Responsiveness: It must be responsive to different screen sizes and provide a smooth user experience.
Interactive Design: The app uses simple yet effective UI elements like color-coded tables, visual feedback (confetti, congratulatory messages), and hints.

Technologies:
Frontend: Next.js
Styling: Tailwind CSS
Hosting: Vercel

No need of a database, I will initially update the questions manually, it is a MVP only. Please use the "App" folder format of Next.js.

Figma file:

https://www.figma.com/design/yhk0QiCwDHt5U4L8Td685C/Untitled?node-id=0-1&t=u5hCsOcrxFFpUACb-1
Related categories: React.js GitHub TailWind Next.js