A flashcards app built with React Native
🏠 Homepage
Card Flasher is a mobile app built with react native. It allows the user to create custom sets or decks of flashcards, and then quiz themselves on the answers. The user can record whether they were correct or incorrect, and at the end of the deck their score is displayed.
Users are able to create new custom decks and add their own cards to suit their needs.
The app has been tested in an android emulator and in an iPhone device. Please refer to the Contributing section for any fixes or found bugs.
- React Native
- Expo
- Node.js
- npm ^6.14.4
- node 12.16.2
Begin by cloning this git repository by typing into your terminal:
$git clone https://github.com/LalaIAm/mobile-flashcards.git
After downloading the source files, open your terminal in the project's root directory and type
npm installnpm run startAfter starting the app, you will find yourself at the deck list screen or home screen. It displays a list of your decks, and dummy data if the user has no decks of their own.
On the bottom of the Home Screen, you will find a row of navigation tabs. They are:
- Home
- Add Deck
- Settings
When in the Home screen or Deck List screen, the user can navigate to each one of their decks by clicking or pressing on it. It will bring them to the deck list screen, which displays the number of cards or questions in the deck, and gives the user the option to add a new card or to start a quiz.
From the Deck Details screen, users can click on the New Card button. This will bring them to a screen with a form to fill in the question or "Front" of their flashcard, and the "Back" or flashcard answer. Pressing the "save" button will add the card to their deck.
The user can add as many cards as they would like to their deck. When they are finished adding cards, they can click "done" and will be brought back to the deck details screen.
Clicking the New Deck tab will bring users to the Add Deck screen. Creating a new deck is as easy as typing in a title and pressing save. After saving their deck, users will end up on the new deck's details screen.
After choosing a deck, users can start their quiz or review by pressing the Start Review button.
Each card in the deck is presented to the user one at a time, front side up. The user can then guess what the correct answer to the question that is written on the "Front" of the card and then tap the card to flip it over to the back.
On the back of the card the user can see the answer. They can then select between two buttons, correct or incorrect, depending upon their answer. After choosing correct or incorrect, they will be brought to the next card in the deck.
After reaching the last card in the deck, the user will be presented with their score or percentage of questions they answered correctly. They can then choose to either restart the quiz or return to the Deck List screen.
In the settings screen users can choose a time to get a notification and remind them to study their flashcards. If they haven't yet quized themselves on a deck that day, the will receive a notification.
Contributions, issues and feature requests are welcome!
Feel free to check issues page. You can also take a look at the contributing guide.
👤 Lauren Thorud
- Website: https://linkedin.com/in/laurenthorud
- Github: @LalaIAm
Give a ⭐️ if this project helped you!
Copyright © 2020 Lauren Thorud.
This project is MIT licensed.
- Expo
- React Native Paper
- React Native Card Flip