---
# System prepended metadata

title: Final Project - Yipu Zheng
tags: [Project, Documentation]

---

---
title: 'Final Project - Yipu Zheng'
disqus: hackmd
---

Final Project - Yipu Zheng
===
URL of the code: https://codepen.io/yipuz/pen/gOvOQXQ
URL of the demo live: https://codepen.io/yipuz/full/gOvOQXQ


Project Description
---

For the final project, I built an easy-to-use help-seeking board for makerspaces. People can conveniently create a problem card on the board when they need help, and others in the makerspace can react to the problem card in real-time.

The problem tags on the top of the card allow people to easily tell what kinds of expertise are needed to answer a particular question. In addition, the "+1" button enables people to vote-up the most urgent questions in the community. Since the cards are ordered by the numbers of "+1" they have received, the problems with the most "+1" will be noticed and addressed first.

Reflection
---
I tried to incorporate the major concepts we have learned in the semester in my final project, including components, v-show, v-for, v-model, getting input from users, getting real-time data from Firebase, and querying data based on certain conditions. One challenge I encountered is about the implementation of the problem tags. When people input more than one tag, I hoped to display all problem tags horizontally at the top of the card, but I could only display them vertically at first. With help from Yiran, I then realized that it had something to do with the elements I chose for the problem tags. I changed the tags from block elements (div) to in-line elements (span), and they worked as planned. This debugging process helped me to pay attention and reflect on the details that I often overlooked or took for granted when coding. 


###### tags: `Documentation` `Project`