Giter VIP home page Giter VIP logo

udacity-react-mobile-flashcards's Introduction

Mobile Flash Card

Live Show

Click here to show the live show of project this slowpoke moves

Screenshoots

Click here to show the screenshots of project
Figure 1 Figure 2 Figure 3
Figure 4 Figure 5 Figure 6
Figure 7 Figure 8 Figure 9

πŸ“ Using the App

  • Once started, the app will load any decks you have created. If no decks are present, you can load sample decks to test functionality.
  • A user can add a Deck.
  • A user can click a deck to see cards in that deck.
  • A user can add cards under a deck.
  • A user can quiz himself.
  • A user can delete a deck.
  • When a user enter the quiz without containing quiz questions, the error page appears on the screen.
  • When a user answer question as "Incorrect" or "Correct" in quiz without clicking "Show Answer" button, the error message appears on the screen.

πŸ”” Notifications

  • The app will set a daily reminder that will be triggered if you have not started any quizzes that day. The notification will trigger at 8:20 PM.
  • Starting a quiz resets the notification for the following day.

TESTING

  • App has been tested in Samsung Galaxy S7 emulator (Genymotion)

πŸ“‚Project Structures

β”ƒπŸ“‚actions
┃ β”—πŸ“œindex.js
β”ƒπŸ“‚apk
┃ β”—πŸ“œmobile-flashcards-9e63c5b14f55492fa3438dca4bb1ee59-signed.apk
β”ƒπŸ“‚livedemo
┃ β”—πŸ“œlivedemo.gif
β”ƒπŸ“‚screenshots
┃ β”—πŸ“œscreenshot1.PNG
┃ β”—πŸ“œscreenshot2.PNG
┃ β”—πŸ“œscreenshot3.PNG
┃ β”—πŸ“œscreenshot4.PNG
┃ β”—πŸ“œscreenshot5.PNG
┃ β”—πŸ“œscreenshot6.PNG
┃ β”—πŸ“œscreenshot7.PNG
┃ β”—πŸ“œscreenshot8.PNG
┃ β”—πŸ“œscreenshot9.PNG
β”ƒπŸ“‚components
┃ β”—πŸ“‚component
┃ ┃ β”—πŸ“œCustomClickButton.js
┃ ┃ β”—πŸ“œTextButton.js
┃ β”—πŸ“‚Deck
┃ ┃ β”—πŸ“œindex.js
┃ β”—πŸ“‚DeckDetails
┃ ┃ β”—πŸ“œDeckDetails.js
┃ β”—πŸ“‚Decks
┃ ┃ β”—πŸ“œDecks.js
┃ β”—πŸ“‚HomeScreen
┃ ┃ β”—πŸ“œindex.js
┃ β”—πŸ“‚Navigation
┃ ┃ β”—πŸ“œindex.js
┃ β”—πŸ“‚NewCard
┃ ┃ β”—πŸ“œNewCard.js
┃ β”—πŸ“‚NewDeck
┃ ┃ β”—πŸ“œNewDeck.js
┃ β”—πŸ“‚Quiz
┃ ┃ β”—πŸ“œQuiz.js
┃ ┃ β”—πŸ“œQuizError.js
┃ ┃ β”—πŸ“œQuizResult.js
β”ƒπŸ“‚middleware
┃ β”—πŸ“œindex.js
┃ β”—πŸ“œlogger.js
β”ƒπŸ“‚reducer
┃ β”—πŸ“œindex.js
β”ƒπŸ“‚utils
┃ β”—πŸ“œ_DATA_.js
┃ β”—πŸ“œapi.js
┃ β”—πŸ“œcolors.js
┃ β”—πŸ“œnotification.js
β”ƒπŸ“œApp.js
β”ƒπŸ“œstore.js

Project Layout

β”œβ”€β”€ README.md # Giving Information about Project.
β”œβ”€β”€ index.js # Used for DOM rendering only.
β”œβ”€β”€ package.json # Manager file of npm package.
β”œβ”€β”€ App.js # This is the root of the app. Contains root view and navigational components.
β”œβ”€β”€ store.js # Combines reducer and middleware to show log
β”œβ”€β”€ actions
β”‚   └── index.js # Provides actions and related handlers
β”œβ”€β”€ apk
β”‚   └── mobile-flashcards-9e63c5b14f55492fa3438dca4bb1ee59-signed.apk # apk file of an app
β”œβ”€β”€ livedemo
β”‚   └── livedemo.gif # live demo of app
β”œβ”€β”€ reducers
β”‚   └── index.js # Reducers for related actions
β”œβ”€β”€ middleware
β”‚   β”œβ”€β”€ index.js # Applies middleware for the store
β”‚   └── logger.js # Provides logging during dispatching actions
β”œβ”€β”€ utils
β”‚   β”œβ”€β”€ _DATA_.js # Sample initial data of deck object
β”‚   β”œβ”€β”€ api.js # Provides CRUD methods for decks and cards
β”‚   └── colors.js # Colors used system-wide
β”‚   └── notificatons.js # Helper methods to manage local notifications
β”œβ”€β”€ screenshots
β”‚   β”œβ”€β”€ screenshot1.PNG 
β”‚   β”œβ”€β”€ screenshot2.PNG  
β”‚   └── screenshot3.PNG  
β”‚   └── screenshot4.PNG  
β”‚   └── screenshot5.PNG  
β”‚   └── screenshot6.PNG  
β”‚   └── screenshot7.PNG  
β”‚   └── screenshot8.PNG  
β”‚   └── screenshot9.PNG  
└── components
    β”œβ”€β”€ component
    β”‚    β”œβ”€β”€ CustomClickButton.js # A custom component for button
    β”‚    β”œβ”€β”€ TextButton.js  # A custom component for text button              
    β”œβ”€β”€ Deck
    β”‚    β”œβ”€β”€ index.js # A component to display an information of deck listed in Decks Component
    β”œβ”€β”€ DeckDetails
    β”‚    β”œβ”€β”€ DeckDetails.js # A component to display an information of a specific deck
    β”œβ”€β”€ Decks
    β”‚    β”œβ”€β”€ Decks.js # A component to display all decks to be used as a home screen
    β”œβ”€β”€ HomeScreen
    β”‚    β”œβ”€β”€ index.js # A component that displays a home page
    β”œβ”€β”€ Navigation
    β”‚    β”œβ”€β”€ index.js # A component that displays a bottom tab navigation bar and stack navigation.
    β”œβ”€β”€ NewCard
    β”‚    β”œβ”€β”€ NewCard.js # A component to create a new question card for a specific deck.
    β”œβ”€β”€ NewDeck
    β”‚    β”œβ”€β”€ NewDeck.js # A component to create a new deck.
    β”œβ”€β”€ Quiz
    β”‚    β”œβ”€β”€ Quiz.js # A component to test users' knowledge about a deck of cards.
    β”‚    β”œβ”€β”€ QuizError.js # A component to throw an error when there is no question card located in a specific deck
    β”‚    β”œβ”€β”€ QuizResult.js # A component to show the result of quiz

udacity-react-mobile-flashcards's People

Contributors

rapter1990 avatar

Watchers

 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.