Model

Member

Representation of a user on the system that stores all of the user data used in logging in, group memberships, assigning of chores, and user settings.

Input	Type	Required?	Notes
Email address	string	Yes	More than one user cannot have the same email address
Password	string	Yes	Must be between 6 and 20 alphanumeric characters
Repeat password	string	Yes	Must match other password field in order to create a new member account
Display name	string	Yes	Defaults to name on email address
Color choice	string	Yes	Defaults to random HEX color from a palette of 8 colors (TBD)
Weekly chore point goal	int	No

Chore

Representation of a single chore that stores the chore information to be used when creating a new chore card.

Input	Type	Required?	Notes
Name	string	Yes	Must be unique in respects to other chores in the group
Monthly	boolean	Yes
Size	int	Yes	Determines how many points a chore is worth. Possible values: 1, 2, or 3. This is only required for weekly chores
Description	string	No

Group

Representation of a group, that contains all of the a group’s membership and chores.

Input	Type	Required?	Notes
Name	string	Yes	Does not have to be unique with respects to other group names or groupID.
Group Passcode	string	Yes	System creates a random alphanumeric string of six characters. Users can choose to change to another randomized alphanumeric string in the group settings. Must always be unique for every group.
Membership list	array (of Member objects)	Yes
Chore list	array (of Chore objects)	Yes
Calendar	array (of Chore cards)	Yes	Refer to Chore Card object for more information on how Chore object are created and stored.
Repeat Weekly Chore Assignments	boolean	Yes	This option will repeat the previous week's chores and assign them to the same people who did them last week, on the same days. True means that it will repeat, false will mean that the chores will reset each week and the group members must reassign themselves chores

Chore Card

Representation of a chore, used in the weekly/monthly view, people assign chores to themselves by dragging and dropping chore cards to their row in the calendar view.

Input	Type	Required?	Notes
Chore	Chore object	Yes	Chores must be specified and listed within the group's settings before creating a Chore Card
Due date	string	No	Field will be set when a Chore Card has been assigned
Assigned member	Member object	Yes	Field will be set when a Chore Card has been assigned
Completion status	string	Yes	This should only be "completed," "incomplete," or "overdue."

View

Elements are based off of material-ui/materialize components: http://www.material-ui.com/ & http://materializecss.com/

Navigation

This navigation bar on the left-hand side of the page will be the main navigational UI element that users will use to move between pages on the website. When logged in, the navigation bar will have links to the weekly and monthly calendars, a user’s group page, the user’s own profile and settings page, and a logout button. When not logged in, the navigation bar will have a link to sign-up for an account. If a user had previously logged in, we can skip login and join/create group entirely to take them directly to the Weekly Calendar page of their group. Navigation will be the global component in which all other routes will be rendered under. This allows for us to pass in certain props or data to other routes, namely whether or not a user is logged in or not through User Auth Status.

• State
  • User Auth Listener: Check for if user is logged in or not, Firebase function. Depending on whether or not a user is authenticated, a different set of codes can be run. If user is authed, we can obtain the user info from Firebase and store it locally in state)
• Elements
  • Toolbar: Navbar with additional functionality, such as buttons, menus and text.
  • Dropdown menu/Sign out button: Drawer, or side menu will show up on mobile. If user is authenticated and logged in a dropdown menu will show on top right in navbar to allow for quick access to user settings and sign out.

Login Page

The page where users can sign into an existing account, or to create a new account. It will consist of text boxes for account info input, a button to login, and a link to register for a new account. Once the user has successfully logged in, they will be directed to the join/create group page. If the user had previously logged in and connected to an existing group, they will instead be taken to the Weekly Calendar Page of their group.

• State
  • Sign In/Sign Up: Check to see if user is signing in or signing up, stored locally. Display different forms depending on which is selected
• Elements
  • Error text: Error text will show upon error being generated from incorrect/incomplete Firebase call, such as nonexistent user, and/or incorrectly formatted email
  • Text field: Simple text input field for password, email, username, etc.
  • Sign in button/Sign up button: Depending on whether or not the user is signing in or signing up, a different button will show. Sign In will check for preexisting user, and sign up will generate a new user. If no errors occur, push data to firebase if signing up and move to join/create group page

Join/Create Group Page.

After logging in, if the user is not part of a group, they can join a group with a group passcode (or randomly generated string), or create a new group. Upon creating a group, a dialog (modal) will pop up with their group passcode to enter. Upon submitting the dialog, the user will be taken to the group landing page (Weekly Calendar).

• State
  • User Auth Status: If user somehow navigated to this page without being logged in, send them back to login page. This info is obtained from global Navigation component, which passes in whether or not user data exists. If it does, user is authed, otherwise, not.
  • GroupID
