Skip to content

A dedicated administration UI to monitor and manage common Kafka administrative tasks. This is based on React and Node and hosted via Express server.

Notifications You must be signed in to change notification settings

suyash-naithani/React-Express-Kafka-poc

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Kafka Administration UI

A dedicated administration UI to monitor and manage common Kafka administrative tasks.

Adminitrative UI Screenshot

Features

  • Javascript based UI, using the React framework.
  • UI implemented using patternfly framework
  • Hosted via Express server and backend based on Node.js
  • Uses Kafka-node as the Kafka Client

How it works

  • Producers produces or writes data to Kafka brokers or Kafka topics.
  • Consumers, on the other hand, read data or — as the name implies — consume data from Kafka topics or Kafka brokers.
  • Kafka client allows you to read, write and process streams of events in parallel.
  • Nodejs serves as a backend and reads/writes/updates using Kafka Client. This layer has all the business logic.
  • The backend is hosted by Express Server and exposes a REST endpoint (a Graphql endpoint in future).
  • The UI reads/writes using this endpoint.

Prerequisites

  • The latest versions of Node.js and npm installed on your machine
  • The latest Java version (JVM) installed on your machine
  • Kafka installed on your local machine.

Installation Steps

  • Download the Kafka binaries from here and extract the archive.
  • Install Kafka as described here
  • Start Zookeeper and Broker.
  • Create Topics, Producers, Consumers and Consumer Groups.
  • Run yarn install and yarn start.

About

A dedicated administration UI to monitor and manage common Kafka administrative tasks. This is based on React and Node and hosted via Express server.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 75.3%
  • HTML 11.1%
  • JavaScript 11.0%
  • CSS 2.6%