Collections List

Value Proposition

As a user

I want to browse a visually distinct list of flashcard collections,

so that I can easily access and review the sets of flashcards I need to study.

The homepage displays a list of flashcard collections.
The collections list is headlined with its purpose.
Each collection listing includes:
- Collection title
- Number of not yet correctly answered flashcards in the collection
- Number of correctly answered flashcards in the collection
The list supports vertical scrolling to accommodate multiple entries.
Clicking on:
- a collection takes the user to a new page displaying all flashcards in that collection.
- the 'To Learn' icon takes the user to a new page displaying all flashcards to learn in that collection.
- the 'Learned' icon takes the user to a new page displaying all learned flashcards in that collection.
The page displaying the flashcards for a specific collection includes a link to navigate back to the collections list.
On the collection page the user can navigate between flashcards to learn, all flashcards and learned flashcards.
On the collection page the user can see the number of flashcards to learn and learned flashcards that update when a card is marked as correct or incorrect
Every collection should be visually distinguishable from the others by color
Each collection is shown as a stack of cards

[ ] Create feature branch feature/collections-list
[ ] Create a Collection component
[ ] On the Homepage for every collection in collections.js the Collection component is rendered
[ ] Make the whole Collection component, the 'To Learn' icon and the 'Learned' icon separate Links that link to the the collection page that renders all flashcards, flashcards to learn or learned flashcards depending on which Link was clicked.
[ ] Add a page with a dynamic route which renders the FlashcardList component depending on the selected collection.
[ ] Implement a 'back to collection list' link
[ ] Add navigation to bottom of page with three buttons with icons for 'To Learn', 'All' and 'Learned' that render the flashcard list accordingly when clicked
[ ] For the number of flashcards to learn and learned flashcards on the Collection component and the navigation on the collection page create Counter component.
[ ] Give every existing collection object a 'color' key with a 'hex value' as value and style the CollectionItem's outline accordingly
[ ] Every Flashcard in a collection should have an outline color according to its collection's color.