Skip to main content

Frontend Guide

Location: frontend/

Key Concepts​

  • Next.js App Router
  • Centralized API client: frontend/lib/api-client.ts
    • Sets baseURL from NEXT_PUBLIC_API_URL
    • Injects Authorization and x-organization-id headers
  • OAuth success UIs for ads platforms under frontend/app/oauth/*/success/page.tsx
  • Google Ads account selector: frontend/components/google-ads-account-selector.tsx

Important Files​

  • lib/api-client.ts — Axios client with interceptors
  • app/oauth/google-ads/success/page.tsx — parses tokens from URL, opens account selection, posts to backend to create account
  • components/google-ads-account-selector.tsx — fetches available accounts from /api/google-ads/auth/available-accounts

Conventions​

  • Use apiClient for API calls so auth/org headers are applied
  • Use use client for components needing browser APIs/localStorage

Troubleshooting​

  • If API calls fail with 401 or missing org, ensure the request uses apiClient and an organization is selected.
  • For Google Ads account creation, prefer apiClient.post('/api/google-ads/accounts/create', ...) instead of raw fetch.