User Stories

User Stories

Any stretch goals are italicized. Any features that need more research are bolded.

Basic Functionality (User Auth, Index, etc)

Index Page

• As a user, from the home page ('/')
  • Regardless if I am signed in or not, I want to:
    • Be met by a header containing the website logo, a search bar, "For Business", "Write a Review"
    • Be met with a carousel of images that has a button with that business' category and a search icon, which would redirect to a search results page with that search query response (e.g., Exotic Veterinarian, House Sitting, utilize subcategory tags here)
    • See a selection of cards of recent activity of reviews and added photos in the second section of the page
    • See a selection of cards of categories with icons representing those cards in the third section of the page
    • See a footer with additional information about the website at the bottom (a fun way for us to plug our linked ins and gh)
  • If I am not signed in, there are login and sign up buttons available that will open modals
  • If I am signed in,
    • I should view an icon representing my profile where I can access my profile to edit
    • and there should be a notification icon

User Actions - Not Logged In

• As a user who is not signed in and on any page of the website, I want to see two buttons in the header from the home page...
  • I want the Log In Button in the header to open a Log in Modal with a field for email and a field for password
    • Under the log in fields there should be a "Log In" button
    • Beneath the "Log In" button there should be footer text reading "New to The Paw? Sign Up" with the text sign up being a link that will change the modal out for the sign up modal
  • I want the Sign Up Button in the header to open a Sign Up Modal with fields for First Name, Last Name, email, password, Zip Code (use usps api to get city and state from zip) and an optional field for Birthday
    • At the bottom of the signup modal there should be footer text reading "Already a user? Log in" with the text Log in being a link that will change the modal out for the log in modal
      • When a user signs up the modal should switch out to a modal Welcoming the user and asking them to personalize their account, with options to Upload a Photo for their Profile, add a phone number. There should be a Save and Continue button as well as a skip button
        • when a user selects upload a photo a small image upload modal opens
        • When a user clicks save and continue or skip they are redirected back to the index page.

User Actions - Logged in

• As a user, from any page on the site, I should be able to click my profile picture in the upper right corner of the header and from that dropdown, either select About Me, or Log Out.
  • If I select About Me, I should be redirected a page with my profile picture, name (last name initial), location, # of friends, # of reviews, # of photos.
    • Under the profile overview, there should be a link to "Reviews"
      • Clicking "Reviews" will redirect me to a feed of my reviews in chronological order with two buttons in the review card, Edit and Delete
    • Under the profile overview, there should be a link to "Photos"
      • Clicking "Photos" will redirect me to a page like the All Images page listing all my photos with a button to Delete each photo
    • The right side will work as a personal activity feed with a list of reviews and added photo events (sort by created At) (use js helper functions in react to format cards).
  • If I select Log Out My current user sessions will be closed and I will be redirected to the index page.

---

Businesses

Users should be able to view a business:

