# Frontend Integration Testing Guide

## 1. Start Both Servers

### Terminal 1 - Backend
```bash
cd atomizer-dashboard/backend
python -m uvicorn api.main:app --reload --port 8000
```

### Terminal 2 - Frontend
```bash
cd atomizer-dashboard/frontend
npm run dev
```

Frontend will be at: `http://localhost:3003`

## 2. Test API Integration

The frontend should be able to:

### Fetch Studies List
```typescript
fetch('http://localhost:8000/api/optimization/studies')
  .then(r => r.json())
  .then(data => console.log('Studies:', data));
```

### Get Study Status
```typescript
fetch('http://localhost:8000/api/optimization/studies/bracket_stiffness_optimization_V3/status')
  .then(r => r.json())
  .then(data => console.log('Status:', data));
```

### Connect WebSocket
```typescript
const ws = new WebSocket('ws://localhost:8000/api/ws/optimization/bracket_stiffness_optimization_V3');

ws.onmessage = (event) => {
  const message = JSON.parse(event.data);
  console.log('Message type:', message.type);
  console.log('Data:', message.data);
};
```

## 3. Frontend Development Tasks

Now your frontend developer can implement:

### Phase 1: Basic Study Viewing
- Studies list page
- Study detail page with current status
- Trial history table

### Phase 2: Real-Time Updates
- WebSocket connection manager
- Live trial updates in UI
- Progress bar updates
- "New Best" notifications

### Phase 3: Pareto Front Visualization
- Scatter plot of Pareto solutions
- Interactive filtering
- Solution comparison

### Phase 4: 3D Visualization
- GLTF model viewer (Three.js / react-three-fiber)
- Load mesh from `/api/optimization/studies/{id}/mesh/model.gltf`
- Color-coded stress/displacement display

### Phase 5: Report Generation
- Report generation buttons
- Download generated reports
- Preview HTML reports in-browser

## 4. Test Data Available

**bracket_stiffness_optimization_V3** has:
- 100 completed trials
- 48 Pareto-optimal solutions
- Multi-objective: minimize mass + maximize stiffness
- Design variables: rib_thickness_1, rib_thickness_2, rib_thickness_3, base_thickness

Perfect for testing all dashboard features.

## 5. API Endpoints Reference

All endpoints are documented in the technical summary provided earlier.

Key endpoints:
- `GET /api/optimization/studies` - List all studies
- `GET /api/optimization/studies/{id}/status` - Get study status
- `GET /api/optimization/studies/{id}/trials` - Get trial history
- `GET /api/optimization/studies/{id}/pareto-front` - Get Pareto solutions
- `POST /api/optimization/studies/{id}/generate-report` - Generate report
- `WS /api/ws/optimization/{id}` - WebSocket stream

All support CORS and are ready for React integration.