jae-s / appbeware

React-Redux Application | AppBeware is a crowdsource platform that empowers the community to raise awareness about the potential dangers of apps.

Welcome to AppBeware!

AppBeware is a crowdsourced platform that empowers the community to raise awareness about the potential dangers of apps.

---

Collaborators:

• Jessie Sholler | Visual Designer & Front-End Developer
• LaMana Donadelle | Front-End Developer
• Ethan Donahue | Backend Developer
• Scott Moore | Backend Developer

---

Table of Contents

• Problem & Solution
• User Story
• Design Process
• API'S
• Technologies
• Features And Functionality
• Brainstorming Document
• Resource Links
• File Architecture
• Click here to visit the site!

---

The Problem:

With over 6 million + Apps There are very few timely, relevant, current and credible sources to determine if apps could be potentially dangerous.

Current Resources:

1. Google Search: Returns thousands of results. It's difficult to determine relevant or credible content.
2. Curated Sites: Editorial content may be based on limited opinions and not real experiences. May be rated on criteria that is not relevant to all parents.
3. News: This information is usually available after an event occurs. By this time, your child may have already been exposed.
4. Word of Mouth: This information is usually slow traveling, and may never reach the people who may find it useful.

The Solution:

• Create a platform for users to share their personal experiences with dangerous apps
• Provide a standardized alert system
• Primary alerts established based on the community​'s concerns
• Display trending apps
• Credibility through authentication

---

User Story

1. As a user, I want to flag apps that I have found to be dangerous so that I can help other users make informed decisions about the dangers of apps for their children. // make aware​

2. As a user, I want an up-to-date, credible, reliable source to help traverse the app world so that I can determine if an app is dangerous for my child. // become aware​

3. As a user, I want to be able to get updates about apps that I am concerned about. // stay aware

---

Design Process

• Planning: Informed by the user stories, an Entity Relationship Digram was created to map out essential features of the site. The ERD was then used as a blueprint for the low-fidelity wireframes.

• Demo:

• Graphic Icons: When creating the icons we tried to use familiar shapes that users could easily identify with. The shield icon's primary shape resembles a stop sign with the inner shape constructed as a shield. These iconic shapes work together to visually represent our user story (make aware, become aware, stay aware).

---

API'S

• App meta data API: https://42matters.com/app-market-data

---

Technologies

Design Tools:

• Adobe Illustrator
• Adobe Photoshop
• Adobe XD

Development Tools:

• Framework: Material UI
• React
• Redux
• Redux-thunk
• Connected-react-router
• History
• Clsx
• Downshift
• Toastify
• Proptypes
• MySQL
• Express
• Sequelize
• Path
• Node
• if-env
• Moment
• Passport
• Nodemon
• Concurrently
• Heroku (Heroku build)
• GoDaddy url registration

---

Features And Functionality

• Redux: Early on, it became clear that we were running into a problem managing state through React. Given the number of components and reaching into 4 generations from varying pages, we were faced with a choice. Either manage state at the app.js level and engage in prop-drilling (passing props from component to component through multiple generations or find a way to manage state globally using a third-party tool. After some research, Jessie discovered Redux as a way to create a global state that could be accessed by every page and component regardless of ancestry.

  There was a steep learning curve, but once the team learned how to manage Redux actions and reducers as well as the appropriate file structure (capitalization was key in order to work with Heroku), managing state became much easier. Pretty soon, managing clicks, API calls and generating data upon page loads would be routed through as many as five locations (utils/API.js, routes, controllers, Redux actions and reducers). Once complete, the global state would be updated and the appropriate rendering on the screen would be handled through React.

  The most useful tool in troubleshooting Redux and managing all of the actions was through a Google Chrome extension, Redux DevTools. This required some additional customization inside Store/index.js. The images below show the power of this extension and the ability for the programmer to see when actions are being called and the resulting changes in state.

  • Sign In / Register

---

Brainstorming Document

• Google Doc
• ERD

---

Resource Links

• ERD: https://www.lucidchart.com/
• Ratings Guide: https://www.esrb.org/ratings-guide/
• API access to Mobile Data: https://42matters.com/app-market-data
• React Native: https://github.com/facebook/react-native/tree/master/RNTester

---

File Architecture

Click To View

     AppBeware
     ├── Client
     │   ├── build
     │   ├── node_modules
     │   ├── public
     │   ├── src
     │   │   ├── assets
     |   │   │   ├── images
     |   │   │   ├── Readme_assets
     |   │   │   └── styling
     │   │   ├── components
     |   │   │   ├── AboutTheShields
     |   │   │   ├── AddAppReview
     |   │   │   ├── Alerts
     |   │   │   ├── AppPageComponents
     |   │   │   ├── CategoryCards
     |   │   │   ├── Footer
     |   │   │   ├── HeaderContainer
     |   │   │   ├── HomePageShieldLayout
     |   │   │   ├── HomepageTabNav
     |   │   │   ├── HoverShieldInfo
     |   │   │   ├── Modals
     |   │   │   ├── Nav
     |   │   │   ├── Ratings
     |   │   │   ├── SearchAppAnnie
     |   │   │   ├── SearchResults
     |   │   │   ├── SignIn
     |   │   │   ├── SignUp
     |   │   │   ├── Toasties
     |   │   │   ├── TopTrendingApps
     |   │   │   ├── UserDetailsPanel
     |   │   │   └── Wrapper
     │   │   ├── pages
     |   │   │   ├── AppPage.js
     |   │   │   ├── CategoryPage.js
     |   │   │   ├── Disclaimer.js
     |   │   │   ├── Homepage.js
     |   │   │   ├── ProfilePage.js
     |   │   │   └── SplashPage.js
     │   │   ├── Store
     |   │   │   ├── Actions
     |   │   │   ├── Reducers
     |   │   │   ├── history.js
     |   │   │   ├── index.js
     |   │   │   └── InitialState.json
     │   │   ├── utils
     │   │   ├── App.js
     │   │   └── index.js
     │   ├── .gitignore
     │   ├── package.json
     │   └── Readme.md
     ├── config
     ├── controllers
     ├── db
     ├── middlewares
     ├── models
     ├── node_modules
     ├── routes
     ├── .gitignore
     ├── package.json
     ├── Readme.md 
     └── server.js

---

Back To Top