The Flashcards Project is the third and last project from the Udacity's React Developer Nanodegree program. We build a flashcards mobile app to allow users to study questions and terms for example. The app will allow users to create, delete and edit decks of cards and study them using a quiz game. At the end of the game, you will be able to see your result for that deck. All of this created with REACT NATIVE.
To clone and run this application, you'll need Git, a device with Expo installed or a device simulator installed on your computer like XCode for iOS or Android Studio for Android. After installation, clone and install the project dependencies:
# Clone this repository with https
$ git clone https://github.com/rafaelmaiach/flashcards-omaia.git
# OR clone with SSH
$ git clone [email protected]:rafaelmaiach/flashcards-omaia.git
# Go into the repository and install the application dependencies
$ cd flashcards-omaia
$ npm installAs the project is built using Expo, you can run in both iOS and Android, just need to have the desired simulator/device and all dependencies installed.
At the Expo interface, you can select which simulator you want to run the project or scan the given QR Code in Expo's installed on your device.
To open the Expo interface:
# Go to project root
# Run npm script to start expo interface
npm startThe project was tested in three environments:
- iPhone 8 using iOS Simulator on XCode
- Nexus 5X API 28 x86 - Android 9.0 on Android Studio
- Redmi Note 3 Pro - Xiaomi - that is my physical device
The initial screens are: Home, New Deck and Trash which are navigated through buttons on footer of each one.
This is the first screen. It shows all the decks created and each deck has three actions:
- Access deck view: just need to click on the deck to access the Deck View Screen
- Delete deck and edit deck: both actions are hidden on a swipe component, so you need to swipe the deck to the left to show the two buttons (the pencil for edit and the trash can for delete). When you delete a deck, it disappears from the Home Screen but can still be found on Trash Screen to be restored. When you edit, it changes to the Edit Screen.
At this screen you will see a list of deleted decks. These decks can all be permanently deleted by clicking on a Clear button on the top of screen or a particular deck can be restored by swipping the deck to the left and clicking on the restore button.
At this screen you can create a new deck or edit an existing one. The functionalities of this screen are:
- Change deck color and title: Using the right menu on the screen header you can change the deck color using a pre-defined color palette and change the deck's title.
- Add card: Using the bottom button "Add Card" you can create new cards for the deck.
- Edit card: Using the footer of an individual card you can delete it from the deck, change its text color and its background color and change the view from front to back, to see the question (front card text) and the answer (back card text). To change the card text, just click on the card text to open a modal and change it.
- Save Deck: After all changes made, clicking on the button at the bottom of screen, you save the changes of a editted deck or to create a new one.
This screen shows the informations about a deck and allows the user to study it with a quiz game.
- Start Quiz: Clicking on the "Start Quiz" button the user goes to Quiz View Screen where it will have a quiz game to study the cards of this deck.
- Cards quantity: You can see how many cards there are in this deck.
- Add Card: In this screen is possible to add a new card with some default configurations by clicking on the "Add Card" button.
- Cards List: All cards will be listed and each of them will show its question (left) and answer (right).
- Play sound: Each card has a play button that will play an audio which reads the Question and Answer texts. At this version the speech works with english text, so other languages may have a bad experience on the audio.
This screen shows a quiz game to allow users to study the cards of the deck. The game will show one card at time and a tracking of how many cards were studied and how many are left.
The user will read the question of a card, if the user knows the answer it can click on the check green button to mark that card as correct. If it doesn't know, it can see the answer by clicking on the answer button and mark the card as incorrect using the cross red button.
When the last card is played, a result screen will be shown with the game result. At this screen user will see how many cards were correct and how many were incorrect, also each card will be marked with correct or incorrect to the user be able to see which one it knew and which one it didn't know.
Two buttons are present on this screen too. A Restart Quiz button that will start a new quiz with the same deck or Back to Deck button that sends the user to the Deck View Screen.
As the project has a lot of potencial to grow in features, I decided to add some new features beyond the default that are required by the project specification.
- Trash system: When a deck is deleted, it is sent to Trash and there it can be restored or permanently deleted;
- Deck and card edition: The decks and cards can have their informations editted. The deck can have its background color and title changed as well as a card can be added or removed from it. The cards can have their texts (question and answer) changed as well as its background color and text color;
- Play sound: On the Deck View the user can play an audio which will read the question and the answer for the specific card;
Bellow I'll list some of packages I used to built the app, you can check a full list of them on the package.json file.
- Expo - Free and open source toolchain built around React Native to help you build native iOS and Android projects using JavaScript and React;
- React Navigation - Routing and navigation for your React Native apps;
- React Redux - Official React bindings for Redux;
- Redux - A predictable state container for JavaScript apps;
- Redux Persist - Persist and rehydrate a redux store to allow your app to work offline.