React/TypeScript Development Guide

Set up your frontend development environment for the QBITEL Bridge UI Console with Vite, ESLint, and component-driven development.

Prerequisites

  • Node.js 18+ with npm
  • AI Engine API running at http://localhost:8000 (for API integration)

Environment Setup

cd ui/console

# Install dependencies
npm install

# Start development server with HMR
npm run dev
# Console available at http://localhost:3000

# Build for production
npm run build

# Preview production build
npm run preview

Project Structure

ui/console/
  src/
    App.tsx                     # Root component
    api/                        # API client layer
      devices.ts                # Device API client
    auth/                       # OIDC authentication
      oidc.ts                   # OIDC configuration
    components/                 # Shared components
      EnhancedDashboard.tsx     # Main dashboard
      ProductionDashboard.tsx   # Production monitoring view
      SystemSettings.tsx        # System configuration
      marketplace/              # Protocol marketplace
        MyProtocols.tsx         # User's protocols
        ProtocolDetails.tsx     # Protocol detail view
        ProtocolSubmission.tsx  # Submit new protocol
      responsive/               # Responsive layout
    config/                     # App configuration
      production.ts             # Production settings
    theme/                      # Material UI theme
      EnterpriseTheme.ts        # Enterprise theme definition
      ThemeProvider.tsx          # Theme context provider
    types/                      # TypeScript type definitions
      auth.ts                   # Auth types
      marketplace.ts            # Marketplace types
  pages/
    index.tsx                   # Landing page
  index.html                    # HTML entry point
  vite.config.ts                # Vite configuration
  package.json                  # Dependencies and scripts

Development Workflow

Available Scripts

Command Description
npm run dev Start Vite dev server with HMR
npm run build Production build with TypeScript checking
npm test Run test suite
npm run lint Run ESLint
npm run preview Preview production build locally

Environment Configuration

Create a .env file in ui/console/:

VITE_API_BASE_URL=http://localhost:8000
VITE_OIDC_AUTHORITY=https://auth.example.com
VITE_OIDC_CLIENT_ID=qbitel-console
VITE_ENABLE_MARKETPLACE=true
VITE_ENABLE_MONITORING=true

Linting and Formatting

# Run ESLint
npm run lint

# Fix auto-fixable issues
npx eslint src/ --fix

# Type check
npx tsc --noEmit

Adding New Components

  1. Create the component file in src/components/
  2. Define TypeScript interfaces for props in src/types/
  3. Use the enterprise theme tokens from src/theme/
  4. Write tests alongside the component
  5. Ensure responsive behavior using the ResponsiveLayout component

Next Steps