Deal Bot Web Dashboard

Modern React dashboard for monitoring dealbot performance

This is the frontend web application for Deal Bot, built with React, TypeScript, and Vite.

Tech Stack

• Framework: React 19.x
• Language: TypeScript 5.x
• Build Tool: Vite 7.x
• Styling: Tailwind CSS 4.x
• UI Components: Radix UI + shadcn/ui
• Charts: Recharts
• Icons: Lucide React
• Theme: next-themes (dark/light mode)

Prerequisites

• Node.js 20+
• pnpm
• Backend API running (see ../backend/README.md)

Quick Start

1. Install Dependencies

pnpm install

2. Configure Environment

cp .env.example .env

Edit .env to point to your backend API:

VITE_API_BASE_URL=http://localhost:8080

Important: If you changed DEALBOT_PORT in the backend, update this URL accordingly.

3. Run Development Server

pnpm dev

The dashboard will be available at: http://localhost:5173

4. Build for Production

pnpm build

Output will be in the dist/ directory.

5. Preview Production Build

pnpm preview

Configuration

Environment Variables

Variable	Description	Default
VITE_API_BASE_URL	Backend API base URL	http://localhost:8080
VITE_PLAUSIBLE_DATA_DOMAIN	Enable Plausible site analytics	Empty (disabled)

All environment variables must be prefixed with VITE_ to be accessible in the application. For local development, Vite reads VITE_* variables from apps/web/.env at dev-server startup. For production containers, runtime overrides are supported via runtime-config.js (generated on container start). Set VITE_API_BASE_URL and/or VITE_PLAUSIBLE_DATA_DOMAIN as container env vars to avoid rebuilds.

Development

Available Scripts

pnpm dev            # Start development server with HMR
pnpm build          # Build for production
pnpm preview        # Preview production build locally

Code Quality

pnpm format         # Format code with Biome
pnpm format:check   # Check formatting
pnpm lint           # Lint and auto-fix
pnpm lint:check     # Check linting
pnpm check          # Run both format and lint
pnpm check:ci       # CI checks (no auto-fix)

Connecting to Backend

The frontend communicates with the backend API using the base URL defined in VITE_API_BASE_URL.

API Integration

All API calls should use the base URL from environment variables:

const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;

// Example API call
const response = await fetch(`${API_BASE_URL}/deals`);
const deals = await response.json();

CORS Configuration

Ensure the backend's DEALBOT_ALLOWED_ORIGINS includes your frontend URL:

# In backend/.env
DEALBOT_ALLOWED_ORIGINS=http://localhost:5173,http://127.0.0.1:5173

Troubleshooting

API Connection Issues

# Verify backend is running
curl http://localhost:8080/api

# Check VITE_API_BASE_URL in .env matches backend port
# Check DEALBOT_ALLOWED_ORIGINS in backend/.env includes frontend URL

Build Errors

# Clear node_modules and reinstall
rm -rf node_modules
pnpm install

# Clear Vite cache
rm -rf node_modules/.vite

Port Already in Use

# Vite will automatically try the next available port
# Or specify a different port:
pnpm dev --port 3000

Contributing

See the main README for contribution guidelines.

Resources

• React Documentation
• Vite Documentation
• Tailwind CSS Documentation
• shadcn/ui Documentation
• Recharts Documentation

License

Dual-licensed: MIT, Apache Software License v2 by way of the Permissive License Stack.