• As a user, when I select a business page, I want to be redirected to that page and view
  • Within the photo header:
    • Business Name
    • Stars (avg) and number of reviews
    • if Price, view price category
    • subcategory tags
    • Hours of business operation for current day of week
    • See all Photos button that if I click on it, a modal is opened with all photos shown in a card format where there is an add photos button (?????????????????)
  • Within the main body on the left, there will be:
    • "Write a Review" button, an "Add Photo' Button, a "Share" Button (????)
    • "About the Business" with the business description
    • "Location & Hours":
      • Snapshot of the map with address and get directions button
      • Hours separated by day of the week
    • "Amenities and More" or "Services Offered" section
    • "Reviews" with reviews sorted chronologically, with review having:
      • Photo of the reviewer
      • First and last name
      • City, state
      • Number of friends (??????), number of reviews posted, number of photos uploaded
      • Stars (paws) given, date of review
      • Review
      • Images (if uploaded)
  • Within the right side body (this will stick as the user scrolls down the page (js sticky), there will be:
    • Link to website
    • Phone number
    • Get directions with address

Users if signed in should be able to add a business:

• As a user, if I am signed in, there should be an "Add a Business" link in the "For Business" dropdown, which will redirect to the Add a Business form with the following fields:
  • Business Name
  • Business Address
  • City
  • State
  • Zip/Postal Code
  • Description
  • Category: Dropdown
  • Price: Dropdown, Optional
  • Hours:
    • Checkboxes for each day
      • If the checkbox is selected, open and close time fields are enabled for that day
  • Business Email: Optional?
  • Website: Optional
  • Business Phone Number: Optional
  • Main Image: At least one necessary
  • Submit Button labeled Add Business
    • When I click submit, I want my form to submit as well as redirect me to my new business
  • Cancel Button
    • When I click Cancel, all fields will clear

Users should be able to edit and delete their own created businesses:

• As a user, if I am signed in, there should be an "Manage Business" link in the "For Business" dropdown, which will redirect to the Manage Business page with a card for each business with Edit and Delete buttons under each.
• When I click on Edit, I am redirected to an Edit Business page with a form that says "Update Business" and the following fields:
  • Name
  • Address
  • City
  • State
  • Zip/Postal Code
  • Description
  • Category: Dropdown
  • Price: Dropdown, Optional
  • Hours:
    • Checkboxes for each day
      • If the checkbox is selected, open and close time fields are enabled for that day
  • Business Email: Optional?
  • Website: Optional
  • Phone Number: Optional
  • Main Image: At least one necessary
  • Submit Button labeled Update Business
    • When I click submit, I want my form to submit as well as redirect me to my updated business
  • Cancel Button
    • When I click Cancel, all fields will clear
• When I click on Delete, I want to be prompted with a modal to confirm my deletion of the business

---

Reviews

Users should be able to view all reviews on a business

• As a user whether I am logged in or not and when I navigate to a specific business page, I want to see all reviews for a business listed in order by most recently to least recently posted and those review components should contain the following items :
  • Name of author
  • Location of author (?)
  • Profile picture of author
  • Stars (Paws)
  • Review date
  • Review Text
  • review images
  • (??????) helpful, thanks, love this, oh no)

Users should be write reviews for businesses:

• As a user, regardless of if I am signed in or not there should be a "Write a Review" button on a business page just below the photo header for the business and when I click on it I want to be redirected to a page with a form
  • this form will contain the following fields
    • Stars (Paws)
    • Review Text
    • Attach photos (only if logged in) (????????????)
    • Submit Field labelled Post Review
    • and if I click on "Post Review"
      • and if I am not signed in I want to be prompted with Log In modal before my review can be posted
      • and I am signed in I want my review to post and then to be redirected to the business page at the anchor point for my review (look into how to use anchors to jump to specific point on page, utilize review id)

Users should be able to edit and delete their own reviews:

• As a user, if I am signed in there should be a profile button dropdown and when I click on the About Me option, I want to be redirected to my profile page where I can view my public profile and when I click on "My Reviews" I should be
  • redirected to a page listing all my reviews with buttons Edit and Delete for each review
    • and if I click on Edit I want to be redirected to a Edit Review page with a form "Update Review"
      • and I want to see the following fields
        • Stars (Paws)
        • Review Text
        • Edit photos (????????????)
        • Submit Field labelled Update Review
      • when I click Cancel, all fields will clear
      • when I click submit, I want my form to submit as well as redirect me to my newly updated review on the business page
    • and if I click on Delete I want to be prompted with a modal to confirm my deletion of the review (subheader explaining this will delete images as well)

---

Search and Filter

Users should be able to search by name, category, and filter by price

