albert-schilling / ciceroic Goto Github PK

• The evaluations rank according to the votes.

Acceptance Criteria:

• The evaluations are ranked according to the votes.

Register and Sign in with Firebase

As a user
I can register and sign in on the entry page to the app via firebase
in order to upload my own speeches and my own evaluations.

Description (Text, Scribble, Wireframe, Design)

• When loading the app, the app checks if the user still signed in and forwards him directly to the next page if signed in.
• If the user is not signed in, the first page shows a sign in form.
• The user can either sign in with his e-mail address and his password or create a new user account.

Acceptance Criteria

• Opening the app checks if the user is still signed in via a comparison with the local storage.
• If the user is not signed in, the first page shows a sign form asking for the e-mail address and a password.
• Beneath the sign in form, a button offers new users to "Sign Up".
• After clicking the "Sign Up" button, a registration form opens, containing the email address, password, first and last name.

Tasks

• Add a logic (probably by Firebase) checking if the user is still signed in via a comparison with the local storage.
• If the user is not signed in, show the form to sign in plus a "Sign Up" button.
• Add the "Sign Up" button.
• Implement Firebase and its signing in and registration logic.
• Create necessary components
• Styling
• Test in mobile and desktop view

Size

Large

Register and Sign in with Firebase

As a user
I can now use the app from anywhere
provided I have the browser and the app's url.

Description (Text, Scribble, Wireframe, Design)

• The app's database is moved from JSON server to Google Firestore.
• The app is deployed via Google Hosting.

Acceptance Criteria

• All the database operations that are required for the moment work via moved to firestore.
• The app can be reached and used via a internet browser from anywhere and any device.

Tasks

• Setup Google Firestore.
• Import the Firestore Database.
• Adapt all speechServices to Firestore.
• Host and deploy the app via Google Hosting.
• Test in mobile and desktop view

Size

Large

Value Statement

As a novice orator
I can edit my profile page
so that I can tell something about myself, change my password and upload a portrait.

Description (Text, Scribble, Wireframe, Design)

• The user can open his profile page via the nav bar in the bottom right corner.
• There he can change his password, write a short bio describing why joined Ciceroic, and upload a portrait.

Scribble

Acceptance Criteria

• The profile page can be accessed via the profile icon in the bottom right corner.
• The profile page shows an overview of the user information: name, email address, portrait, bio and uploaded speeches.
• Clicking on the portrait opens the image in a bigger screen and shows two buttons saying "Delete" and "Upload".
• Clicking the "Delete" button shows a text asking if the user really wants to delete the image and two more buttons to confirm or decline the operation.
• An edit button underneath the profile page allows to edit the bio when clicking.
• A button next to the email address allows to change the password. Clicking on the button shows three inputs, the first one for the current password, the two last ones to input the new password repeatedly. If the password is correct, the password will be reset and sent to the db. If the current password is wrong or the new password does not fulfill the criteria, a message informs the user about the issue.

Tasks

• Create a profile page.
• Fetch data from DB.
• Add a text input and image input.
• Fill the protrait by a default image if the user hasn't uploaded one.
• Add the upload logic to save a portrait in the firebase storage and link it to the user.
• Add the upload logic to allow the user to submit and change his bio.
• Add the logic to reset the user's password.
• Create necessary components
• Styling
• Test in mobile and desktop view

Size

Large

Value Statement

As a (novice/skilled) orator
I can browse speeches filtered by category, evaluations and date
in order to find the speech I am most interested in.

Description (Text, Scribble, Wireframe, Design)

• The start screen shows several speech sliders filtering the speech according to different attributes like category, date or number of evaluations.
• Inspiration from TED Talks Website

Acceptance Criteria

• The start screen shows several sliders according to at least the following attributes: categories (humor, comedy, pitch, educational), date, number of evaluations.
• The slider is responsive and shows as many speeches as fit.
• Further speeches can be displayed by clicking a left or right arrow to slide through the speeches.
• Clicking a speech, opens the speech's detail page.

Tasks

• Create necessary components
• Styling for mobile and desktop view
• Write unit tests
• Write e2e tests

Size

Large

Value Statement

As a (novice/skilled) orator
I can write and read evaluations to a fixed set of short speeches/videos
in order to understand or to show how good speakers use rhetoric skills and techniques.

Description (Text, Scribble, Wireframe, Design)

• The evaluation form inside the first tab of a individual speech is extended by two text inputs: [What I liked about the speech.] [What could be improved.]
• The second tab shows (underneath the average evaluation values) the total number of given evaluations.
• All evaluations consist of three parts according to the inputs (range values, praise and suggestions).
• Scribble

Acceptance Criteria

• The evaluation input form is extended by two text areas.
• The data is stored inside the db.
• The evaluation can be edited after submitting.

Tasks

• Extend the input form and save the additional data in the speech object in the databse.
• Add an edit button and editing logic.
• Retrieve the evaluations from the database and display these inside that tab "Feedback".
• Create necessary components
• Styling
• Test in mobile and desktop view

Size

Medium

Value Statement

As a (novice/skilled) orator
I can log out by clicking on the profile icon inside the right bottom corner
so that I have a larger view upon the communities content.

Furthermore, the app receives a redesign improving the user experience on mobile and desktop.

Description (Text, Scribble, Wireframe, Design)

• Adding icons in place of the footer.
• The profile icon in the right bottom corner opens an navigation bar containing of yet just another icon that allows to log out.
• The icon in the left bottom corner reminds one of recording a video. Clicking this button will just show a message, announcing the possibility to upload speeches soon.
• Reducing overall font size.
• Create bars instead of circles for the evaluation dimensions.
• Redesign of the color scheme.

Acceptance Criteria

