User Stories

User Stories

• Login
• Sign Up
• Nav Bar
• View Hosts
• View Specific Host
• View User Page
• Review Host

User Story Stretch Goals

• Mark a Host as Favorite

Login

As an unauthorized user, I want to be able to login to the website via a form, so that I can access my private information and find a party host.

Questions

• How will a user login?
  • User will login via email and password
• What routes should we use for login?
  • User will be directed to a login form via /login route
  • The form will use a method of POST with an action of /login
• Where should the user be redirected after login?
  • Personal profile page /users/:id(\\d+)
• What happens if the user doesn't exist/enters bad credentials?
  • Display the message "Invalid user credentials :( Please try again."
• Should this story include allowing a user to reset their password?
  • Not yet -- maybe in a future story
• Should logging in use session-based or use token-based authentication?
  • We will use session-based auth
• How will we protect from cross-site request forgery?
  • We will use the csurf package

Acceptance Criteria

Given that I'm a logged-out user and

1. When I'm on the /login route
   • Then there will be a login form/Modal with an email and password field and a "Login" button to submit the form.
2. When I try to fill out the form with an invalid email and password combination and the "Login" button
   • Then at the top of the form, I will see a red message "Invalid user credentials :( Please try again."
3. When I try to fill out the form with a valid email and password and press the "Login" button
   • Then I will be redirected to my profile home page at /users/:id(\\d+) route.
4. When I try to navigate to any route on Wine Party as an unauthorized user
   • Then I will be redirected to the /login route

Given that I am a logged-in user

1. When I refresh a page
   • Then I will still be logged in and stay on that page

Sign Up

As an unauthorized user, I want to be able to sign up for the website via a signup form, so that I can access Wine Party.

Questions

• Will the user enter a username and an email address to signup?
  • User will enter first name, last name, email address and zip code to signup.
• Will we confirm their password during signup?
  • User will confirm the password through a confirm password field.
• What route should we use for signup?
  • User will be directed to a signup form via /sign-up route
  • The form will use a method of POST with an action of /sign-up
• Where should the user be redirected after signup?
  • Personal profile page /users/:id(\\d+)
• Will we allow OAuth authentication via a third party?
  • Stretch Goal - yes but will be using sessions object in MVP
• What happens if the user with an email already exists?
  • Use Flask SQLAlchemy to send error to a front end error display text field
• What happens if the user enters the wrong password confirmation?
  • Use Flask SQLAlchemy to send error to a front end error display text field
• How will we protect from cross-site request forgery?
  • We will use the csurf package

Acceptance Criteria

Given that I'm a logged-out user and

1. When I'm on the /login route
   • Then there will be a login form with an "Email" field, a "password" field and a "log in" button to submit the form.
