Skip to content

SyChell/live-sales-demo

BranchesTags

Repository files navigation

🏪 Hornbach Real-Time Sales Dashboard

A modern, enterprise-grade real-time sales dashboard showcasing AI-powered analytics and Microsoft Fabric integration. See the Hornbach Real-Time Sales Dashboard in action! This demo showcases:

  • ⚡ Real-time sales streaming with live POS data
  • 🤖 AI agents responding automatically to inventory changes
  • 📊 Interactive analytics with natural language queries
  • ☁️ Microsoft Fabric integration and KQL execution
  • 🚀 Complete Azure deployment workflow

Download the repository and open the video file locally, or we'll upload to a streaming platform soon

🎯 Overview

The Hornbach Live Sales Demo demonstrates how modern retail can leverage real-time data streaming to enable:

  • Live Sales Streaming: Real-time POS data visualization instead of waiting for next-day reports
  • Autonomous AI Agents: Intelligent reordering and customer service based on live data
  • Interactive Analytics: Natural language queries against live sales data
  • Microsoft Fabric Integration: Direct connection to Event House and OneLake for enterprise-grade data processing

✨ Key Features

🔄 Real-Time Sales Stream

  • Live POS transaction simulation with authentic German home improvement store products
  • Configurable streaming speed and data generation
  • Visual indicators for new transactions and trends
  • Persistent sales history with session continuity

🤖 AI-Powered Agents

  • Reordering Agent: Monitors inventory levels and triggers automatic restocking recommendations
  • Chat Agent: Natural language interface for querying sales data and generating insights
  • Real-time Response: Agents react immediately to sales patterns and threshold breaches

📊 Live Dashboard

  • Real-time metrics: sales volume, revenue, top products, store performance
  • Interactive charts powered by Recharts
  • Executive-friendly KPI visualization
  • Historical trend analysis

☁️ Microsoft Fabric Integration

  • Event House: Direct KQL queries for real-time data streaming
  • OneLake: Batch CSV export for advanced analytics
  • Dual Mode: Seamless switching between live Fabric data and local simulation
  • Authentication: Secure bearer token support

🚀 Quick Start

Prerequisites

  • Node.js 18+ and npm
  • Git
  • Microsoft Fabric (optional - for live data integration)

Installation

  1. Clone the repository
git clone https://github.com/CindyU-beep/hornbach-real-time-s.git
cd hornbach-real-time-s
  1. Install dependencies
npm install
  1. Start development server
npm run dev

Open http://localhost:5173 in your browser.

  1. Build for production
npm run build
npm run preview

☁️ Azure Deployment

Deploy this application to Azure Container Apps for production use:

Quick Deploy (Windows)

.\deployment\scripts\deploy-azure.ps1

Quick Deploy (Linux/Mac)

chmod +x deployment/scripts/deploy-azure.sh
./deployment/scripts/deploy-azure.sh

📖 See deployment/docs/DEPLOYMENT.md for detailed deployment instructions

What You Get

  • ✅ Fully containerized application
  • ✅ Auto-scaling (1-3 replicas)
  • ✅ Secure HTTPS with automatic certificates
  • ✅ Built-in monitoring and logging
  • ✅ Production-ready configuration

Development Commands

Command Description
npm run dev Start Vite development server
npm run build Build for production
npm run preview Preview production build
npm run server Start backend server
npm start Start both frontend and backend

🏗️ Project Architecture

Frontend Stack

  • React 19 with TypeScript
  • Vite for fast development and building
  • Tailwind CSS for styling with custom theme
  • Radix UI for accessible UI components
  • Lucide React for icons
  • Sonner for toast notifications

Data Layer

  • Local Storage: Configuration and sales data persistence via useKV
  • Fabric Service: Abstracted service layer for Event House and OneLake
  • Simulation Engine: Realistic sales data generation for demo purposes

Project Structure

hornbach-real-time-s/
├── src/                      # Frontend React application
│   ├── components/           # React components
│   ├── features/             # Feature-based modules
│   ├── lib/                  # Core libraries & services
│   ├── hooks/                # Custom React hooks
│   ├── services/             # Business logic & API calls
│   ├── types/                # TypeScript type definitions
│   └── utils/                # Utility functions
├── server/                   # Backend Express API
│   ├── index.js              # Server entry point
│   └── src/
│       ├── config/           # Server configuration
│       ├── middleware/       # Express middleware
│       ├── routes/           # API routes
│       ├── services/         # Backend services
│       └── utils/            # Server utilities
├── deployment/               # Deployment configuration
│   ├── docker/              # Container definitions
│   │   ├── Dockerfile       # Multi-stage build
│   │   └── .dockerignore    # Build exclusions
│   ├── scripts/             # Deployment automation
│   │   ├── deploy-azure.*   # Initial deployment
│   │   └── update-container-app.*  # Update scripts
│   └── docs/                # Deployment documentation
│       └── DEPLOYMENT.md    # Complete guide
├── .env.example             # Environment template
├── package.json             # Dependencies & scripts
└── vite.config.ts           # Vite configuration

