Skip to content

Udacity nanodegree project to build a cross-platform Flashcard mobile application in React Native and Redux

Notifications You must be signed in to change notification settings

amarav/FlashCards

Repository files navigation

Mobile UdaciFlashcards

Udaciflashcards is the final project required to pass for the Udacity React Nanodegree program. Mobile flashcards is a react native application (Android and iOS -) that allows users to study collections of flashcards. The app will allow users to create different categories of flashcards called "decks", add flashcards to those decks, then take quizzes on those decks. The project has been tested on Android.

Why this project?

This project encompasses the fundamental aspects of building a native application including handling infinite lists, routing, and user input. By building this project, one can gain an understanding of how to use React Native to build an iOS and Android application.

A scheduled notification is shown everyday at 7:20 pm if the user hasn't attempted at least one quiz question for that day.

🚀 How to use

  • Install packages with yarn or npm install.
  • Install expo-cli using node
   - npm install -g react-native-cli
   - npm install --global expo-cli
  • Run expo start to start the bundler.

How to run

  • Go to the App Store and install Expo
  • Run Expo on the device
  • Scan the QR code
  • The Flashcards app will start

Prerequisites

All your devices (computer running the Metro Bundler, Android / iOS device) should be connected on the same local area network

Screenshots

DECK LIST

Decks view is the home screen, once you start the app you get the default Decks view. The first time you run the app, you will get 2 decks created by default:

  • Space
  • Colors

decks.png

ADD DECK

You can add your own Decks by touching the Add Deck tab. After creation, you are redirected back to the Decks view where you can see your newly added deck.

adddeck.png

DECK VIEW

Clicking on deck from the list of decks shows the individual Deck view

You could do one of the below:

  • Add a card to the deck
  • Start a quiz

deckView.png

ADD CARD TO DECK

  • A deck card is a kind of flash card where you can test your skills

  • A deck card consists of:

    • a question
    • an answer

Newques.png

START QUIZ

A quiz can be started on any deck if cards exisits. The quiz will run through all the cards in the deck and you can test your knowledge. You can flip the card for the answer and mark a question as correct or incorrect

quiz.png

Newques.png

SCORE PAGE

The quiz result with the pecentage score is shown when the user has completed all the quiz questions. A congratulations message is displayed if he has cleared all the questions

Score.png

A scheduled notification is shown everyday at 7:20 pm if the user hasn't attempted at least one quiz question for that day. notification.png

About

Udacity nanodegree project to build a cross-platform Flashcard mobile application in React Native and Redux

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published