--- 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`