Secure React Chat Messaging App with Auth0

Chat messaging is everywhere today. We can talk to customer support personnel through a web app that allows them to see our request and respond in real-time. We can interact with our friends and family, no matter where we are, through apps like WhatsApp and Facebook. There are multitudes of instant messaging apps, for many use cases, available today, even some that allow you to customize for a particular community or team (e.g Slack), however, you still may find you need to create your own real-time messaging app in order to reach and interact with a particular audience. This may…


Serverless is a cloud-computing execution model in which the cloud provider is responsible for executing a piece of code by dynamically allocating resources to run the code when needed. With it, we can get reduced operation cost and development time. It allows us to focus on our code to provide business value to the users without worrying about building and maintaining servers.

It takes a couple of steps to configure and integrate these services with our code, and AWS Amplify was built to make it easier to build serverless applications on AWS. …


Serverless is a cloud-computing execution model in which the cloud provider is responsible for executing a piece of code by dynamically allocating resources to run the code when needed. In a previous post, we looked at what serverless is, and we set up our computer to be able to build serverless applications using AWS Amplify. We bootstrapped a React project and added the Amplify library to it. In this post, we will use the Amplify CLI to provision a secured backend API and a NoSQL database. Then we will consume this API from the React project.

Creating The Serverless Backend Services

The application we’re going…


Photo by Fabian Grohs on Unsplash

Serverless computing provides us with benefits such as reduced operation costs and development time. It allows us focus on our code to provide business value to the users without worrying about building and maintaining servers.

AWS is one of the many providers of serverless computing services. In this post, I’ll walk you through setting up your development environment to build on AWS. This will be a primer for future posts in this series.

According to Wikipedia, serverless computing is a cloud-computing execution model in which the cloud provider acts as the server, dynamically managing the allocation of machine resources. What…


AWS Services

Choosing which AWS service to use for running your application might be somewhat confusing to some of us. Even for the experienced, it may take some time to make a decision. Perhaps you are new to AWS, and you may still need to understand the what and why of the various AWS services. Or you might know how to use AWS, but it still takes you longer because you don’t have a process to facilitate easy selection. Let me show you how I do this and the process I follow.

A look at the process

When you’re selecting what service to use for running an…


Photo by Franki Chamaki on Unsplash

In data-driven applications, a data table is used to display data in a tabular format with the ability to edit and delete records in place. When you’re working with Vue, there are different open-sourced components that can be used to easily add a data table to your application.

Many applications today have real-time features, and you may wonder how you can synchronize editing and deleting data in real-time. There are three options for this:

  1. Use WebSocket API. This is not a good option if some of your users are using browsers that don’t yet support WebSocket.
  2. Use a library that…


real-time kanban board

A kanban board is a workflow visualization tool that enables you to optimize the flow of your work. In this post, I’ll show you how to build a real-time kanban board in Vue.

To follow along you’ll need to have some knowledge about Vue and its single file component. You’ll also need the following tools:

  1. Node.js & npm (follow this link to download an installer for your OS)
  2. Vue CLI. If you don’t have this, run npm install -g vue-cli in the command line to install it.

If you have no knowledge about Vue, you can read my previous post


Photo by Oskar Yildiz on Unsplash

Vue.js is a framework for building web applications. It has a reactivity system that allows you to model and manage your application state such that when data changes, it’s reflected in the UI, without you having to query the DOM. If you’ve built apps in vanilla JavaScript or with jQuery, you know you need to query DOM elements and update them in order to display some data or show some other application state.

For a large application this becomes difficult to manage. Last week I spent a few hours to learn some basic things, and adopted it in a side-project…


Photo by rawpixel.com on Unsplash

Real-time data is data that is presented as it is acquired. It is often used in tracking or monitoring systems like traffic GPS system, auction/bidding applications and stock trading applications. Charts help with a graphical representation of this data and help the viewer make a decision easily.

In this post, I’ll show you how to make real-time chart in JavaScript. We’ll be building a basic voting web application with a page for voting, and another page with a real-time chart showing the voting result as it happens. Here’s a peek at what we’ll be building


A datagrid enables you to display and edit data. This is a vital feature in most data-driven applications.

You may have implemented this in one of your React apps in the past. Maybe you used libraries like react-bootstrap-table, react-grid, or react-table. With those, you can add a Datagrid to your React app. But what if you want the changes to be done in real-time and updates synchronized across all connected devices and their browsers?

In this article, I will show you how to build a real-time datagrid in React using react-table and Hamoni Sync.

react-table is a lightweight and fast…

Peter Mbanugo

Software Developer & Writer interested in offline-first. I made Hamoni Sync https://hamoni.tech Email: p.mbanugo@yahoo.com

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