KafkaCart Stream Every Click, Learn Every Pattern

A real-time event-driven e-commerce analytics platform built with React, Express, and Apache Kafka to track user behavior and visualize insights instantly.

Features • Tech Stack • Getting Started • Architecture

KafkaCart is a full-stack learning project that simulates an e-commerce flow and captures user interaction events in real time. The frontend emits structured events (login, product view, cart updates, checkout, and order placement), the backend publishes them to Kafka, and a consumer continuously aggregates analytics for dashboard visualization.

It is designed to help you understand practical event-driven architecture patterns, including producer-consumer flow, stream-based analytics, and near real-time dashboarding.

Analytics Dashboard Real-time analytics showing events, conversions, top products, and payment distribution
Product Catalog Browse products while triggering product view and cart interaction events	Product Page Detailed product view with add-to-cart and interaction tracking	Docker Containers Containerized services running the full analytics platform

• Kafka Producer API - Frontend sends events to Express, which publishes to Kafka topic user-events
• Kafka Consumer Aggregation - Continuous consumer updates in-memory analytics state in real time
• Structured Event Schema - Consistent payload shape across login, product, cart, and order workflows
• Topic Partitioning Ready - Topic setup supports multiple partitions for scaling experiments

• Authentication Events - USER_LOGIN, USER_SIGNUP, and USER_LOGOUT
• Shopping Behavior Events - PRODUCT_VIEW, ADD_TO_CART, REMOVE_FROM_CART
• Checkout & Order Events - CHECKOUT_STARTED, PAYMENT_METHOD_SELECTED, ORDER_PLACED
• Metadata Support - Tracks order totals, payment method, item counts, and product IDs

• Summary Metrics - Total events, signups, logins, orders, revenue, and average order value
• Top Product Insights - Most viewed products from event stream aggregation
• Cart Funnel Metrics - Add-to-cart vs remove-from-cart behavior
• Payment Distribution - Event-based payment method usage stats

• Dockerized Infra - Kafka, Zookeeper, Postgres, and Redis via Docker Compose
• Modern Frontend Stack - React + Vite + Tailwind + Recharts for responsive visualization
• Simple Local Setup - Minimal commands to run full streaming pipeline locally
• Learning-Friendly Codebase - Clear separation of producer, consumer, and analytics endpoints

• Kafka Learning Projects - Understand real-time producer-consumer workflows end to end
• Event-Driven Architecture Demos - Show asynchronous analytics pipeline in interviews and demos
• Behavior Analytics Prototyping - Rapidly test which user actions should be tracked and how
• Dashboarding Practice - Build real-time metrics views from streaming event sources
• System Design Exploration - Experiment with partitions, consumer groups, and scale paths

React Client
      │
      ▼
Express API
      │
      ▼
Kafka Producer
      │
      ▼
Kafka Topic: user-events
      │
      ▼
Kafka Consumer
      │
      ▼
Real-Time Aggregator
      │
      ├── Analytics API
      │
      ├── Redis Cache
      │
      └── PostgreSQL (future persistence)

Make sure you have the following installed:

• Node.js (v18 or higher recommended)
• npm
• Docker Desktop (for Kafka/Zookeeper/Postgres/Redis)

1. Clone the repository

   git clone https://github.com/himadri75/KafkaCart.git
   cd "KafkaCart"

2. Start infrastructure services

   docker compose up -d

3. Setup Backend

   cd server
   npm install

4. Create Kafka topic (one-time or when needed)

   node createTopic.js

5. Setup Frontend

   cd ../client
   npm install

1. Start the Backend Server

   cd server
   npm start

   Server will run on http://localhost:3000

2. Start the Frontend Development Server

   cd client
   npm run dev

   Frontend will run on http://localhost:5173

3. Open analytics dashboard Navigate to your analytics route http://localhost:5173/analytics in the frontend app to view live data updates.

{
	"eventId": "uuid",
	"eventType": "EVENT_NAME",
	"userId": "USER_ID",
	"sessionId": "SESSION_ID",
	"productId": "PRODUCT_ID",
	"timestamp": 1710432000,
	"source": "web",
	"metadata": {}
}

• GET /analytics/summary
• GET /analytics/top-products
• GET /analytics/cart
• GET /analytics/payments

Himadri Karan
Full Stack Developer & Software Engineer

• 📧 Email: [email protected]
• 💼 LinkedIn: linkedin.com/in/himadri516
• 🌐 Portfolio: Himadri.me
• 🐙 GitHub: github.com/himadri75