Consolidate hardcoded URLs into configuration management

[Josue19-08]

➡️ Title

Consolidate hardcoded URLs into configuration management

📘 Description

Centralize all hardcoded URLs scattered throughout the codebase into a unified configuration system. Currently, URLs are hardcoded in multiple components making them difficult to manage and environment-specific deployments challenging.

Context: Found hardcoded URLs in adoption-flow components, Google OAuth endpoints, and various other places. These should be centralized for better maintainability and environment management.

✅ Acceptance Criteria

Create configuration service

• Create lib/config/app-config.ts with centralized URL management:
  • API endpoints configuration
  • External service URLs (Google OAuth, IPFS gateways)
  • Asset URLs and CDN endpoints
  • Environment-specific URL handling

Environment variables setup

• Update .env.local.example with all required URL variables:
  • NEXT_PUBLIC_API_URL
  • NEXT_PUBLIC_GOOGLE_CLIENT_ID
  • NEXT_PUBLIC_IPFS_GATEWAY_URL
  • NEXT_PUBLIC_ASSET_CDN_URL

Update components with hardcoded URLs

• Refactor components/adoption-flow/tree-adoption.tsx:

  • Replace Vercel storage URLs with config service
  • Use dynamic asset loading from configuration

• Refactor components/adoption-flow/nft-preview.tsx:

  • Replace hardcoded image URLs
  • Implement fallback URL handling

• Refactor components/adoption-flow/impact-dashboard.tsx:

  • Use configuration for asset URLs
  • Add URL validation

• Update components/adoption-flow/farm-selection.tsx:

  • Replace hardcoded farm image URLs
  • Implement dynamic URL building

Update authentication URLs

• Refactor hooks/auth/use-register-form.ts:
  • Move Google OAuth URL to configuration
  • Use environment variable for API endpoints

Add URL validation and fallbacks

• Create utils/url-validation.ts:
  • URL format validation functions
  • Fallback URL handling
  • CDN health check utilities

Configuration structure example

// lib/config/app-config.ts
export const appConfig = {
  api: {
    baseUrl: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000',
    endpoints: {
      auth: '/auth',
      wallet: '/wallet',
      projects: '/projects'
    }
  },
  external: {
    googleOAuth: process.env.NEXT_PUBLIC_GOOGLE_OAUTH_URL,
    ipfsGateway: process.env.NEXT_PUBLIC_IPFS_GATEWAY
  },
  assets: {
    cdnUrl: process.env.NEXT_PUBLIC_ASSET_CDN_URL,
    fallbackUrl: '/images'
  }
}

Update service files

• Update services/wallet.service.ts:
  • Use config for API URL instead of hardcoded
  • Add environment-based URL switching

⚠ Use kebab-case for all file and folder names.
⚠ Do not use default alias imports or relative paths like ../../components/foo.
⚠ Use alias paths with @, e.g. @/components/foo.
⚠ Structure the code with reusable components and reuse existing ones.