• Profile icon in the right bottom corner toggles a navigation bar on click.
• The navigation bar shows another icon allowing the user to log out on click.
• The icon in the left bottom corner shows a message on click.

Tasks

• Create and implement the necessary icons.
• Add the toggle logic to open the nav bar.
• Add the log out logic.
• Add the logic to show a message when clicking on the "cinematic" icon.
• Create necessary components
• Styling
• Test in mobile and desktop view

Size

small

Value Statement

As a (novice/skilled) orator
I can up- and downvote evaluations or flag evaluations as inappropriate
so that high-quality evaluations are ranked at the top and inappropriate evaluations are automatically deactivated.

Description (Text, Scribble, Wireframe, Design)

• The evaluations in the second tab of the video details page can be up- and downvoted and marked as unappropriate.

Acceptance Criteria

• Displayed evaluations get a footer with three icons for up-, downvote and flag.
• Next to the up- and downvote icon is a counter showing the sum of the previous votes.
• The user can only vote or flag an evaluation once.
• The user can change his up- or downvote anytime.
• The votes and flag are saved in the speech object in the db.
• The buttons are marked if the user has once submitted a vote.

Tasks

• Extend the evaluations with a footer containing 3 clickable icons.
• Up- and downvotes are added to / subtracted from the total value of votes by 1.
• Save the additional data in the speech object in the db after each click.
• Check every time the user clicks an icon if he/she has clicked it before. Up- and downvote buttons behave like toggle buttons allowing to correct a vote at any time.
• Clicking the downvote icon after clicking the upvote button takes away the previous upvote and vice versa.
• Create necessary components
• Styling
• Test in mobile and desktop view

Size

Medium

Notes:

• Flagging an evaluation first opens a message, asking the user to chose from a list of reasons and additional info: [ Offensive and disrespectful.] [No helpful observations whatsoever.] [Spam or misleading.] [Copy of an existing evaluation.] [Additional information: ]
• An evaluation that received at least 3 flags is deactivated and will no longer be rendered.
• An evaluation can only be up/downvoted or flagged once per session.
• scribble

Acceptance Criteria

• Clicking the flag opens a window with specified input form.
• An evaluation that got flagged at least 3 times is marked as inappropriate internally and will not be displayed.
• After submitting a complaint, the flag button is disabled and hovering over it shows the message, that the user has already submitted a complaint about this speech.
• The administrator receives an email with details about the complaint.

Tasks

• Disable the flag button if clicked before.
• Send an email pointing to the speech, the speaker, the complaining user and the complaint.

Value Statement

As a novice orator
I can see user evaluations for a fixed set of short speeches/videos
so that I understand how good speakers use rhetoric skills and techniques.

Description (Text, Scribble, Wireframe, Design)

• The evaluation form on a video details page contains two tabs: [evaluate speech] [average evaluation]
• By default, the first tab is opened showing the possible inputs.
• Clicking the second tab opens the average values from the previous evaluations.
• If no evaluations have been given yet, a message is shown saying: 'This speech received no evaluations yet. Be the first and give the speaker a review.' – and linking back to the first tab.
• Optional: connect statistics (points indicating average values) with a line

Scribble

Acceptance Criteria

• The evaluation area starts with two tabs.
• The first tab is opened by default and shows the evaluation form as before.
• The second tab opens the average values from the previous evaluations.
• If no evaluations have been given, the tab shows the specified message with a link back to the evaluation form.
• optional: A line connects the points indicating the average evaluations per category.
• optional: The line is responsive and adapts to a window resize.

Tasks

• Create two tabs link to two separate components, while the first component is opened by default.
• Calculate the average values from previous evaluations contained in the JSON file and show these in the second tab.
• Implement the logic if no evaluations have been given.
• The new page contains the video, video description and the specified evaluation form.
• Create necessary components
• Styling
• Test in mobile and desktop view
• optional: Draw a svg line connecting the points indicating the average evaluations.
• optional: The svg line's values reference the nodes in every aspect, thus being responsive to window resize.

Size

Small

Value Statement

As a novice orator
I can evaluate a fixed set of short speeches/videos
so that I understand what skills and techniques are important for a good speech.

Description (Text, Scribble, Wireframe, Design)

• A list of cards with videos.
• Clicking a card opens the video on another page. Underneath the video description a short questionnaire opens. Here the user can evaluate the quality of the speech.
• First, he can enter his name to associate the evaluation to himself.
• Next, there are several 5 step range inputs: gestures and facial expressions, pronounciation and vocal variety, comprehensibility and structure, stylistic devices, credible and convincing
  Scribble

Acceptance Criteria

• Click on a card opens a new page with the video, video description and evaluation form.
• The evaluation form contains a mandatory input field for the evaluator's name and a set of 5-step range inputs.
• After submitting the user gets a confirmation message and the form is resetted.
• The evaluation shall be stored in a JSON file alongside the other information related to the specific video.

Tasks

• Create a new page that opens when clicking a video.
• A return button allows to return to the video list.
• The new page contains the video, video description and the specified evaluation form.
• Submitting saves the data in the JSON file alongside the other video data, returns a confirmation message and resets the form.
• Create necessary components
• Styling
• Test in mobile and desktop view
• Write unit and ui tests

Size

Medium

Value Statement

As a novice orator
I can watch a fixed set of short speeches/videos
so that I can get a first feeling for good rhetoric.

Description (Text, Scribble, Wireframe, Design)

• A list of cards. Each card contains a video and information about the video: title, description, speaker, duration, date.

Scribble

Acceptance Criteria

• Cards have to be visually separated.
• Videos play when clicked.

Tasks

• Download ~5 appropriate short speeches and store locally.
• Setup a JSON server that stores information about the videos, including their local path
• Create necessary components
• Styling
• Test in mobile and desktop view

Size

Medium