Building a Serverless Realtime Chat application with Pusher and NextJS

Why Pusher?

Realtime Chat Application Demo

Prerequisites

  • Local installation of Node.js
  • Local installation of Yarn
  • Basic knowledge of React and React hooks
  • Basic knowledge of Node.js

Brief overview of Pusher’s APIs

Setting up Pusher

Setting up our server

yarn create next-app --example api-routes-cors pusher-chat-demo
yarn add pusher

Setting up the Frontend

yarn add pusher-js axios
NEXT_PUBLIC_KEY= "YOUR_PUBLIC_KEY"

_app.js

pages/index.js

Chat.js

Bonus

--

--

--

Growth at Moni(YC W22) | Adebola.dev

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Add Form Validation to a Vue 3 App with Vuelidate 2 — Models

MY JOURNEY THROUGH THE 30 DAYS CHALLENGE ORGANIZED BY FEMCODE AFRICA

React's new context API: toggle between local and global state

Implementing the Google Maps API into a React App

Create a Notes App with React and JavaScript

Web crypto APIs in Deno

Setup Ant for Salesforce

Adding a health powerup to our prototype

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Adebola Adeniran

Adebola Adeniran

Growth at Moni(YC W22) | Adebola.dev

More from Medium

Deploying a NodeJS application with Heroku using git

Nginx: IP Based Routing

Backups on MongoDB

Security in Mobile application part3(Multi-factor Authentication)