2. When I try to fill out the form with an invalid email and password combination and press the "log in" button
   • Then at the top of the form, I will see a red message Invalid user inputs :( please try again.
3. When I try to fill out the form with an email that doesn't exist in the system and press Enter or press the "Login" button
   • Then at the top of the form, I will see a red message Invalid user inputs :( please try again.
4. When I try to fill out the form with a valid email and password and press press Enter or press the "Login" button
   • Then I will be redirected to my user home page at /users/:id(\\d+).

Nav Bar

As a logged in user, I want to see a Nav Bar at the top of the page, so I can navigate between pages and logout.

Questions

• What will the nav bar allow the user to do?
  • Navigate between pages and logout
• Which pages will there be links to in the nav bar?
  • "My Events" /users/:id(\\d+), "Find Hosts" /hosts/, and as a stretch goal
• How will the links be made?
  • Using React components to the corresponding page.
• How will the nav bar allow a user to logout?
  • Using a React componen to /logout
• When a user clicks the logout button component, what page will they be redirected to?
  • First to /logout to handle the logout, and that route handler will redirect them to /login
• How will the nav bar be created?
  • Using a React navBar component.
• Will there be anything else on the nav bar outside of the links?
  • Before the links, it will also say "Welcome to Wine Party, First Name!"

Acceptance Criteria

Given that I am a logged-in user

1. When I click logout
   • Then I will be redirected via logout component to /logout and that route handler will log me out and redirect me to /login
2. When I click on "My Events"
   • Then I will be redirected via React component to /users/:id(\\d+) using their own id.
3. When I click on "Find Hosts"
   • Then I will be redirected via React component to /hosts

_View Hosts

As a logged in user I want to view a list of hosts so that I can find the nearest hosts that might interest me.

Questions

• How many Hosts will the user be able to see on the screen at a time?
  • All hosts will be visible as they scroll, but it will depend on media screen size, potentially 10 as a good starting point
• What information will users be able to see on hosts in the list?
  • Basic information including name,cityState, description
  • Whether if they are a Sommelier or Mixologist
  • The name of the host will be a React component to the detailed view of that host (/hosts/:id(\\d+))
• How will the hosts be ordered?
  • Hosts will be ordered by location as a default, search and filter options will be a stretch goal.
• What route is used to view hosts?
  • A GET request to /hosts
• What happens when a user clicks on a specific hosts?
  • The user is redirected to the detailed host view at /hosts/:id(\\d+)

Acceptance Criteria

Given that I am a logged-in user

1. When I use the option to view hosts
   • Then a list of all hosts shows up ordered by location showing each hosts name,cityState, description.
2. When I click on a specific host
   • Then I will be redirect to /hosts/:id(\\d+)

_View Specific Host

As a logged in user I want to view specific hosts so that I can see details, see or add reviews, and add host to reserve for event.

Questions

• What information will be available on the detailed host view?
  • Host Name (First and last name)
  • Host review averages and comments
  • Approximate distance to User
  • A description of the host
  • An unordered list of all connected reviews
    • Each review will show reviewer (reviewer) and the review text (reviewText).

Acceptance Criteria

Given that I am a logged-in user

1. When I am viewing a specific host
   • Then I will see the host at /hosts/:id(\\d+) that shows First name, Last name, cityState, description, buttons to reserve the host, and all connected reviews. Each review will show reviewer and reviewText.

Reserve a Host

As a logged-in user I want to be able to click a button so that I can reserve a host for event

Questions

• Where will the buttons be available for a user?
  • On the detailed view of host (/trees/:id(\\d+))
• How would the page let the user know a host has been reserved?
  • By marking them reserved and added to calendar
• How would my app handle updating the database?
  • Changing the BOOLEAN value to true for “reserved” and adding reserved date and false to "not reserved"
• Will users be able to toggle if host is reserved?
  • Yes, by clicking on the host and having calendar popup.
• Will users be able to remove reserved host from their event?
  • As a stretch goal, a "remove" button will be available next to host in the event. This will remove host by deleting the coresponding entry in the database.
• What will happen if a user clicks on "reserve" and the host is already in their event?
  • A new row in entry in the database will not be created. And a reminder that this host is already selected for the event.

Acceptance Criteria

Given I am a logged-in user

1. When I click the "reserve" button
   • Then the Wine Party App will display a calendar popup to pick the date of the event and reserve the host.
2. When I click "reserve" button on a host that is already reserved
   • Then either nothing will happen in the database and an alert will be sent to the browser or the database will be updated if it is different date than what was reserved.

View User Page

As a logged in user, I want to be able to view my own events so that I can keep track of events and hosts.

Questions

• How will a user navigate to their own events page?
  • By clicking on "My Events" in the nav bar.
• How will the user's page look?
  • At the top of the page it will say "First Name's Events"
  • Formatting can be the same as the /hosts view
• Should we show something different for a new user because there will be no events?
  • When there are no events, show an extra link in the middle of the page that redirects to /events with an invitation to "Create an event and find your Host!".
• What will happen when a user clicks on a Event name?
  • The same thing that happens when they click on a host name in the /hosts view. They will be redirected to the detailed view of the event at /events/:id(\\d+).
• Will users be able to remove events?
  • A "remove" button will be available next to event, only when a user is looking at their list of events. This will remove event by deleting the corresponding entry in the database with a DELETE request to /events. The correction row in the table will be found using where with the eventId and userId.

Acceptance Criteria

Given that I'm a logged-in user and

1. When I am viewing my own home page
   • Then I will see "Welcome First Name at the top, followed by a list of "Upcoming and past events".
2. When I click on the event names
   • Then I will be redirected to that events detailed page view at /events/:id(\\d+)

_Review Host

As a logged in user, I want to be able to review hosts so that I and others read/see my reviews.

Questions

• How will a user access the review form for a host?
  • User will click on a review button which will redirect them to /reviews/new
• What is included on the review form for the tree?
  • reviewText, "star" rating
• What type of elements are used for those form items?
  • reviewText: textarea
  • Stars: select element with five option elements
    • Bad (value=1), Below Average (value=2), Average (value=3), Good (value=4), Amazing (value=5)
• Where should the user be redirected after reviewing?
  • User will be redirected to the detailed view of the host they reviewed /hosts/:id(\\d+)
• How will we protect from cross-site request forgery?
  • We will use the csurf package

Acceptance Criteria

Given that I'm a logged-in user and

1. When I'm on the /reviews/new route
   • Then there will be a review form with five fields (described above) and a "Submit" button to submit the form.
2. When I try to fill out the form with empty inputs press the "Submit" button
   • Then at the top of the form, I will see a red message "Review fields cannot be empty"
3. When I try to fill out the form with valid inputs and press press Enter or press the "Submit" button
   • Then I will be redirected to the detailed view of the host I reviewed /hosts/:id(\\d+)

 

User Stories Stretch Goals

Mark a host as favorite

As a logged-in-user I want to be able to favorite a host, so that I can I keep a record of my favorited hosts that I’ve reserved before.

Questions

• How would the page let the user know a host has been “favorited”?
  • It changes the color of the word "favorite" when they click on it next to the host.
• How would the app update the database with the “favorited” hosts?
  • We will use FLAS SQLAlchemy to toggle the favStatus from the default false to true.

Acceptance Criteria

Given I am a user that’s signed in.

1. When I click on add favorite host
   • Then the new host appears listed.