Mobile Flashcards

This project is a flashcard application for Android mobile devices in which users may create collections of flashcards and quiz themselves on the decks that they compile. I created the application using react-native along with redux. (This project was bootstrapped with Create React Native App.)

Structure
  • The main section includes a tab navigator for flashcard decks that have already been created as well as a tab for creating new decks.
  • Clicking on a deck tile takes the user to the individual page for the topic, where additional cards for the deck can be created and added.
  • From the individual deck page, users may also take quizzes in which they mark their responses based on the answers shown. Afterwards, a score is given.
Design
As said above, the application begins with a tab navigator composed of two screens. The first is a list view of all currently available flashcard decks. As a starting point, two decks are already provided: "Spanish" (9 cards) and "Architecture" (2 cards) . You may quiz yourself with these or add new decks.

The second screen in the tab navigator is a form to add an additional deck ("new deck"). Submitting the form will take the user to the new page for that deck.
A screenshot of the game's new deck page
Individual deck pages can be reached by clicking on a deck from the list view. This lists the name of the deck, the number of cards, and buttons for adding a card to the deck as well as for quizzing one's self.
A screenshot of the app's individual deck page
The "new card" form is similar to the "new deck" form.
A screenshot of the app's new card page
The quiz page displays the deck questions in order with an available button to check the answer and then grade one's self. Clicking the answer field will reveal the answer to the given question. When the user finishes looking through the deck, his/her score is shown.
A screenshot of the app's question page A screenshot of the app's question page with an answer A screenshot of the app's score result page
To maintain data for this application, I used the AsyncStorage key-value storage system heavily.
Running The Application

To download, you can clone the repository using this terminal command: git clone https://github.com/wbchristerson/MobileFlashcards.git

Alternatively, follow the instructions below to download to a hard drive:
  • Navigate to this page.
  • Click the green "Clone or download" button towards the right then choose "Download ZIP".
  • Find the folder MobileFlashcards-master in your Downloads folder or wherever it was placed on your device.
  • Right click and choose "Extract All" then extract.
In all cases, having downloaded the files:
  • To install all dependencies from the command line, run the following command in the terminal within the project folder:
    npm install
  • In another terminal window, run the following command to start the project:
    npm start
The terminal will then provide you with several options. If you have the application Expo on your device, then you can scan the accompanying QR code that appears. This will give you the option to run the application on mobile (note: the scan is most easily executed on terminals with a black background and a gray or white foreground).

For complete details about running react-native applications such as this one on mobile devices, see here.