# Frontend System Breakdown
Break down of the different sections of the frontend application

## Application Areas

### API Handler
Use the built-in browser fetch() API and syncronous functions to retrieve data.
Data is fed to the `entity-screener` for validation

### Entity Service and Screener
Uses Joi() to validate outgoing and incoming entites.
Take in parsed database data and output validated objects
Entities are fed to the appropriate `vuex-store` `module`

### Vuex Store
Retrieves data from `entity-screener` and stores it for global access
Prepares data *output* for presentation and ease-of-access before sending to components
Prepares data *input* for save-ability before sending to `entity-screener`

### Components
Vue components to actually display data

## Component Hierarchy
```
Window
|- Global Navigation
|- - Account Control Modal
|- - - Edit Profile
|- - - - Back
|- - - - Edit Photos
|- - - - - Back
|- - - Edit Survey
|- - - - Back
|- - - Search Settings
|- - - - Max-Distance | Remote
|- - - - Part-time | Full-time
|- - - - Current Location
|- - - - - Back
|- - - - Back
|- - - My Account Settings
|- - - - Back
|- Matches
|- - Group (Chat)
|- - - Reveal
|- - - - Back
|- - - Group Settings
|- - - - Leave
|- - - - - OK
|- - - - - CANCEL
|- - - - Mute
|- - - - Other Profile Link
|- - - - - Back
|- Browse Profiles
|- - Match
|- - Hide
|- - Search Settings (see above)
```