Project Info

OptiPanel

This project did not submit a description on Devpost.

🚀 CalHacks Revenue Optimization Platform

AI-powered revenue optimization platform with intelligent voice calling and real-time analytics

📋 What Is This?

An intelligent B2B revenue optimization platform that:

📊 Tracks user behavior on your e-commerce site in real-time
🤖 Uses Claude AI to decide when to intervene with at-risk customers
📞 Makes realistic voice calls via Vapi with natural-sounding AI agents
💬 AI Chat Interface powered by Claude for instant business insights
📈 Beautiful dashboards with real-time metrics and analytics

⚡ Quick Start

Prerequisites

Node.js 18+
API Keys: Vapi, Anthropic Claude, OpenAI

1. Clone & Install

git clone https://github.com/a-khandel/calhacks-demo.git
cd calhacks-demo
npm install
cd frontend02 && npm install && cd ..
cd dummy_website && npm install && cd ..

2. Configure Environment

cp .env.example .env
# Add your API keys to .env

3. Start Everything

# Terminal 1 - Backend
node src/index.js

# Terminal 2 - Dashboard
cd frontend02 && npm run dev

# Terminal 3 - Demo E-commerce Site
cd dummy_website && npm run dev

📖 Full Setup Guide: docs/setup/QUICKSTART.md

📁 Project Structure

calhacks-demo/
├── 📂 src/                          # Backend (Node.js + Express)
│   ├── index.js                     # Main server
│   ├── services/
│   │   ├── aiChatService.js        # Claude AI chat integration
│   │   ├── claudeService.js        # AI decision engine
│   │   ├── vapiService.js          # Voice calling via Vapi
│   │   ├── engagementDetector.js   # User behavior analysis
│   │   └── metricsAggregator.js    # Real-time analytics
│   └── config/
│       └── vapi.config.js          # Voice agent configuration
│
├── 📂 frontend02/                   # Main Dashboard (React + Vite)
│   ├── src/
│   │   ├── components/
│   │   │   └── app/
│   │   │       ├── AIChatPanel.tsx     # Claude AI chat interface
│   │   │       └── EngagementMonitor.tsx # User monitoring
│   │   └── contexts/
│   │       └── MetricsContext.tsx       # Real-time metrics
│   └── package.json
│
├── 📂 dummy_website/                # Demo E-commerce Site (React + Vite)
│   ├── src/
│   │   ├── services/
│   │   │   └── analyticsTracker.js  # Sends metrics to backend
│   │   └── pages/                   # E-commerce pages
│   └── package.json
│
├── 📂 docs/                         # Documentation
│   ├── deployment/                  # Deployment guides
│   │   ├── QUICK_DEPLOY.md         # 15-min deploy guide
│   │   ├── DEPLOYMENT.md           # Full deployment docs
│   │   └── GITHUB_SETUP.md         # GitHub setup
│   ├── setup/                       # Setup instructions
│   │   ├── QUICKSTART.md           # Quick start guide
│   │   └── SETUP_INSTRUCTIONS.md   # Detailed setup
│   ├── guides/                      # Feature guides
│   │   ├── DEMO_GUIDE.md           # How to demo the app
│   │   └── AUTO_CALL_TRIGGER_GUIDE.md
│   ├── technical/                   # Technical docs
│   └── PROJECT_STRUCTURE.md         # Architecture details
│
├── 📂 scripts/                      # Utility scripts
│   ├── START_BACKEND.sh            # Quick backend starter
│   └── test-quick.js               # Test script
│
├── 📂 config/                       # Configuration files
│   └── railway.json                # Railway deployment config
│
├── .env.example                     # Environment variables template
├── package.json                     # Backend dependencies
└── README.md                        # This file

🎯 Key Features

1. Real-Time User Tracking

Monitors user behavior on e-commerce site
Tracks cart actions, page views, engagement
Detects abandonment patterns

2. AI-Powered Decision Making

Claude AI analyzes user behavior
Intelligent intervention timing
Personalized outreach strategies

3. Realistic Voice Calls

Natural-sounding AI agent (Sarah)
Office background sounds for realism
Context-aware conversation scripts
Handles objections and questions

4. AI Chat Interface (OptiPanel AI)

Ask questions about your data
Get instant insights and visualizations
Generate charts automatically
Save graphs to dashboard