• Elements
  • Create Group Button: Clicking on the button will show dialog with the Group name and Group pascode for joining.
  • Join Group Button: Button will open dialog with text field to input passcode to join pre existing group.
  • Text Field: Input for join group, used for passcode entry
  • Dialog: Modal to display, Material-UI component.

Weekly Calendar Page

This is the first page that the user will be directed to if they are logged in and a part of a group. It will display the view of the current week with all assigned chores that have the weekly type (as opposed to monthly type). Users self-assign themselves chores on this page. Chores can be marked as completed, which increases their weekly chore points. Once assigned, the chores repeat themselves every week on the same day, with the same person, if "Repeat Weekly Chore Assignments" is set to true.

• State
  • User Authentication Status:redirect to login if user is not authenticated
  • Calendar chores, separated by member
• Elements
  • Calendar:Abstraction of representation of a calendar view. This is for displaying all assigned chores [chore cards] in a readable format. Most likely will be grid based, and will be from Monday-Sunday format.)
  • Add Chore Card Button: By taking an existing chore, a user can assign a group member and due date as well as whether or not it repeats per week and create a chore card abstraction. This data will be stored in firebase, and visually displayed on the calendar.
  • View Monthly: A button, or simple dropdown link in navbar [display only when on this page] to go to monthly view
  • Collapsible: Accordion like list that will display on mobile only. Replaces calendar on mobile. Each collapsible will contain a user’s assigned chores, similar to a show/hide list
  • Dialog: Material UI component for confirmation:
  • Weekly Chore Goal Progress Bar: Element that will keep track of the completion of a week’s chores. Since each chore has a point value, the total for progress bar is the equivalent of all the chore points combined.
  • Chore Cards: Abstraction of a chore with assigned member and due dates. It is displayed on the calendar in the form of a colored line of text with chore name and assigned member. Clicking on it will bring up a dialog with additional information, such as due dates, whether or not it repeats, or additional notes, as well as an Edit Chore Card option that will allow the user to change any of the above settings specific to that chore card.

Monthly Calendar Page

On this page, users will see a monthly view of chores. It acts in an identical manner to the weekly calendar page except this page only will show chores that have been set to the monthly type. The only other difference between this and the weekly calendar page is that it does not display the chore goals progress for the user (since the chore goals are only for weekly chore goals).

• State
  • User Authentication Status: redirect to login if user is not authenticated
  • Calendar chores, separated by member
• Elements
  • View Weekly Calendar: Same as View Monthly, just vice versa
  • Calendar: See Weekly Calendar
  • Add Chore Card: See Weekly Calendar. Only difference is that repeat is by month and not week.
  • Collapsible: See Weekly Calendar
  • Dialog: Material UI component for confirmation
  • Chore Cards: See Weekly Calendar

Group Settings Page

This page accesses the settings for a group and allow them to change. This page will incorporate a secondary navigation bar that appears next to the primary bar and will have links for users to access the group settings, and group chores list. When clicking on the main navigation link for the group page, it will first direct user to the chore list view. From this view, any group member can add, remove, or edit their group’s chores. On the group settings view, any group member can change the group settings (such as the weekly point goal, add/remove members, generate new group passcode, etc.).

• State

  • User Authentication Status: Redirect to login if user is not authenticated
  • Group settings: Unique by groupID. This is pulled from Firebase upon entering the page

• Elements

  • Dropdown: Dropdowns necessary for selecting options, such as which chore to edit.
  • Text Field: Text input for editing. Edits are done in chore details and group name.
  • Popup: Android like notification telling user action has occurred, such as successfully edited a field.

User Settings Page

This page will allow the user data to change certain information about the user. The user can choose their color from a set of 8 colors that we will determine later on. There will be text fields where the user can change their display name. The user can also change their password and/or email from this page.

• State

  • User Authentication Status: Redirect to login if user is not authenticated
  • User settings: Unique by user ID. Pulled from Firebase through passed in User ID.

• Elements

  • Dropdown: Selected options, such as color
  • Error Text: Predefined errors for editing, such as a preexistent username or email, an incorrectly formatted email, etc.
  • Text Field: For editing, such as username, email, password.
  • Popup: See Group Settings Page

Controller

Each component will handle it’s own pulling and pushing of data from Firebase. There are two global instances in which data is acquired from Firebase to be used across multiple components. A default user authentication check from Firebase will occur in App.js (or Navigation). If user is authed, pull that data using Get User(). and from there, that information will be passed to each child route. The room/group data will be pulled once upon entering the room component (by default, weekly calendar view), which will be a check from App.js and then passed down to the relevant room components.

• This component will contain redundant calls/functions that will be used across multiple components, as well as global functions.
• This exposes the Firebase API, allowing us to call data from Firebase.
• Navigation, User Settings, Group Settings will utilize these calls.

Firebase Calls

Check User Auth Listener

Input	Output
N/A	True: User data object, False: null

Get Group

Input	Output
GroupID (String)	Group object containing data on current members, setting, and chores