API Integration

Service Layer

We use a dedicated service layer pattern to decouple UI components from data fetching logic. All API interactions are encapsulated in src/services/.

Structure

Each major domain (e.g., users, disasters, requests) has its own service file: - userService.ts: User profile, authentication. - disasterService.ts: Fetching and managing disaster data. - requestService.ts: Creating and managing help requests. - chatbotService.ts: Interacting with the AI chatbot.

Axios Instance (src/lib/axios.ts)

We use a configured Axios instance to handle requests. This instance automatically: - Sets the Base URL from environment variables. - Attaches the Firebase Auth Token to the Authorization header for every request. - Handles global error responses (e.g., 401 Unauthorized).

// Example usage in a component
import { userService } from '@/services/userService';

const fetchProfile = async () => {
  try {
    const profile = await userService.getProfile();
    setUser(profile);
  } catch (error) {
    console.error("Failed to fetch profile", error);
  }
};

Data Fetching Strategy

Client-Side Fetching

For dynamic data that changes frequently or depends on user interaction, we use React Query (TanStack Query) or useEffect hooks. - React Query: Preferred for caching, background updates, and managing loading/error states. - useEffect: Used for simpler, one-off fetch requirements.

Server-Side Fetching (Next.js)

For SEO-critical pages or data that doesn't change often, we can use Next.js Server Components to fetch data directly on the server. - This reduces the client-side JavaScript bundle and improves initial load time. - Note: Since we rely heavily on Firebase Auth tokens which are client-side, most protected data fetching happens on the client.

Authentication Flow

1. Login: User logs in via Firebase Auth UI.
2. Token: Firebase returns an ID token.
3. Request: The token is attached to the Authorization: Bearer <token> header.
4. Backend: The FastAPI backend validates the token using Firebase Admin SDK.
5. Response: Authorized data is returned.