5. Beautiful Dashboards

Real-time metrics visualization
User engagement monitoring
Executive dashboard with custom widgets

🚀 Deployment

Quick Deploy (15 minutes)

Backend → Deploy to Railway
Frontend Dashboard → Deploy to Vercel
Demo Site → Deploy to Vercel (separate project)

📖 Step-by-Step: docs/deployment/QUICK_DEPLOY.md

Cost: $0/month

Railway: FREE ($5 credits)
Vercel: FREE (unlimited for personal projects)

📚 Documentation

Getting Started

Quick Start Guide - Get running in 5 minutes
Setup Instructions - Detailed setup
Demo Guide - How to demo the platform

Deployment

Quick Deploy (15 min) - Fast deployment
Full Deployment Guide - All options
GitHub Setup - Repository setup

Technical

Project Structure - Architecture details
Frontend Integration - Frontend docs
What's New - Recent updates

🛠️ Tech Stack

Backend

Runtime: Node.js + Express
AI: Claude 3.5 Sonnet (Anthropic)
Voice: Vapi.ai + ElevenLabs + OpenAI GPT-4
Real-time: WebSocket-like polling

Frontend

Framework: React + TypeScript + Vite
UI: Tailwind CSS + Radix UI + shadcn/ui
Charts: Recharts
State: React Context API

Deployment

Backend: Railway
Frontend: Vercel
Demo Site: Vercel

🎬 How It Works

┌─────────────────────────────────────────────────────────┐
│ 1. User browses demo e-commerce site                    │
│    - Adds items to cart                                 │
│    - Removes items (showing hesitation)                 │
└─────────────┬───────────────────────────────────────────┘
              │
              ▼
┌─────────────────────────────────────────────────────────┐
│ 2. Analytics tracker sends metrics to backend           │
│    - Cart actions, page views, engagement               │
└─────────────┬───────────────────────────────��───────────┘
              │
              ▼
┌─────────────────────────────────────────────────────────┐
│ 3. Backend analyzes behavior with Claude AI             │
│    - Detects 3rd cart removal = critical risk           │
│    - AI decides: "Call now!"                            │
└─────────────┬───────────────────────────────────────────┘
              │
              ▼
┌─────────────────────────────────────────────────────────┐
│ 4. Vapi makes realistic voice call                      │
│    - Natural AI agent with office background sounds     │
│    - Personalized script based on user behavior         │
│    - Offers help, discount, or assistance               │
└─────────────┬───────────────────────────────────────────┘
              │
              ▼
┌─────────────────────────────────────────────────────────┐
│ 5. Dashboard shows everything in real-time              │
│    - User metrics, call status, engagement trends       │
│    - AI chat for instant insights                       │
└─────────────────────────────────────────────────────────┘

🔑 Environment Variables

# Vapi (Voice Calling)
VAPI_API_KEY=your_vapi_api_key
VAPI_PHONE_NUMBER_ID=your_phone_number_id
DEFAULT_CALL_NUMBER=+1234567890

# Anthropic Claude (AI)
CLAUDE_API_KEY=your_claude_api_key

# OpenAI (used by Vapi)
OPENAI_API_KEY=your_openai_api_key

# Server
PORT=3001
NODE_ENV=development
COMPANY_NAME=YourCompany

Get API keys:

🧪 Testing

Test the Call Trigger

Visit demo e-commerce site: http://localhost:5173
Add items to cart
Remove items from cart 3 times
Check backend console - should see: 🚨 THIRD CART REMOVAL DETECTED
Voice call will be initiated!

📖 Full Test Guide: docs/guides/TEST_AUTO_TRIGGER.md

🤝 Contributing

This is a CalHacks demo project. Feel free to fork and experiment!

📝 License

MIT

🔗 Links

Repository: https://github.com/a-khandel/calhacks-demo
Deployment Guides: docs/deployment/
Technical Docs: docs/technical/

💡 Need Help?

Built for CalHacks 🎉

Analysis

Compare with all teams

View

Metric

Aryan Khandelwal
3
Claude
2

Figures cover GitHub contributors during the hackathon window. A co-authored commit counts in full for each author, so per-member totals add up to more than the whole-team figures.

Technology

Found in codeClaimed only