🔌 Microsoft Fabric Integration

Quick Setup

  1. Enable Fabric Integration

    • Open the "Microsoft Fabric Integration" card in the app
    • Toggle "Enable Fabric Integration" to ON

  2. Configure Connection

    • Event House Endpoint: https://your-cluster.kusto.windows.net
    • Database: HornbachPOS (or your database name)
    • Access Token: Your Fabric authentication token

  3. Test Connection

    • Click "Test Connection" to verify setup
    • Run sample KQL queries in the "KQL Testing" tab

  4. OneLake Export (Optional)

    • Configure OneLake account and container
    • Export sales data as CSV for batch analytics

Data Schema

The app expects these Event House tables:

  • SalesStream: Real-time sales transactions
  • ProductMaster: Product catalog with inventory levels
  • InventoryEvents: Stock level changes

For complete Fabric setup instructions, see the configuration UI in the application.

Operational Modes

Mode Description Indicator
Simulation Generates realistic sales data locally Badge: "Simulation"
Live Fabric Queries real Event House data Badge: "Live"

🎮 Demo Walkthrough

For Presenters

  1. Initial Setup (30 seconds)

    • Show app in simulation mode
    • Explain the traditional "next-day data" problem

  2. Live Streaming Demo (2 minutes)

    • Start sales stream
    • Show real-time updates across all components
    • Highlight immediate data visibility

  3. AI Agent Showcase (2 minutes)

    • Trigger reordering agent by low inventory
    • Demonstrate chat agent with natural language queries
    • Show autonomous decision-making

  4. Fabric Integration (2 minutes)

    • Switch to live Fabric data (if configured)
    • Show KQL query execution
    • Demonstrate OneLake export

  5. Business Impact (1 minute)

    • Compare real-time vs. next-day scenarios
    • Highlight cost savings and efficiency gains

Sample Chat Queries

Try these natural language questions with the Chat Agent:

  • "What are our top selling products today?"
  • "Which stores have the highest revenue?"
  • "Show me inventory levels for power tools"
  • "What's the trend for paint sales this week?"

🛠️ Development

Key Components

Adding Custom KQL Queries

Modify SAMPLE_KQL_QUERIES to add your own:

export const SAMPLE_KQL_QUERIES = {
  customQuery: `
    SalesStream
    | where TimeGenerated > ago(1h)
    | summarize Revenue = sum(TotalAmount) by StoreId
    | order by Revenue desc
  `
};

Styling and Theming

The app uses a custom Tailwind configuration with:

  • Professional color scheme: Deep blues with orange accents
  • Inter font family: Clean, modern typography
  • Responsive design: Mobile-first approach
  • CSS custom properties: Defined in theme.css

🔧 Configuration

Environment Variables

The app runs entirely client-side. Configuration is managed through the UI and stored locally.

Security Notes

⚠️ Important: This demo stores Fabric tokens in browser localStorage for simplicity. In production:

  • Use a backend API to proxy Fabric requests
  • Never expose authentication tokens to the browser
  • Implement proper token management and refresh logic

📚 Documentation

🐛 Troubleshooting

Common Issues

Port already in use

npm run dev -- --port 3000

Fabric connection fails

  • Verify endpoint URL format: https://cluster.kusto.windows.net
  • Check access token permissions
  • Ensure database name matches exactly
  • Use the in-app Fabric Integration panel for setup guidance

Blank page or styling issues

  • Verify Tailwind content paths in tailwind.config.js
  • Check browser console for JavaScript errors
  • Ensure all dependencies are installed

Module resolution errors

  • The @ alias maps to src/ directory
  • Restart the dev server after configuration changes

🤝 Contributing

This is a demo project for Microsoft Fabric integration showcases. For issues or improvements:

  1. Check existing issues
  2. Create detailed bug reports with reproduction steps
  3. Include environment details (Node version, OS, browser)

📄 License

See LICENSE for details.

🏢 About

Built by the Microsoft Fabric team to demonstrate real-time data streaming capabilities in modern retail environments. This project showcases the transformation from traditional batch processing to live, actionable business intelligence.

Experience the future of retail analytics - where decisions happen in real-time, not tomorrow. 🚀

About

No description, website, or topics provided.

Resources

Readme

License

MIT license
Activity

Stars

0 stars

Watchers

0 watching

Forks

1 fork
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages