Mobile Flashcards

The funny way to prepare for tests and exams!
Udacity's React Nanodegree 3rd Project

Report Bug · Request Feature

Table of Contents

• About the Project
  • Screenshots
  • User Experience
  • Built With
• Getting Started
  • Prerequisites
  • Installation
• Local Testing
• App Features
• Data
• Author
• Contributing
• Acknowledgements
• License

About The Project

Screenshots

User Experience

Mobile Flashcards is an app that helps you study. For each subject or category you are studying, you create a deck. Each deck (category) will contain questions (cards) you want to asnwer.

The app comprises of "Decks" containing "Cards". Each deck you create will contain questions (cards) for a particular category (deck). For each card you create a question and an answer.

Once you have a deck with cards, you can start a quiz to test your knowledge. As you go through the quiz, you will mark your answers as "Correct" or "Incorrect". At the end of your quiz you will get a final score.

Happy Studying ;)

Built With

• React Native - A framework for building native apps with React.
• Redux - Predictable state container for JavaScript apps
• Expo - An open-source platform for making universal native apps with React.
• Kitten UI/Eva Design - Design system based UI library

Getting Started

Prerequisites

This is an example of how to list things you need to use the software and how to install them.

• yarn or npm, I highly recommand the former!

sudo apt update && sudo apt install yarn

npm install npm@latest -g

Installation

1. Clone the repo

> git clone https://github.com/ilyeSudo/mobile-flashcards.git

2. Install project packages

> yarn install OR npm install

3. Start the emulator or connect a physical device and check with adb devices command

4. Launch the local server, Open debugger-ui to view it in the browser

> yarn start OR npm install

5. Launch the app on simulator or a connected device

> yarn android/ios OR npm run android/ios

Local Testing

Platform	Simulator	Device
Android	✔️	✔️
iOS	✔️	✖️

App Features

• Add New Deck: Option to create new decks/categories

• Add New Card: Option to add a new card to the deck. Card contains a question and answer.

• Quiz Result: When all questions have been asked and marked as correct or incorrect a results view displays with a score.

• Notifications: User receives a local notification at 9pm if they haven't opened the app that day.

Data

This is a React Native app and as such the project was started using create-react-native-app. The code base is rather straight forward and a standard React component model is used. Redux is used for state management and React Native AsyncStorage is used for persistence. The data structure used relies on a deck_title_id being generated for each deck, and the data for each deck being stored accordingly:

deck_title_id: {
  id: deck_title_id,
  name: name_of_deck,
  questions: [
    {question , answer},
    {question , answer},
    {question , answer}
  ]
},
deck_title_id: {
  id: deck_title_id,
  name: name_of_deck,
  questions: [
    {question , answer},
    {question , answer},
    {question , answer}
  ]
}

This application could certainly be enhanced (such as enabling deletion support for decks and cards), but as of right now, it delivers on the requirements for the Udacity React Nanodegree.

Author

• Ilyes Houdjedje - Linkedin - Github - Twitter

Acknowledgement

• Hat tip to Mr.Tyler McGinnis for the great course and to all the Udacity team!

License

This project is licensed under the MIT License - see the LICENSE.md file for details