• As a user I want to be able to type in a search bar or to select categories to find matching businesses,
  • and from this search results page I want to be able to filter by Price, Category, Sub category (only if category selected and applicable) in the left sidebar and the page will refresh with appropriate filters
  • and in the main body of the results, I want to see individual business cards that contain:
    • a picture, the name, average stars, number of reviews, tags, and a most recent review and when I click anywhere in the card I want to be redirected to the business page.
      • and ???????????? if tags are present on business, then when I click on a tag I want my page of results to update filtering by that subcategory tag
  • in the main body, there will be a default of at most 10 cards, at which point there will be page navigation buttons

---

Images

Users should be able to view all images on a business

• As a user whether I am logged in or not and when I navigate to a specific business page and when I click on "See All Photos" within the Photo Header, I want a modal to popup with all images for a business in order by most recently added to least recently

Users should be able to add images for businesses:

• As a user,
  • regardless of if I am signed in or not there should be a "Add photos" button on a business's photo modal at the top right corner
    • and when clicked this button will redirect me to a page where
      • there is a header with the business name, with a add photos header as well
      • Under this header there is a link to view all photos
      • I can browse the files on my current device and add an image. (!!!!!!!!!Will have to look into how we will upload images from current device.)
      • If at least one image is added to the upload queue, then a thumbnail with that image will appear, including a delete symbol within the thumbnail for me to remove the image if I choose to
      • If I wish to add more the browse button is down in the lower left corner and the Upload button is in the bottom right
        • If I am not logged in a login modal will populate
        • If I am logged in, it will redirect me back to the photos page of the business after adding photos

Users should be able to add images to reviews:

• As a user,
  • if I am signed in and writing a review or editing a review
    • the edit/create review page would have an button "Attach Photos" below the review text
    • and upon clicking this button I can browse the files on my current device and add an image. (!!!!!!!!!Will have to look into how we will upload images from current device.)
    • If at least one image is added to the upload queue, then a thumbnail with that image will appear, including a delete symbol within the thumbnail for me to remove the image if I choose to (this small trash can delete icon will not trigger a modal to open for confirmation)
    • If I wish to add more the browse button is down in the lower left corner and the Upload button is in the bottom right
    • If I am logged in, it will redirect me back to the business page at the anchor point for my review (look into how to use anchors to jump to specific point on page, utilize review id)

Users should be able to delete their own uploaded images:

• As a user, if I am signed in there should be a profile button dropdown and when I click on the About Me option, I want to be redirected to my profile page where I can view my public profile and when I click on "My Photos" I should see
  • redirect to a page like the All Images page listing all my photos with a button to Delete each photo
    • and if I click on Delete I want to be prompted with a modal to confirm my deletion of the photo
    • and then the modal will close upon deletion

---

Bonus : Google Maps

Users should be able to see business locations on Google Maps.

• As a user, if I am on a business page I should be able to see
  • a small Google Maps map with the waypoint for the business to the left of the business hours
    • within this section, the address will be under the map
    • (stretch) and there will be a Get Directions Button for a user to click on that will redirect them to Google Maps and the url will be formatted like this https://www.google.com/maps/dir//1000+University+Town+Centre+Dr,+Morgantown,+WV+26501/ with spaces in the address replaced with + signs

Bonus : Friends

Users should be able to see public profiles of other Users

• As a user, if I am logged in, I should be able to select About Me from my Profile Dropdown
  • at my About Me page I should see an option to open a list of friends in cards where there would be a name, number of reviews, location, profile picture and a button to delete friend
    • when clicking anywhere but the delete button on a friends card I would want to be redirected to a list of that friend's reviews and images (think activity feed but filtered)
      • On this public profile if I was actively a friend there would be a button to Delete Friend (or a disabled button to notify the user that they are currently friends)
      • On this public profile if I was not a friend of that user, there would be a button to Add Friend
    • when clicking on the Delete Button a modal will popup to confirm the delete
    • (stretch) and there will be a Get Directions Button for a user to click on that will redirect them to Google Maps and the url will be formatted like this https://www.google.com/maps/dir//1000+University+Town+Centre+Dr,+Morgantown,+WV+26501/ with spaces in the address replaced with + signs