TL;DR π
The Long Version π
I've always wanted to do a voting app because hey - they're cool!
I read an article on how to build charts in JavaScript with chart.js and GraphQL using an amazing tool called graphql2chartjs. The timing was amazing, Game of Thrones' battle of Winterfell was a few days away so I decided to get a taste of who folks thought would stray into the long night on the episode.
I tweeted this out and waited β³
The app got a very shocking 10,000 votes before the episode aired
Not to mention, over 50% of the votes were for Grey Worm #RIPGreyWorm
Scary stuff! I reset the votes tally so you can get a feel of the app and its functionality.
π Give it a go! ππ
βοΈ How I built it βοΈ
The App has:
π Vue.js + Chartjs on the frontend π₯οΈ
π Hasura + Apollo GraphQL in the backend β‘
π Deployed on Netlify π₯
π§ Backend π§
I used Hasura and it's one-click Heroku Deployment to set up my backend. Hasura gives us real-time GraphQL over a PostgreSQL database. Next up we need to define a schema, in the Data section of the API Console, we have to create a characters table with the following columns...
-id holds an integer value, is the primary key and is auto incremented
-name holds a text value
-votes hold an integer value and have the default value set to 0
Once you have the schema setup, you have to enter the character names manually in the Data section of the API Console.
We're done with the backend for now.
β¨ Frontend β¨
Like I said above, I did the frontend in Vue.js, weβd have to install it before we can go on and to do that weβll need Node.js on our system. Once weβve got node installed, enter the following command to install the vue cli npm i -g @vue/cli. To set up a new Vue project, we enter the following command vue create myapp, replace myapp with whatever funky name you want to call this app and click default when prompted to pick a preset. When done initializing, your folder structure should resemble the one below.
When the app is done initializing, cd <myapp> and enter npm run serve to run your app. The command line will display a local address that your app is being hosted on, open your browser and go to that address. This should be what you see.
Putting it Together π€
At this point, we have a basic Vue App on the frontend and our backend with Hasura is initialized. The goal is to create an app to visualize the death votes for Game of Thrones characters, so we go on and install our visualization tool, chart.js with the following commands npm install vue-chartjs chart.js --save. We also install graphql2chartjs the tool that helps us read graphql data and use that in our charts, to do that we run the command npm install --save graphql2chartjs.
We've got to import a few files into our main.js file. After which, your main.js should look like this:
A lot of the packages imported are explained in two articles I did on queries and mutations in GraphQL below...
Seeing as the chart will be displaying data in real-time, we will be using subscriptions which we will cover now. As usual, there are a few things we have to look out for, on lines 16 and 20 you need to paste the name of your app so that Apollo can help your Vue app communicate with the GraphQL backend.
Pay attention to line 19, our implementation of subscriptions uses a web socket to keep a constant connection to the server and serve fresh and updated data to the UI.
After tinkering around with the main.js file, in the src, we have to create a folder called constants where we create a file called graphql.js. In that file, we need to import gql by pasting import gql from graphql-tag; at the top of the file.
The graphql.js file lets us have a common file to keep all our queries, mutations and subscriptions. This makes it easy to export them into the App.vue when we need to.
Your graphql.js file should look something like this...
The ALL_VOTES_QUERY query gets the name and id of an entry in the characters table. Similarly, you can try out other operations and add them to the file as I have. Similarly,
We then create the chart component that we will later export into our App.vue file. We call this BarChart.js. This is the standard format if one wants a reactive chart that gets data from an API which in our case is our GraphQL API. The vue-chart.js docs cover this in detail.
Now, in your App.vue file, the changes you make will be displayed when
In the App.vue there are three snippets that you need to pay attention to:
Number 1οΈβ£
<div v-for="charName of characters" v-bind:key="charName.id">
<button class="button" @click="updateVotes(charName.id)">
{{charName.name}}
</button>
</div>
The variable characters stores the result of the ALL_CHAR_QUERY query. We use the v-for directive to print out each item in the result array as the title of a button. It is important that we use the v-bind directive to bind the character ID and use it as a key to iterate over the items in the results array i.e all the characters in our database. This will prove useful when binding each vote to a specific character.
Number 2οΈβ£
<h2 v-if="loading">
βοΈ Total Votes: {{totalVotes.characters_aggregate.aggregate.sum.votes}}
</h2>
I wanted to be able to show the total number of votes places. This snippet does just that. The number updates as users vote in realtime, which mean we would have to subscribe to that data. To achieve this... I left the subscription to do this out of the graphql.js code I shared. Don't worry though, the Hasura Graphiql has a very intuitive way of creating subscriptions (shown below) by ticking boxes and it will write out the text for you.
Once you do that, copy the subscription generated and paste it in the graphql.js file to enable it.
We use v-if to display the data only if the data is done loading otherwise you can get an undefined object at times and we wouldn't want that, would we?
Number 3οΈβ£
<div class="chart">
<bar-chart v-if="loaded" :chartData="chartData" :options="options" :width="200" :height="300"/>
</div>
Here, we import the bar-chart component we created with BarChart.js and pass the data using the chartData and options variables. Again you see us using the v-for directive to render the chart only after the data has loaded, we do this to avoid errors.
After these additions, you can style the application and npm run serve to see some pretty cool bar charts. That's pretty much how the web app came to be. It's worth mentioning that when building it in, I gave some thought to adding and omitting certain functionality. There are a few things I left out, namely:
- I didn't restrict voting to a single vote per user
- I didn't give users the ability to start their own poll
The project is up on GitHub, feel free to fork and add any functionality you need or would want!
malgamves
/
GameOfCharts
A Realtime App to visualize votes on who folks think will die in Episode 3 of Game of Thrones Season 8. Built using Vue.js, Hasura and Chart.js
Valar Viz
Deaths Polling App for Game of Thrones characters.
The App has:
π Vue.js + Chartjs on the frontend π₯οΈ
π Hasura + Apollo GraphQL in the backend β‘
π Deployed on Netlify π₯
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Run your tests
npm run test
Lints and fixes files
npm run lint
Customize configuration
Drop me a question on Twitter if you have any. Hope you enjoyed reading this. Till next time :)
Top comments (7)
Amazing post man, we have created something like this too, we are using Vue + Quasar and Firebase as our database and hosting. Take a look
gotchallenge.app
Checked it out and it looks great. Can you share a repo of the project? Thanks!
Ooh I love the attention to detail. Really cool. Where did you get the GOT themed assets?
sweet post! thank you
Most welcome, thanks for taking the time out to read it.
Also check out got.bet for another React and graphql powered GoT deadpool. Source in the about page.
That John Snow - always sharing too much...
i just tried it, really cool - great illustrations!