User Stories

User Actions

Visiting

As a visiting, non-demo user:

• I want to be able to explore Shuttr without having to create an account.
• I want to search for images, users or tags.
• I want to see image info and comments.

Demo

As a demo user:

• I want to skip authentication at the click of a button.
• I expect to find a demo user button in both the log in and sign up forms.
• I want to do everything a normal user can do.
• I do not expect to be able to change demo-user account settings.

Sign Up

As a new user:

• I want to sign up for Shuttr via a sign-up form.

When I'm on the /signup page:

• I would like to just enter my email, password and confirmed password on a clearly laid out form.
• I do not like captchas.
• I do not like to enter my birthday info, but I understand the need for safe search.
• I expect to be redirected to a newsfeed or dashboard upon successful sign up.

When I enter invalid data on the sign-up form:

• I would like the website to display errors and keep all input except for the password and confirmed password.
• I want to see why my input failed and I do not want to enter in information again.

Log in

As a logged out user:

• I want to be able to log in to the website via a log-in form.

When I'm on the /login page:

• I would like to enter my email and password on a clearly laid out form.
• After logging in, I want to be redirected to my newsfeed.

When I enter invalid data on the log-in form:

• I would like the website to display errors and keep all input except for the password and confirmed password.
• I want to see why my input failed and I do not want to enter in information again.

Log Out

As a logged in user:

• I want to log out by clicking Log out or Sign out in the user icon dropdown menu within the navigation bar.

While on any page of the site:

• I expect to find a log out option in the user icon dropdown menu within the navigation bar.
• I expect to be redirected to the /welcome or /login page.

Images

Upload image

As a logged in user:

• I want to upload a images.

When I click the upload cloud icon in the nav bar:

• I expect to be redirected to the /upload page.

• When I'm on the /upload page:

• I expect to be able to drag and drop or select an image(s) from my computer or phone.
• I expect to preview my image(s), crop or rotate them and edit the title, description and tag info.

View image

As a logged in or logged out user, I want to explore and search for images.

When I'm on the /images page:

• I expect to view the most recently posted images.
• I expect to also filter through images by tags and users.

When I search for an image in the navbar:

• I expect to see a list of images that match the criteria.

When I search for a specific image in the browser's navigation bar:

• I expect to be redirected to the specific image's page at /images/:imageId.

Update image

As a logged in user, I want to edit my image by clicking an Edit button associated with the image anywhere that my image appears.

As a logged in user, I want to edit my image info by entering info in a pop up form on in an input field within the image card.

When I'm on the /images, /images/:imageId, or /users/:userId/uploads pages:

• I can click "Edit" to make permanent changes to images I have posted.
• I can hover over my image title or description and an edit icon will appear.
• I can edit image title and description info in a pop up window or in an input field within the image card.

Delete image

As a logged in user, I want to be able to delete my images by clicking a Delete button associated with the image anywhere that my image appears.

When I'm on the /images, /images/:imageId, or /users/:userId/uploads pages:

• I can click Delete to permanently delete an image I have posted.

Comments

Post comment

As a logged in user:

• I want to comment on images.

When I click the comment bubble icon in image card in a feed:

• I expect to see a comment thread pop up.
• I expect to see an Add a comment text input field within the comments thread pop up.
• I expect to click on the input field and watch it expand.

• When I'm on the /images/:imageId page:

• I expect to be able to scroll down and see a comments thread with an Add a comment bubble at the end of the thread.
• I expect to enter in a comment, click Add comment and see my comment appear at the end of the thread.

View comment

As a logged in or logged out user, I want to search for a specific comment in a thread.

When I'm on the /images/:imageId/comments page:

• I expect to view the entire thread for a specific image.

When I enter shuttr-aa.herokuapp.com/images/:imageId/comments/:commentId:

• I expect the browser window to move to the exact location of the specific comment and have the background of the comment component highlighted.

Update comment

As a logged in user, I want to edit my comment by clicking an Edit button associated with the comment anywhere that my comment appears.

When I'm on the /images, /images/:imageId, /images/:imageId/comments or /images/:imageId/comments/:commentId pages:

• I can hover over my comment and an edit icon will appear.
• I can click "Edit" to make permanent changes to the comment I posted.
• I can edit my comment in a pop up comment thread or in an input field within the comments thread at /images/:imageId/comments.

Delete comment

As a logged in user, I want to delete my comment by clicking a Delete button associated with the comment anywhere that my comment appears.

When I'm on the /images, /images/:imageId, /images/:imageId/comments or /images/:imageId/comments/:commentId pages:

• I can hover over my comment and a delete icon will appear.
• I can click Delete to permanently delete a comment I posted.

Tags

Search for tag

As a logged in or logged out user, I want to find images that have a certain tag.

When I'm on the /images page:

• I expect to find a Trending button that will redirect to /images/tags and show tags organized into categories.
• If I click on a tag, I expect to be redirected to /images/tags/:tagName.

When I'm on the /images/:imageId page:

• I expect to see a list of tags that the photo has.
• If I click on a tag, I expect to be redirected to /images/tags/:tagName.

When I'm on the /search page:

• I expect to be able to search for tag names.
• I expect to be able to filter by image or tag.
• I expect to see a gallery of images that contain the searched tag name.