Anonymous Critique P. 2
We are coding an Anonymous Critique single-page web application using Firebase to store feedback and Vue.js to render feedback live, and filter by positive, negative, and all feedback.
We have built our static page with a comment on the project, displayed with a title, image, and project statement on the left side of the page, can be input through a text area at the top of the right side of the page. We have decided that comments can be tagged as either positive or negative using the thumbs up or thumbs down icon. These will also include a interactivity where a user will have to both enter a comment and click either positive or negative button to disable the submit comment function. Positive comments will be for congratulatory critiques comments, and negative comments will correspond to more critical critiques and areas for improvement in the project. Comments will be sent to Firebase upon clicking the comment button, and structured using JSON storage of the message, the tag (either positive or negative), and a display property for use in the feed.
Upon loading of this page, all previous comments on this project will be displayed in the feed, below the comment area. Messages will be pulled from Firebase and loaded in this feed area. Vue.js will live-update this feed based on user input of new comments, and interface with Vue Fire. Functional aspects are broken up by color in the filterable feed table.
From here, we will be coding interactivity into our site, and connecting the comment input field to Firebase and the feed table to Vue.js to update live. We will also be using Vue.js to filter feedback by the tags, shown outlined in pink. The “Dismiss” button will hide a particular critique element from the project feed.
We have broken up roles/tasks for this project as follows:
Amanda:
- Code static web page.
- Take the lead on CSS styling of our web page for design, user experience, and consistency.
- Code some interactivity for aspects not related to Vue.js.
Greg:
- Connect Firebase to our web application to store messages from all users that have inputted critique comments to pull into site on load.
- Use Vue Fire in connecting Firebase and Vue.js.
Emily:
- Connect Vue.js.
- Build and display components, pulling from Vue.js and Firebase.
- Assist in some styling of homepage and some JQuery interactivity.