Reddit Inspired Upvoting System with Angular and Firebase NoSQL

Key Takeaways

in this episode we're going to build a Reddit style up voting down voting system using angular 4 and Firebase in this example we have a collection of items already in the database and we also have Firebase authentication set up in our app if you're new to Firebase authentication I've added a couple links in the description with more details the first thing we need to think about is modeling our data in the Firebase no SQL database our database needs to answer two fundamental questions what is the user's vote for a given item and What's the total vote count for a given item we can answer this question by creating a collection based on the unique ID of the items for each item id we save the user IDs that have voted on that item this way we can query an item and see if the users voted on it and we can also tally up the collection of users under an item to get the total vote account let's start by building the service the first thing we need is the Firebase object observable for a specific item [Music] id we also need the user to be able to cast their vote by updating the item object in the database the update user vote function will send a new key value pair to the the item in the database with the key being the user's ID and the value being the value of the boat which can be either A-1 zero or one now we can build the upvote button component our component will accept a couple of input values since this is normally going to be a child component of an item we can go ahead and pass it the item id as well as the user ID in the component typescript we have just a generic component but we're also going to be using the input decorator and we've also imported low Dash as well to help us facilitate the vote count which you'll see later on so we have input variables for the item ID and the user ID and we have a couple number variables one that represents the total vote count and one that represents the current user's vote during the NG on AIT life cycle hook we can subscribe to the Firebase object observable from our service the observable itself is going to emit the up votes and we can use that to figure out what the user's vote is and also get the total vote count for an item and we add a conditional statement when checking the user vote because it's possible the user is not logged in when viewing an item an added feature you might consider is redirecting the user to a loog Lo in page when they click the up vote button and they're not logged in in this example I'm using the low Dash library to put all the object values into an array and then get the sum of that array doing the same thing in JavaScript would require a lot more code so we're going to keep it concise and readable so now we can build two separate functions one for up boting and one for down boting these functions are identical the only difference being a positive one for an up vote and a netive one for a down vote we also want the user to be able to cancel their vote by just clicking the same button again so we do this by checking to see if the user vote is already an up Vote or a down vote and if it is then we set the vote value to zero which will essentially reverse their vote we can do this in one line using a JavaScript turn are operator to replace a multi-line if El statement the final step is to end the subscription once the component's destroyed to avoid introducing memory leaks into the app we can do this with the on destroy life cycle [Music] [Music] hook in the template we create two Arrow icons that handle up boating and down boating we simply find the up vote and down vote functions to The Click event on these buttons [Music] in order to show the user whether or not they've up voted or down voted for an item we color the up votes green and the down votes red we can do this with the NG class directive which will add an active class to the item if it's up vat is either greater than zero or less than zero now if we go into our app we can see that we have a fully functional upboat downb system on the left we have the app itself and on the right we can see it's updating the Firebase database in real [Music] time that's it for this episode if you found the video helpful please like And subscribe and if you want to support the channel consider becoming a pro subscriber at angular firebase.com for just a few bucks a month you'll get access to exclusive content as well as free one-on-one project Consulting thanks for watching and I'll see you next time audio jum