As a User,
I want to look up the Kana writing system,
so I need a page displaying the characters.

AC:

• Build a page with tab navigation (2 tabs)
• display Hiragana on 1st tab
• display Katakana on 2nd tab

As a User,
I want to see actual vocabulary data,
therefore I need the data displayed on the card

AC:

• Create a fetch from the database file
• Display response in the text fields
• Make fetch random
• Fetch another card on button click

As a User,
I want to see the data,
therefore I need a visualization

AC:

• Create a simple card with 4 textfields
• display card on screen

AC:

• disable back button on empty queue

As a User,
I want to be able to hide / show the Kana on the cards,
therefore I need a filter function activated by a button.

AC:

• Add a Button to toggle
• Filter the fetched array to only display words that have Kanji
• Hide the Kana

As a User,
I want a better UX,
so I need a prettier and more intuitive UI

AC:

• give the app a new look by applying a paper background to the cards and changing the colors
• alter the Layout so that it is more intuitive
•  replace text buttons with icons
• add a main nav bar
•  add branding and logos

As a User I want statistics for each card on how well I am performing,
so I need the data collected and visualised

AC:

• Add 'correct' and 'false' to collected data
• visualise on card

As a Developer,
I need some means to save the progress data,
therefore I need to implement storage

AC:

• Implement LocalStorage

Speech did not work on iOS devices

As a User,
I want to know per Card how well I am doing,
therefore I need a mechanism to keep track of the stats

AC:

• Build a storage which keeps track of
• how often the card was shown
• how often it was marked as correct
• add value after Card No. in Debug header

As a User,
I want to hear the pronunciation,
therefore the words should be audible

AC:

• add a text to speech api for Japanese
• connect to the vocabulary

As a User,
I want to toggle between different filter modes,
therefore I need a menu.

• Add a menu bar
• Add and connect filter toggle buttons

As a User,
I want to be able to also test my skills,
so I need a mode where the answer is on the back-side of the card and I am able to mark as answered correct or not

AC:

• Distinguish between "learning-" and "testing-mode"
• Build front side
• Build back side
• make flipable

As a developer,
I need a framework,
so that I can develop.

• Decision about framework
• Implement UI-Library
• Implement decision

As a Developer,
I want to more easily and consistently change the styling of the components,
so I need to implement some global and dedicated themes.

AC:

• replace Top Navigation with MUI version
• implement MUI Theme for global styles
• implement MUI Theme for dedicated components
• add a menu to replace buttons in top bar

As a User,
I need a description of the app, with instructions,
so I need a new page.

• create a manual page
• fill with content

As a User,
I want the Card to display more information,
therefore I need to add some elements and a layout

AC:

• Add a button to mark answered correct
• Add a button to mark answered incorrect
• Add a button to flip card

As a Developer,
I want to make the project accessible to the public,
so I need to deploy the project

• Connect to vercel

As a User,
I want to be able to move backwards to see previous cards,
therefore I need a card history.

• Add viewed card number to an array
• Display array in console or onscreen

As a User,
I want to keep track of my progress,
so I need a statistics page.

AC:

• Build a Progress page
• connect the progress data per lesson

As a User,
I want to be able to navigate to different pages,
therefore I need a navigation

AC:

• create a Nav-Bar at the bottom of the app, that can house at least 4 icons.

As a User,
I want to be able to skip back,
so I need a button to let me see the previous card.
Also the next card should be shown directly when voted.

AC:

• generate viewed card history
• implement a back button
• add menu item to toggle between new and old behaviour
• update about screen

As a User,
I want to toggle the vocabulary display modes,
therefore I need a menu bar.

AC:

• Add a menu button
• Add a menu component

the words on some translation fields are concatenated without a comma or space.

• fix textfield, so that it correctly displays multiple entries in the translation array

As a Developer,
I want to work with data,
therefore I need a sample database

AC:

• create a database as JSON file
• add it to the project

As a User,
I want to select the chapters I want to learn,
therefore I need a selection method

• Update fetch mechanism so that you can fetch different chapters
• Display page to select the chapter

As a User,
I want a nicer page to look at which also provides more information,
so I need a better selection page

AC:

• Build a custom Checkbox component to select the chapters
• Add a stats visualisation to the component
• Build a nicer Layout