Realtime Twitter-Style Poll (Next.js & Pusher)

This project contains the source code for a real time server-side rendered Twitter-style poll React application built with Pusher and Next.js.

Here is a screenshot of the application.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Install Node on your machine: Ensure that you have Node and npm or Yarn installed on your machine. To install Node and npm on your machine, see the Node download page. If you prefer using Yarn as your package manager to using npm, you can get Yarn here.
Create a Pusher application: Create a new application on your Pusher Dashboard to get your app credentials.

Clone the repository into a new directory on your machine.
Install the dependencies by running the following command from the new directory.

npm install

or using yarn

yarn install

Create a .env file in the root of the new directory with the following content.

# Pusher App Credentials

PUSHER_APP_ID=YOUR_APP_ID
PUSHER_APP_KEY=YOUR_APP_KEY
PUSHER_APP_SECRET=YOUR_APP_SECRET
PUSHER_APP_CLUSTER=YOUR_APP_CLUSTER

Start the app by running the following command. The app will run on port 3000 except that port is already in use.

npm run dev

For production

npm start

Here is a run-down of the core technologies used in this project.

Next.js - A framework for building server-side rendered(SSR) React applications with ease. It handles most of the challenges that come with building SSR React apps.
Pusher - Pusher is a technology for building apps with varying realtime needs like push notifications and pub/sub messaging. It is the engine behind the realtime ability of the poll app.
React - A very popular JavaScript DOM rendering framework for building scalable web applications using a component-based architecture.

Remy Sharp (@remi) - Next.js configuration for dotenv and custom servers (remy/next.config.js).