The Kafka Dashboard is a React + TypeScript + Material UI web application that allows users to publish, consume, and monitor Kafka messages. It provides real-time insights into Kafka topics, partitions, consumer groups, and metadata in a visually appealing and interactive UI.

✅ Publish & Consume Kafka Messages
✅ Monitor Kafka Topics, Partitions, Offsets, and Keys
✅ View Consumer Groups & Broker Details
✅ Dark Mode Toggle (with Theme Persistence)
✅ Pagination & Column Filtering
✅ Configurable Kafka Server Settings
✅ Live Kafka Metadata Updates
✅ Modern UI with Curved Corners & Responsive Design

Ensure you have the following installed:

• Node.js (v18+ recommended)
• Docker (for running Kafka)
• KafkaJS (Node.js client for Kafka)

git clone https://github.com/uttesh/kafkaclient.git
cd kafkaclient

Run Kafka & Schema Registry using Docker Compose:

docker-compose up -d

version: "3.8"
services:
  kafka:
    image: "bitnami/kafka:latest"
    ports:
      - "9092:9092"
    environment:
      - KAFKA_CFG_NODE_ID=0
      - KAFKA_CFG_PROCESS_ROLES=controller,broker
      - KAFKA_CFG_CONTROLLER_QUORUM_VOTERS=0@localhost:9093
      - KAFKA_CFG_LISTENERS=PLAINTEXT://0.0.0.0:9092,CONTROLLER://0.0.0.0:9093
      - KAFKA_CFG_LISTENER_SECURITY_PROTOCOL_MAP=CONTROLLER:PLAINTEXT,PLAINTEXT:PLAINTEXT
      - KAFKA_CFG_CONTROLLER_LISTENER_NAMES=CONTROLLER

# Install frontend dependencies
cd client
npm install

# Install backend dependencies
cd ../server
npm install

Once the app is running, configure the Kafka bootstrap servers, topics, and groups directly from the UI settings panel.

npx ts-node server.ts

cd client
npm run dev

The application will be available at http://localhost:3000

kafka-dashboard/
│── client/                 # React Frontend (TypeScript + MUI)
│   ├── src/
│   │   ├── components/     # UI Components (Tables, Forms, Modals)
│   │   ├── context/        # Theme & Kafka Contexts
│   │   ├── pages/          # Dashboard & Settings Pages
│   │   ├── App.tsx         # Main App Component
│   │   ├── main.tsx        # ReactDOM Render
│   │   ├── theme.ts        # Custom MUI Theme
│   │   ├── api.ts          # Kafka API Calls
│   ├── package.json        # Frontend Dependencies
│
│── server/                 # Node.js Backend (Express + KafkaJS)
│   ├── src/
│   │   ├── kafka/          # Kafka Producer & Consumer
│   │   ├── routes/         # API Routes
│   │   ├── server.ts       # Express Server
│   ├── package.json        # Backend Dependencies
│
│── docker-compose.yml      # Kafka (No Zookeeper)
│── README.md               # Documentation

• Modern MUI-based UI with curved corners
• Topic & Consumer Group Monitoring
• Dark Mode Toggle
• Live Kafka Messages in Table with Pagination

• Update Kafka Broker Configurations in UI
• View Consumer Groups, Partitions, and Metadata

POST /api/kafka/publish

{
  "topic": "my-topic",
  "key": "message-key",
  "value": "Hello, Kafka!"
}

GET /api/kafka/messages

Returns messages along with offset, partition, and key details.

GET /api/kafka/metadata

Returns brokers, topics, partitions, consumer groups.

• React + TypeScript - Frontend
• Material UI (MUI) - Styling & Components
• KafkaJS - Kafka Client for Node.js
• Express.js - Backend API
• Docker - Kafka Deployment (No Zookeeper)

• 📊 Real-time WebSocket Updates for Messages
• 📉 Kafka Metrics & Charts for Visualization
• 🔄 Custom Kafka Retention Policies & Alerts

1. Fork the repo
2. Create a feature branch (git checkout -b feature-name)
3. Commit your changes (git commit -m 'Added new feature')
4. Push to the branch (git push origin feature-name)
5. Open a PR 🚀

This project is licensed under the MIT License.

For any issues or feature requests, create an Issue or reach out via email.

🚀 Happy Coding with Kafka! 🎉