MobileFlashcards

This project lets the user play the "mobile flashcards" on the mobile phone: create new tests and test his/her knowledge

How to install the project

• clone the repository
• cd to the main directory
• npm install
• npm start

Tested environments

• iOS simulator (xcode)
• Android simulator (genymotion)

Components

DeckList

• Lists all the decks (DeckInfo components)
• Each deck is a button that navigates to the DeckDetails component

DeckInfo

• Component that displays the deck title and number of questions

DeckDetails

• Shows DeckInfo component
• Add Card button navigates to the AddCard component
• Start Quiz button navigates to Quiz component
• Delete Text button (TextButton component) deletes the deck and navigates to the DeckList component

AddCard

• Question text input
• Answer text input
• Submit button saves card on DB and redux and navigates to previous screen (DeckDetails)

AddDeck

• Label: What is the title of your new deck?
• Title text input
• Create Deck button saves deck on DB and redux and navigates to DeckDetails

Quiz

• Question number
• Card component
• Correct and incorrect buttons
• If all questions answered then navigate to Score component

Card

• displays the question or answer text
• TextButton to cycle between question or answer

Score

• Shows score (correct answers / total questions)
• Restart quiz button that navigates to Quiz
• Back to Deck button that navigates to DeckDetails

TextButton

• creates a text button with the onPress and text passed to it

SubmitButton

• creates a Touchable opacity button with the onPress and text passed to it. Used for submit of inputs

NavigateButton

• creates a Touchable opacity button with the onPress and text passed to it. Used to navigate to other screens

Navigators

Tab Navigator

• DeckList, AddDeck

Stack Navigators

• DeckList -> DeckDetails -> AddCard
• DeckList -> DeckDetails -> Quiz -> Score
• AddDeck -> DeckList

AsyncStorage

Decks AsyncStorage Structure

• key: 'MobileFlashCards:decks'

{
  React: {
    title: 'React',
    questions: [
      {
        question: 'What is React?',
        answer: 'A library for managing user interfaces'
      },
      {
        question: 'Where do you make Ajax requests in React?',
        answer: 'The componentDidMount lifecycle event'
      }
    ]
  },
  JavaScript: {
    title: 'JavaScript',
    questions: [
      {
        question: 'What is a closure?',
        answer: 'The combination of a function and the lexical environment within which that function was declared.'
      }
    ]
  }
}

Notifications AsyncStorage Structure

• key: 'MobileFlashCards:notifications'
• stores true or null

Redux

Actions

• ADD_DECK - adds deck to the store
• ADD_CARD_TO_DECK - adds card to the deck
• DELETE_DECK - deletes deck from the store
• RECEIVE_DECKS

Reducers

• only one reducer to manage the decks