Build a polling web app with Next.js
Polls are a good way of capturing popular opinions from people within a limited set of options. We’ll set out on a quest to find out the most popular household pet. Dogs, cats or hamsters.
Like all polls, we’ll want to see the results in realtime and we’ll call this app “PET WARS: The polls awakening”.
At the end of this, users should be able to cast their votes and see the results change as other users cast theirs too.
Kindly ensure you have Node, Npm or Yarn installed on your machine before moving past this section. This will be needed for running and managing the dependencies needed by our application.
- Next.js: this is a framework for developing server-side rendered applications, just as you would with PHP, but this time with React.
- Pusher: this is a framework that allows you to build realtime applications with its easy to use pub/sub messaging API.
- Chart.js: this is a library that makes plotting charts pretty easy. More specifically, we’ll be using react-chartjs2 which is a simple wrapper to make this easier to use in React.js applications.
This will clone the starter pack into a directory called
pet-wars. Our app directory will look like this.
- components: any Next.js component we’ll create will go here.
- css: styles for our components and pages would go here.
- pages: any
.jsfile in this directory would be served as a page. So any page we’ll want to create would go here.
To install the dependencies needed by our app, run:
Now we have all dependencies needed by our app installed.
Getting our Pusher credentials
If you don’t have a Pusher account already, kindly create one here. Once you have an account, simply head down to you dashboard and create an app. Once that is done, click on App Keys and note your credentials. We’ll be needing them in a bit.
Now that we have all dependencies and credentials needed to build our application, let’s get building!
Create the chart component
We’ll need to display the results of the polls as they happen to users using a bar chart. Start by creating the file
Chart.js in the components directory.
13 May 2018
by Christian Nwamba