# Frontend to Backend Migration Review

This document identifies frontend logic that should be moved to the backend, as the app transitions from a frontend-only to a backend-driven architecture.

## 🔴 Critical - Must Move to Backend

### 1. Chat/LLM Direct Calls

**File:** `hooks/useChat.ts`

**Issue:** Still directly calling GoogleGenAI API with API keys in frontend.

**Current:**

```typescript
const ai = new GoogleGenAI({ apiKey: process.env.API_KEY });
chatRef.current = ai.chats.create({ ... });
```

**Should be:**

- Backend endpoint: `POST /api/ai/chat` (with streaming support)
- Backend endpoint: `POST /api/ai/chat/stream` (for streaming responses)
- Frontend should only call backend API

**Priority:** 🔴 HIGH - Security issue (API keys exposed)

---

### 2. Proposal Management

**File:** `contexts/PartnershipContext.tsx`, `data/proposals.ts`

**Issue:** Proposals stored in frontend state and localStorage, not persisted in backend.

**Current:**

- Proposals stored in React state
- Initial data from `data/proposals.ts`
- No backend persistence

**Should be:**

- Backend endpoints:
  - `GET /api/proposals` - List proposals (with filters)
  - `GET /api/proposals/:id` - Get proposal by ID
  - `POST /api/proposals` - Create proposal
  - `PUT /api/proposals/:id/status` - Update proposal status
  - `GET /api/proposals/organization/:orgId` - Get proposals for organization
- Frontend should use API hooks

**Priority:** 🔴 HIGH - Data persistence issue

---

### 3. Direct Symbiosis Matching

**File:** `hooks/useDirectSymbiosis.ts`

**Issue:** Business logic for matching needs/offers is in frontend.

**Current:**

```typescript
// Frontend loops through organizations and matches needs/offers
for (const otherOrg of otherOrgs) {
  for (const need of myNeeds) {
    const matchingOffer = otherOrg.offers.find(...);
    // ...
  }
}
```

**Should be:**

- Backend endpoint: `GET /api/matching/organization/:orgId/direct`
- Returns: `{ providers: [...], consumers: [...] }`
- Backend uses ResourceFlows for accurate matching

**Priority:** 🔴 HIGH - Business logic should be on backend

---

### 4. Analytics Calculations

**File:** `lib/analytics.ts`

**Issue:** Business analytics calculated in frontend.

**Functions:**

- `calculateSymbioticConnections()` - Calculates total connections
- `analyzeSupplyAndDemand()` - Analyzes top needs/offers

**Should be:**

- Backend endpoints:
  - `GET /api/analytics/connections` - Get connection statistics
  - `GET /api/analytics/supply-demand` - Get supply/demand analysis
  - `GET /api/analytics/dashboard` - Get dashboard statistics

**Priority:** 🟡 MEDIUM - Performance and consistency

---

## 🟡 Medium Priority - Should Move

### 5. Organization Search/Filtering

**File:** `hooks/useOrganizationFilter.ts`

**Issue:** Search scoring logic (with weights +50, +25, etc.) is in frontend.

**Current:**

- Client-side filtering and scoring
- Search relevance scoring with custom weights

**Should be:**

- Backend endpoint: `GET /api/organizations/search?q=...&sectors=...&sort=...`
- Backend handles search indexing and relevance scoring
- Frontend can still do basic client-side filtering for UX (debouncing, etc.)

**Priority:** 🟡 MEDIUM - Better performance and consistency

---

### 6. Similar Organizations

**File:** `lib/organizationUtils.ts`, `hooks/pages/useOrganizationData.ts`

**Issue:** Finding similar organizations by sector is done in frontend.

**Current:**

```typescript
return organizations
  .filter((org) => org.ID !== organization.ID && org.Sector === organization.Sector)
  .slice(0, 5);
```

**Should be:**

- Backend endpoint: `GET /api/organizations/:id/similar?limit=5`
- Backend can use more sophisticated similarity algorithms
- Could consider: sector, location, resource flows, etc.

**Priority:** 🟡 MEDIUM - Could be enhanced on backend

---

## 🟢 Low Priority - Optional

### 7. Client-Side Filtering/Sorting

**File:** `hooks/useOrganizationFilter.ts` (sorting part)

**Current:** Client-side sorting by name, sector, etc.

**Note:** This is acceptable for small datasets. For large datasets, should use backend pagination and sorting.

**Priority:** 🟢 LOW - Acceptable for MVP, optimize later

---

## Summary

### Immediate Actions Required

1. ✅ **Move Chat to Backend API** - Security issue
2. ✅ **Move Proposals to Backend** - Data persistence
3. ✅ **Move Direct Symbiosis to Backend** - Business logic
4. ✅ **Move Analytics to Backend** - Performance

### Backend Endpoints Needed

#### Chat

- `POST /api/ai/chat` - Send message
- `POST /api/ai/chat/stream` - Streaming chat (SSE or WebSocket)

#### Proposals

- `GET /api/proposals` - List proposals
- `GET /api/proposals/:id` - Get proposal
- `POST /api/proposals` - Create proposal
- `PUT /api/proposals/:id/status` - Update status
- `GET /api/proposals/organization/:orgId` - Get by organization

#### Matching

- `GET /api/matching/organization/:orgId/direct` - Direct symbiosis matches

#### Analytics

- `GET /api/analytics/connections` - Connection statistics
- `GET /api/analytics/supply-demand` - Supply/demand analysis
- `GET /api/analytics/dashboard` - Dashboard stats

#### Organizations

- `GET /api/organizations/search` - Search with filters
- `GET /api/organizations/:id/similar` - Similar organizations

---

## Migration Checklist

- [ ] Create backend chat endpoints
- [ ] Update `useChat.ts` to use backend API
- [ ] Create backend proposal endpoints
- [ ] Update `PartnershipContext.tsx` to use API hooks
- [ ] Create backend direct symbiosis endpoint
- [ ] Update `useDirectSymbiosis.ts` to use backend API
- [ ] Create backend analytics endpoints
- [ ] Update analytics usage to use backend API
- [ ] Create backend organization search endpoint
- [ ] Update `useOrganizationFilter.ts` to use backend search
- [ ] Create backend similar organizations endpoint
- [ ] Update `useOrganizationData.ts` to use backend API

---

## Notes

- Some client-side filtering/sorting is acceptable for UX (debouncing, instant feedback)
- Backend should handle all business logic, calculations, and data persistence
- Frontend should be "dumb" - just display data and call APIs
- Consider caching strategies for frequently accessed data
- Use React Query for all data fetching (already in place)