https://github.com/rapter1990/udacity-react-mobile-flashcards
Udacity React Mobile Flashcards
https://github.com/rapter1990/udacity-react-mobile-flashcards
cards decks react react-native udacity-nanodegree
Last synced: 3 months ago
JSON representation
Udacity React Mobile Flashcards
- Host: GitHub
- URL: https://github.com/rapter1990/udacity-react-mobile-flashcards
- Owner: Rapter1990
- Created: 2021-01-20T11:00:33.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-02-06T08:32:24.000Z (over 5 years ago)
- Last Synced: 2025-01-20T22:53:01.759Z (over 1 year ago)
- Topics: cards, decks, react, react-native, udacity-nanodegree
- Language: JavaScript
- Homepage:
- Size: 78.6 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Mobile Flash Card
### Live Show
Click here to show the live show of project
### 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
```bash
├── 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
```