# Backend and Frontend Integration Description

## API Client Architecture

A generic, type-safe HTTP client for REST API calls:

### Features:

* TypeScript generic support for type-safe responses
* JWT authentication via headers
* JSON/text response handling
* Optional request/response logging
* Relay mode for external APIs
* No-cache policy for fresh data

### Parameters:

* endpoint - API endpoint path
* method - HTTP method (GET, POST, PUT, DELETE)
* headers - Custom headers (e.g., Authorization)
* body - Request payload (auto-serialized)
* isJson - Response type toggle (default: true)
* log - Debug logging toggle
* relay - External API mode (bypasses base URL)

## Data Fetching Patterns

### Technology Stack:

* React Query - Data fetching and caching
* Zustand - Client-side state management
* Custom WebSocket Hook - Real-time data streaming

#### API Client and Data Fetching Testing

We tested all backend integrated APIs using the fetch/XHR tab under the network tab of `Developer Tools`  tab in google chrome

<figure><img src="/files/JUfvcle7LTlQ9iimhlbd" alt=""><figcaption></figcaption></figure>

## WebSocket Integration

### Features:

* Automatic reconnection with exponential backoff
* Ping/pong heartbeat mechanism
* JWT authentication support
* Multi-message handling
* Clean connection lifecycle management

#### Websocket Testing

We tested all backend integrated websocket using the socket tab under the network tab of `Developer Tools`  tab in google chrome

<figure><img src="/files/Y9NhztZtth3P1qRLpWdl" alt=""><figcaption></figcaption></figure>

## Testing Coverage

### Test Scenarios:

* GET/POST/PUT requests with bodies
* Custom header merging (Authorization)
* JSON/text response handling
* Error handling (404, 500, network errors)
* Relay mode (external APIs)
* Request/response logging
* Null/undefined body handling
* Environment variable handling


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.deltadefi.io/faq/project-catalyst-f12-milestone-reporting/backend-and-frontend-integration-description.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.