Code Monkey home page Code Monkey logo

nano-25-mobile-flashcards's Introduction

Mobile Flashcards

This is the final mobile assessment project for Udacity's React & Redux course.

Running the application

  • yarn install - for getting the required libs
  • yarn start - for opening the application in browser

Platform

This app was tested against the Android platform.

Specific Requirements

  • Use create-react-native-app to build your project.
  • Allow users to create a deck which can hold an unlimited number of cards.
  • Allow users to add a card to a specific deck.
  • The front of the card should display the question.
  • The back of the card should display the answer.
  • Users should be able to quiz themselves on a specific deck and receive a score once they're done.
  • Users should receive a notification to remind themselves to study if they haven't already for that day.

Views

The application should have, at a minimum, five views.

Deck List View (Default View)

  • displays the title of each Deck
  • displays the number of cards in each deck

ScreenShot

Deck List View

Individual Deck View

  • displays the title of the Deck
  • displays the number of cards in the deck
  • displays an option to start a quiz on this specific deck
  • An option to add a new question to the deck

ScreenShot

Individual Deck View

Quiz View

  • displays a card question

  • an option to view the answer (flips the card)

  • a "Correct" button

  • an "Incorrect" button

  • the number of cards left in the quiz

  • Displays the percentage correct once the quiz is complete

    ScreenShot

#Quiz View

ScreenShot

ScreenShot

#New Deck View

  • An option to enter in the title for the new deck
  • An option to submit the new deck title

ScreenShot

New Question View

  • An option to enter in the question
  • An option to enter in the answer
  • An option to submit the new question

ScreenShot

Data We'll use AsyncStorage to store our decks and flashcards. Redux is optional for this project.

Using AsyncStorage you'll manage an object whose shape is similar to this:

{ React: { title: 'React', questions: [ { question: 'What is React?', answer: 'A library for managing user interfaces' }, { question: 'Where do you make Ajax requests in React?', answer: 'The componentDidMount lifecycle event' } ] }, JavaScript: { title: 'JavaScript', questions: [ { question: 'What is a closure?', answer: 'The combination of a function and the lexical environment within which that function was declared.' } ] } } Notice each deck creates a new key on the object. Each deck has a title and a questions key. title is the title for the specific deck and questions is an array of questions and answers for that deck.

nano-25-mobile-flashcards's People

Contributors

lgiulian avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.