Link to live NODE application: https://non-verbal-communication.herokuapp.com/ and REACT https://kimcheru18.github.io/non-verbal-communication-fullstack-capstone-react/build
This is a simple communication app for someone suffering from ataxia or other language impairment. There are other apps for this condition but they typically require that the user know what words they are looking for in order to create a sentence.
My mother is a stroke survivor. She can read and she understands what people are saying but has difficulty finding words and knowing what word she wants. It is much easier for her to communicate with pictures. It is also difficult for her to respond to a question like, "Do you want eggs or cereal for breakfast?" She will nod her head yes to both but if she sees a picture, she will point to the one she wants and if there is a phrase under the picture, she can read it.
Landing (HOME) Page
Step 1. Initial landing page explains what app is for.
Add New Card Page
Step 4. User clicks "NEW" from navigation section. All options are displayed except icon selection. A mock card is also displayed that will update as user selects or adds content.
Select or Add Category Page
Step 5. User selects existing category or "add category" from dropdown list. When user selects a category from the dropdown list, subcategory dropdown will populate with appropriate subcategories.
Add Category Input Page
Step 6. User enters new category into input field and presses "add". User selects newly created category from dropdown to continue.
Select or Add Subcategory Page
Step 7. After selecting or adding a category, user selects existing subcategory or "add subcategory" option from dropdown list. When user selects a subcategory from the dropdown list, item dropdown will populate with appropriate items.
Add Subcategory Input Page
Step 8. User enters new subcategory into input field and presses "add". User selects newly added subcategory from dropdown to continue.
Select or Add Item Page
Step 9. User selects existing item or "add item" from dropdown list.
Add Item Input Page
Step 10. User enters new item into input field and presses "add". User selects newly created item from dropdown to continue.
Search Icon Page
Step 11. When
Card Dropdown/Display All Cards
Step 12. User can display all existing cards.
Card Dropdown/Display Specific Card
Step 12. User can display a specific card from the navigation dropdown list.
Category Dropdown/Display All Categories
Step 12. User can display all existing categories.
Category Dropdown/Display Specific Category
Step 12. User can display a specific category from the navigation dropdown list.
Click Subcategory Title To Display Selected Subcategory
Step 12. User can display one subcategory by clicking on the subcategory title within a category.
Update Delete Page
Step 8. User can update icon or text. User can delete card.
Home Page
Step 9. Displays all categories as clickable buttons to enter that category.
Front-end
- HTML5
- CSS3
- JavaScript
- jQuery
Back-end
- NodeJS
- Mongoose / MongoDB
- Heroku (hosting)
Testing
- Mocha & Chai
- TravisCI
Responsiveness
- The site is fully responsive on most mobile & laptop devices.
- Tested on Chrome, Firefox & Safari.
Security
- Passport
- Bcrypt
- npm install ==> install all node modules
- nodemon server.js ==> run node server
- npm test ==> run the tests
- npm install ==> install all node modules
- npm run build ==> build the react files in the "build" folder
- npm start ==> run node server on http://127.0.0.1:8080
- npm test ==> run the tests
*Add login feature so user can save their own collections of cards *Add feature that will allow user to click a card and temporarily save it to a side bar in order to better communicate what the user wants or needs *Add button at the top of the show all page that will show all edit buttons, otherwise hide all edit buttons *Allow users to capture their own images and add to app *Give options for user to change the background and card colors