AnthropicIn code
CSSIn code
ExpressIn code
HTMLIn code
JavaScriptIn code
ReactIn code
Tailwind CSSIn code
TypeScriptIn code
DockerClaimed
FastAPIClaimed
PythonClaimed
RedisClaimed

8 of 12 appear in the indexed code. 4 claimed on Devpost could not be matched to code, which may simply mean the tool leaves no trace in the repository.

AI coding agents

Claude CodeCommits

Detected from committed agent config files and commit authorship. Absence of a signal is not proof an agent was unused.

Codebase size

Source size

1.3 MB

Source files

217

Counts recognized source files only; vendored directories, binaries and lockfiles are excluded, so this is smaller than the repository on disk.

Repository

aneshkondor/optipanelv2

230 files · 1.8 MB · @ e1abcd0

Structure

Interface
147 files · 64%
Screens, components and styles rendered to the user.
Application logic
29 files · 13%
Domain rules, services and shared utilities.

Supporting

Layers are inferred from where files sit in the tree, not from reading the code. A project that names its directories unconventionally will read oddly here — open the file browser to check anything the diagram implies.

Languages

TypeScript59%
Markdown17%
CSS15%
JavaScript9%
HTML0%
Shell0%

Share of indexed source by file size. Binary and vendored files are excluded.

Dependencies

frontend-rev-opt/package.json

npm · 48

@radix-ui/react-accordion
@radix-ui/react-alert-dialog
@radix-ui/react-aspect-ratio
@radix-ui/react-avatar
@radix-ui/react-checkbox
@radix-ui/react-collapsible
@radix-ui/react-context-menu
@radix-ui/react-dialog
@radix-ui/react-dropdown-menu
@radix-ui/react-hover-card
@radix-ui/react-label
@radix-ui/react-menubar
@radix-ui/react-navigation-menu
@radix-ui/react-popover
@radix-ui/react-progress
@radix-ui/react-radio-group
@radix-ui/react-scroll-area
@radix-ui/react-select
+30 more

package.json

npm · 46

@anthropic-ai/sdk
@radix-ui/react-accordion
@radix-ui/react-alert-dialog
@radix-ui/react-avatar
@radix-ui/react-checkbox
@radix-ui/react-collapsible
@radix-ui/react-dialog
@radix-ui/react-dropdown-menu
@radix-ui/react-hover-card
@radix-ui/react-label
@radix-ui/react-popover
@radix-ui/react-progress
@radix-ui/react-radio-group
@radix-ui/react-select
@radix-ui/react-separator
@radix-ui/react-slider
@radix-ui/react-switch
@radix-ui/react-tabs
+28 more

website-demo/package.json

npm · 46

@radix-ui/react-accordion
@radix-ui/react-alert-dialog
@radix-ui/react-aspect-ratio
@radix-ui/react-avatar
@radix-ui/react-checkbox
@radix-ui/react-collapsible
@radix-ui/react-context-menu
@radix-ui/react-dialog
@radix-ui/react-dropdown-menu
@radix-ui/react-hover-card
@radix-ui/react-label
@radix-ui/react-menubar
@radix-ui/react-navigation-menu
@radix-ui/react-popover
@radix-ui/react-progress
@radix-ui/react-radio-group
@radix-ui/react-scroll-area
@radix-ui/react-select
+28 more

Declared in the repository’s manifests at the indexed commit. A declared package is not proof it is used, and runtime dependencies are listed first.

OptiPanel

🚀 CalHacks Revenue Optimization Platform

📋 What Is This?

⚡ Quick Start

Prerequisites

1. Clone & Install

2. Configure Environment

3. Start Everything

📁 Project Structure

🎯 Key Features

1. Real-Time User Tracking

2. AI-Powered Decision Making

3. Realistic Voice Calls

4. AI Chat Interface (OptiPanel AI)

5. Beautiful Dashboards

🚀 Deployment

Quick Deploy (15 minutes)

Cost: $0/month

📚 Documentation

Getting Started

Deployment

Technical

🛠️ Tech Stack

Backend

Frontend

Deployment

🎬 How It Works

🔑 Environment Variables

🧪 Testing

Test the Call Trigger

🤝 Contributing

📝 License

🔗 Links

💡 Need Help?

Technology

AI coding agents

Codebase size

Structure

Interface

Application logic

Languages

Dependencies