kaitvan/front-end-capstone

front-end-capstone's Issues

Build views and routes

User Story

The user will be able to click on any link in the navigation and see the correct view.

Acceptance Criteria

WHEN the user clicks on a link in the navigation,
THEN the user sees that view appear on the screen

Dependencies

#1 and #2

Dev Notes

Use react-router-dom to ensure all links are working properly. Also, make a page not found screen, so that if the user types in an incorrect address, they are redirected.

Navigation

User Story

The user should see a navigation bar with links to each view.

Acceptance Criteria

WHEN the page loads,
THEN the user should see the brand, explore, my list, and spin links.

Dependencies

All setup for react should be complete before beginning to build.

Dev Notes

Do not include authorization or routes at this stage.

Build explore library

User Story

The user can explore a list of self-care ideas to generate content for their list.

Acceptance Criteria

WHEN the user clicks explore in the navigation
THEN the user sees many activities

Dependencies

#3

Dev Notes

Use same activity component to populate this page. Activities should be uploaded into Firebase by developer.

Filter component on My List view

User Story

The user can filter their self-care list by category and time limit.

Acceptance Criteria

WHEN the user selects criteria for an activity and clicks FILTER button
THEN only the activities that meet that criteria appear on the DOM

Dependencies

#3

Dev Notes

Make the filter by dropdown show the filter options only when clicked. On load, all activities should be shown.

Add explore activities to My List

User Story

The user should be able to add items from the explore list to their own list

Acceptance Criteria

WHEN the user clicks on a single activity on the explore view
THEN the user should see a modal with the activity details
AND WHEN the user clicks 'Add to My List' button
THEN the item is added to their own list view

Dependencies

#11

Dev Notes

Use the same single activity view and update form to add an activity.

Build activity component (READ)

User Story

The user should be able to see all activities on their list appear on the My List view.

Acceptance Criteria

WHEN the user clicks My List,
THEN the user sees all activities appear in their own blurb.

Dependencies

#3

Dev Notes

Will need to build mock data in Firebase to have activities appear on the DOM.

Single activity view (UPDATE)

User Story

The user should have the option to update each part of an activity.

Acceptance Criteria

WHEN the user clicks on an activity
THEN the user can edit any part of the activity's description

Dependencies

#6

Dev Notes

Add a "Save Changes" button to the single activity modal view, which will update any changes.

Authorization

User Story

When the page loads, the user should have an option to log in to get started.

Acceptance Criteria

WHEN the page loads,
THEN the user sees an option to log in with Google to get started.
AND WHEN the user logs in,
THEN the user's information (email address/photo) appears in the bottom of the navigation along with a sign out button.

Dependencies

#1

Dev Notes

The sign out button should take the user back to the home page, with the same prompt to log in.

Add activity form (CREATE)

User Story

The user should see an 'add activity' button on the My List view.

Acceptance Criteria

WHEN the user clicks the add activity button
THEN they should be prompted to fill out a form on a modal
AND WHEN the user clicks submit
THEN the new activity should appear on the My List view (and in firebase)

Dependencies

#4

Dev Notes

Build a modal component to be used for the single activity view as well.

Spinner component

User Story

The user can spin a spinner to choose a self-care activity.

Acceptance Criteria

WHEN the user clicks the spin link in the navigation
THEN they see a spinner on the DOM with all of their current self care options
AND WHEN they click a "spin" button
THEN the spinner spins for a random amount of time and selects an activity at random

Dependencies

#3

Dev Notes

The spin button and the chosen activity should both appear above the spinner. After an activity is chosen, the spin button text should change to "Spin Again."

Single activity view (DELETE)

User Story

The user can view activity details and delete an activity from their list.

Acceptance Criteria

WHEN the user clicks on an activity
THEN a modal appears with all activity information and a delete option
AND WHEN the user clicks delete
THEN the modal disappears and the activity is removed from the My List view

Dependencies

#4

Dev Notes

Use the same modal component as for the add activity form. Make sure the delete function removes both the activity and the user-activity-object from Firebase.

Filter explore page

User Story

The user should be able to filter activities on the explore page.

Acceptance Criteria

WHEN the user selects filter criteria and clicks filter button
THEN only the activities that meet that criteria should appear on the page

Dependencies

#9

Dev Notes

Use the same filter options as for the other views.

Filter on Spin view

User Story

The user should be able to select criteria for the activities to choose from on the spinner.

Acceptance Criteria

WHEN the user selects criteria for the filter and clicks the filter button
THEN only the activities that meet the criteria should appear on the spinner

Dependencies

#9

Dev Notes

Use the same filter component to filter on this view, but this time, the spinner should automatically update.